Pacer Design Blog

Featured Posts:

  • mobile

    Internet users are shifting toward mobile

    Is your site ready to take advantage of this? Continue reading

  • krenn-thumb

    New JimKrenn.com is live!

    Pittsburgh Comedian & Entertainer Jim Krenn tapped Pittsburgh web design… Continue reading

Improve Your Facebook Page

Posted on February 16th, 2012 by :

So you’re on Facebook, like everybody else.  How can you make your page stand out?  Well, there are a few simple ways to do this, and here at Pacer we can help you take your Facebook fan page or personal page to the next level.

Step 1:
Landing pages – a nice and easy way to make your Facebook page stand out from the rest.  Facebook gives you the option to add html and css code to an iframe within your Facebook page – internet code jargon aside – the general idea here is that we can create a totally customized page for when someone comes to your Facebook page.

Even better is that we can separate it between people who like your page, and people who haven’t liked you yet.  So new visitors can be directed towards a big like button, and given information relevant information and attention grabbing graphics to get them to click it.  Individuals who already like your page can be directed toward contests, promotions, or just about anything else you could think of to keep them engaged and interested in YOUR page.

Step 2:
Facebook applications – get your users involved.  Facebook applications can do any number of things, most notable are Facebook games.  Most notable about Facebook apps is that it can give you a way to interact with Facebook News Feeds and Notifications.  Integrate your blog with your Facebook page and get your name out there by showing up on the News Feeds of the people who use your app.

Step 3:
New uses for page tabs – page tabs can take you to custom pages (like the landing pages described above), and are located in the sidebar where your wall, info, links, etc. usually are.  Facebook tries to keep you ON Facebook though, which gives people an incentive to go back to checking out what their friends are doing (or other infinite ways to waste time on Facebook), instead of being interested in your content.  Well there are ways to direct people out of Facebook and to your site, using the page tabs.

Note:
At Pacer, we customize your experience.  Other programmers may use existing apps to build custom pages for you.  Their apps may be existing apps re-purposed to fit your needs.  The issue here is that these pages are often riddled with branding and advertisements for sites that are not yours.  The icons, logos, or links attributing to the source of the app have the potential to draw individuals away from your site.  At Pacer, we brand products with YOUR brand.


Linking your site to your social media – WordPress and Twitter

Posted on February 6th, 2012 by :

Simplify your life by integrating your WordPress blog with your twitter account.  Engage users on both platforms and save yourself some time.  At Pacer, we’ll add this feature to your custom WordPress site!


Check Out Our Latest Service Offering

Posted on February 3rd, 2012 by :

At Pacer, we’re always learning new tricks.  If you’re using a WordPress blog, we’ll link it directly to your Facebook so that when you post, it displays on your Facebook wall automatically, saving you time and effort.


Internet users are shifting toward mobile

Posted on February 2nd, 2012 by :

Anybody that reads this blog already know this, but internet usage is shifting more and more towards the mobile realm everyday.  If your business is not taking advantage of mobile websites, then you are undoubtedly losing money to a business that is.

Morgan Stanley analysts charted the most important online trends and have made their prediction for the future of the internet.  One of the more relevant predictions was the dramatic shift towards mobile web use.

Morgan Stanley’s analyst believe that the mobile web will be more widely used than the desktop internet by 2015.

What the heck is mobile web?
The mobile web represents any device you use to browse the internet other than your desktop computer or laptop.  Mobile devices have smaller screens and render web sites differently than other devices.  Obviously your smart phone is a mobile web device, but so is your Ipad, your Kindle and your Android tablet.

Studies show that when your website is optimized for viewing on these devices, visitors stay on your site longer and are more willing to make purchases.

What can Pacer do to help my business take advantage of the mobile web?
We can create a mobile version of your site that will be optimized for viewing on various mobile platforms.  We can consult with you to decide if it is time for your business to have an APP in the APP store.

Although your mobile web site will run off the same content as your current site, their are several things you can do to optimize your content for the mobile web.

Did you know that video accounts for 69% of mobile data traffic?  That seems like good motivation to get some video on your site, and Pacer can help you with that.

The shift towards mobile is still in its early stages, and you can still get in early enough to take advantage.  The trend is being driven by better devices and increased data coverage, and those 2 things are only going to continue.

Take advantage of this exciting opportunity today!

 


When should I use a CMS?

Posted on January 19th, 2012 by :

Imagine a small, informational website for a company called widgets inc. The website for widgets inc. is 5 pages. A standard site like this may have a Home page, an about page, a contact page, a directions page, and a products page.

Each page follows a similar layout. There is a header area with the logo and navigation, a content area in the middle of the page, and the footer with the navigation and some other relevant links. Building the site out without a CMS, you would have to create 5 separate HTML pages. When you wanted to make a change to the navigation, you would have to edit all 5 files.

Before I get much further, if you do not know anything about building a website, but want a way to change the content on your website, you need a CMS – even for a small site like this.

Now, you can create a webpage like this using PHP as well, cutting down some of the work here. For example, you could create a navigation.php file. You would still have 5 separate files for the content of each page, but you’d include the navigation.php file in each, so if you needed to change the title of the About page to About Us, you’d only have to edit the navigation.php file once, and the changes would appear on all pages of the site. Of course, in addition to the 5 page files, you’ve just created a 6th file for the navigation. This can still be cumbersome when there’s exceptions for different pages, or pages are designed to be very different from each other.

The need for a simpler way to manage the content of your site becomes apparent. A simple site that won’t require many changes doesn’t need a CMS, but say widgets inc. wanted to add a blog page to their site. This would require an update to the navigation in the header and footer on each page, then the creation of the blog page, then any time an article was added, they’d have to go in and edit the file to enter in their blog post. Not very good from a time standpoint, and not very easy for individuals who don’t know how to edit HTML files.

So the need for a CMS arises when you need to frequently update, change, add, or remove content from your website. There are many CMS’s out there, but all of them are designed to assist you with content control of your web site. Programmers started developing their own, some became free, like WordPress and Joomla, others you have to pay for, and you can even pay to have someone develop a completely custom CMS for your business.

Once you’ve determined that you will need to manage your website content frequently, which option should you take? Buy a CMS? Pay to have someone develop one for you? Go for a free CMS? Well, if you are a do-it-yourselfer, the free route is the way to go. If you are a do-it-yourselfer with money and have the time to be on the phone with customer support, buying a CMS is the right option. If you have money and a very specific idea of how you want to interact with your content, having someone develop a CMS for you might be the right idea. Another alternative is to pay to have someone help you with a free CMS.

Now of course, some of this depends on how much experience you have with the web. All of these options come with different price tags, different time tables, and a different level of commitment on your part (YES, you have to be willing to learn how to use the CMS and to manage your content – or pay someone to do it for you) based on the individual project.

We assist clients with choosing when they should use a CMS and which CMS will meet their needs. Contact us at Pacer Design Studios and we will set up a free consultation to help you decide whether or not you need a CMS – and if so which to use. Either way, you will end up with a beautifully built custom website, and a staff on hand to offer support when you need it.


New JimKrenn.com is live!

Posted on January 17th, 2012 by :

Pittsburgh Comedian/Entertainer Jim Krenn tapped Pittsburgh web design company, Pacer Design Studios to design and launch his new www.JimKrenn.com.

Voted 14 times as the Top Entertainer in the City by Pittsburgh Magazine, Jimmy is recognized throughout Western Pennsylvania as the host of Pittsburgh’s top-rated morning show on 102.5 WDVE-FM. He also makes frequent television appearances and does several Standing Room only concert performances yearly.

Pacer Design Studios provided Jim Krenn with a custom design that incorporates a blog for Jim to connect with his thousands of fans.  His throng of fans can also now leave comments on each story allowing them to speak directly to Jimmy.

Pacer coordinated a photo shoot with Jim, allowing them to get many great new shots of the local comic.  The behind the scenes video of that will be coming soon.

Jim is also in the process of having Pacer create a custom facebook fan page as well.  His official fan page can be viewed at http://www.facebook.com/jimkrennfanpage

Be sure to like Jim’s page, and to check back soon to see his new design.

To see more examples of web design by Pacer Design studios check out our portfolio


Adding thumbnails to your wordpress theme

Posted on January 17th, 2012 by :

A simple way to add post thumbnails to your wordpress theme.

I’ve been doing a lot of WordPress Development for our clients, and thought I’d share a quick and easy way to add post thumbnails or a featured image to your theme – and create a recent post box that utilizes it. What is also nice about this tutorial is that I will provide some code to set a default image if no thumbnail is set.

Recommended knowledge base for this tutorial: HTML/CSS, PHP, experience with wordpress and template creation. Basic image editing skills (resizing and cropping). I’ll break everything down as the post develops for those looking for a learning experience. For those who just want to grab the code and run – scroll down to the bottom of the post!

When you’re in the WordPress backend and creating or editing a new post, some themes include the “featured image” box on the side beneath the publish button, and some do not. If your theme does not have this box, we’ll need to add it first.

To begin, you’ll need to open up your WordPress theme’s functions.php file.

All you need to do here is insert the the following code:

add_theme_support( ‘post-thumbnails’ );

*Make sure that it is inside the PHP tags (<?php CODE ?>) of the file and is outside any other pre-entered functions (be careful of anything inside {braces} ).

If you’re editing the file through the backend under the Appearances, Editor tabs, be sure to save the changes. If you’re using FTP to update your files, save and upload the file to the server. Now when you go into your posts, you should see the Featured Image box appears if it didn’t before. However, if you add an image in at this point, it won’t display anywhere on your site.

 

Now, say you want to display the 3 most recent posts in your sidebar, and you want a thumbnail accompanying each post, in addition to the title, date, and a short excerpt. You may be currently using the Recent Posts widget from the default WordPress install, but you’ll find that it doesn’t support the thumbnails. Remove that widget, and open up your sidebar.php file.

Start with a WordPress query. We need to identify the posts we want to call. For this tutorial, we’re going to take 3 posts from any category, but you can change this to a single category, or change it to 5 posts instead of 3, or any number of other rules you want. For more information on changing the query to meet your needs, visit the wordpress codex.

I’m going to begin with some HTML code, then plug in the PHP and WordPress functions inside it. The first block of code shows the sidebar HTML setup and the query code:

<div id=”sidebar>

<div id=”custom-recent-posts-with-thumbnail”>

<?php

query_posts( ‘posts_per_page=3′ );

if ( have_posts() ) :

while ( have_posts() ) : the_post();

?>

<div class=”post”>

 

</div><!– CLOSE POST –>

<?php endwhile; ?>

<!– Add something inbetween here for when there are no posts to display –>

<?php endif; ?>

<?php wp_reset_query(); ?>

</div><!– CLOSE SIDEBAR –>

So that’s the basic setup. I set up a few divs to separate the content (you can apply CSS styles to it later), then added in the query to pull the most recent 3 posts, started the loop, and added in an area if your blog is new and there are no posts to display yet (leave it blank if you don’t want to show anything).

Now, we’ll add in the code to call up the post thumbnail, title, date, excerpt, and a read more button. You’ll see the permalink WordPress function appear a few times, and that is so if a user clicks on the thumbnail, title, or read more, it links directly to that post.

<div id=”sidebar>

<div id=”custom-recent-posts-with-thumbnail”>

<?php

query_posts( ‘posts_per_page=3′ );

if ( have_posts() ) :

while ( have_posts() ) : the_post();

?>

<div class=”post”>

<div class=”thumbnail”><a href=”<?php the_permalink(); ?>”><?php the_post_thumbnail( array(80,80) ); ?></div>

<div><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></div>

<div><?php the_time(get_option(‘date_format’)); ?></div>

<div><?php the_excerpt(); ?></div>

<a href=”<?php the_permalink(); ?>”>Read More &raquo;</a>

</div><!– CLOSE POST –>

<?php endwhile; ?>

<!– Add something inbetween here for when there are no posts to display –>

<?php endif; ?>

<?php wp_reset_query(); ?>

</div><!– CLOSE SIDEBAR –>

So now I’ve added in a few more classes so you can apply CSS to them later. You see the following WordPress functions: the_post_thumbnail(), the_title(), the_time(), and the_excerpt().

Some parameters appear inside the () of those – for the purpose of this tutorial, we’ll discuss the parameter added inside of the_post_thumbnail() only. The array(80,80) inside of the_post_thumbnail sets the maximum width and height *(in pixels) of your WordPress thumbnail.

I would recommend using a square image, but if you want a rectangular image you may have to play around with the settings. Always adjust both numbers to the largest side of the rectangle because putting array(150,100) doesn’t constrain the image to that size, but will instead make the image 100×100.

If both are set to 150, it will allow the length to be 150, but the height will automatically be left off (it won’t expand the image to fit 150,150). Obviously there are some issues with this, but you really should take time to edit and create a custom thumbnail that will follow any constraints you define beforehand. More information about other parameters and uses for the_post_thumbnail() can be found at the WordPress codex. For now, let’s stick with an 80×80 thumbnail.

The last thing we need to do is define a default thumbnail image to use if no featured image is set. I do this by creating a simple PHP if statement.

<div id=”sidebar>

<div id=”custom-recent-posts-with-thumbnail”>

<?php

query_posts( ‘posts_per_page=3′ );

if ( have_posts() ) :

while ( have_posts() ) : the_post();

?>

<div class=”post”>

<div class=”thumbnail”><a href=”<?php the_permalink(); ?>”><?php the_post_thumbnail( array(80,80) ); ?>

<?php

$thumbcheck = get_the_post_thumbnail();

if ($thumbcheck == “”) { ?>

<img src=”<?php bloginfo( ‘stylesheet_directory’ ); ?>/images/default-post-thumbnail.jpg” width=”80″ height=”80″/>

<?php } ?>

</div>

<div><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></div>

<div><?php the_time(get_option(‘date_format’)); ?></div>

<div><?php the_excerpt(); ?></div>

<a href=”<?php the_permalink(); ?>”>Read More &raquo;</a>

</div><!– CLOSE POST –>

<?php endwhile; ?>

<!– Add something inbetween here for when there are no posts to display –>

<?php endif; ?>

<?php wp_reset_query(); ?>

</div><!– CLOSE SIDEBAR –>

You’ll see that before the closing div of the thumbnail class, I add a few lines of PHP. I declare the “$thumbcheck” variable to search for the content of the thumbnail. If $thumbcheck is blank, then call up an image from a predefined location (the location I chose is the images file for the current theme).

Now, when you add an image to the featured post box, it will display in your sidebar. Take some time to style the divs we created appropriately to match your theme. We set out to create our own recent posts area that displays post thumbnails next to the title, date, excerpt, and a read more button. Enabling post thumbnails is fairly simple – just adding 1 line of code to your functions file. Another nice thing, is that if you want to call the post thumbnail elsewhere – you can add the_post_thumbnail() function anywhere in your template files to call the thumbnail for the desired post.

You can see working versions of these practices on this blog and on other custom built Pacer sites. Thanks and good luck!


W3C Verified CSSW3C Verified XHTML