Screen resolution.

No, I’m not talking about how Hi-Def your HDTV is. (Although I’m sure you’d be happy to tell me.)

Yes, I’m talking about your online audience’s display resolution. While the subject sounds much more stale than your HDTV, it just might help afford you an upgrade.

Don’t Design Outside of the Box

Many designers seem to design without giving any thought to the visible width and height of the end users’ display. Having dabbled in design myself, I have also been guilty as charged, many times over.

As technology advances, enabling screen resolutions to grow and costs to drop, the problem of designing sites too large to fit users’ screens seems to have lessened, but it is still a problem. As your users’ screens get larger, guess what? So does your designer’s, and probably at an even greater rate.

In fact, right now I am staring at a screen that takes up half of my desktop and has a resolution of 1920 x 1200. I’m pretty confident that mine is bigger than yours, and unfortunately there’s a decent chance my design will reflect that.

Of course if you are a true purist you will say that one should always design using a fluid layout, like Jakob Nielson points out. While I completely agree in theory, in practice, designers are too meticulous about their layouts to let them be stretched, squashed, poked and prodded at.

What Screen Resolution Should I Design For?

Note: The following statistics were taken from W3CSchools.

Display Resolution Statistics:

Yes, many more people are using high resolution monitors, but the majority of people are viewing web sites at 1024 x 768 resolution.

So, design for 1024 x 768, and remember the browser window takes up a lot of that real estate.

Personally I try to use 960 for the width. I attended a few Cameron Moll sessions last year at WDW Seattle, and his argument for using 960 was a good one. It’s divisible by 3, 4, 5, 6, 8, 10, 12, 15, and 16 which means your grid options are endless, and of course it fits within the most popular 1024 width.

That’s all fine and good, and isn’t too shocking, but what is unfortunate is how many designers ignore the arguably even more important height dimension.

If you need to keep content above the fold, I would use 525 as your line of demarcation. This is especially important for landing pages where the call-to-action needs to be ‘in your face.’

Yes, You Should Give a Damn About Screen Resolution

Look at this example.

Using 1024 x 768 for my display resolution, I performed a search on Google for ‘kids toys’ and clicked on this recognizable brand in the Sponsored Links. This is what I saw above the fold:

No, the giant in-your-face area is not clickable.

If you were to scroll down you’d see a couple of smaller call-to-action areas that are, but you’ve already lost me.

First of all, that whole area should be clickable, but minimally the primary call-to-action NEEDS to be above the fold. If the designer had tested this on the most common screen resolution, I think they would have made some different decisions.

In contrast I did a search for Luxury Cars and every one I checked out worked well on my screen:

I would change a few things on this landing page, but the point is the designer got all of the pertinent information above the fold.

I will concede that it’s much safer now to design web pages and landing pages bigger, but look at the statistics, decide where your target audience most likely falls, and then be sure to test your designs before launch.

Agendas. Outlines. Checklists.

Seems like we’re always putting together some sort of list to make our lives easier and help keep us on track.

Here’s yet another ‘list of useful lists’ to help you optimize and promote your blog. Enjoy….

(Read the full article…)

This is part three of a three-part follow-up series to my article Complete Blog Optimization Guidelines.

Part one, Optimize RSS and Atom Feeds for Wordpress, focused on Feed optimization. Part two, Optimize Your WordPress Blog as a Whole, focused on overall Blog optimization. This article focuses on WordPress platform-specific guidelines for optimizing Your Individual Blog Posts.

Note: These tips assume you are using WordPress as an installed application on your own dedicated or shared server, and not as a free hosted blog on wordpress.com. These tips do not take into account any WordPress upgrades in the recently released version 2.3.

1. Add Social Networking Links

Adding a few links to popular sites like StumbleUpon, Digg and del.icio.us makes it very easy for readers to share your posts with the rest of the world. Pick a few of your favorite sites, or sites that you think would be the most receptive to your content.

There is a plugin called Gregarious that can help automate this. I’ve heard good things about it, however we decided to go the custom route which involved a little hand coding.

If you want to follow suit, you will need to edit the single.php file for your current theme. This file resides here:

blog-root-directory/wp-content/themes/your-current-theme/single.php

It will depend on your theme, but you should see some code like:

<?php the_content(something in here); ?>

You’ll want to insert the code for your networking links after this so they show up at the bottom of your post. Again, it will depend on your theme and design as to exactly how you do this, but here is the linking code for StumbleUpon, Digg and del.icio.us:

StumbleUponhttp://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>

Digghttp://digg.com/submit?phase=2&url=<?php the_permalink() ?>&title=<?php the_title(); ?>

del.icio.ushttp://del.icio.us/post?url=<?php the_permalink() ?>&title=<?php the_title(); ?>

If you are displaying your full posts on your blog’s home page, category pages, or any other pages that display more than one post, then you will need to make the same additions to the index.php file found in the same directory as the single.php file.

blog-root-directory/wp-content/themes/your-current-theme/index.php

(Yes, you could write a php method to alleviate having duplicate code.)

2. Add an ‘Email This’ Link

Add a link that will allow your users to easily email your post to a friend.

We use FeedBurner to facilitate this. Because our feed goes through FeedBurner, we can just use the proper linking code and FeedBurner handles the rest. There are a couple of options when using FeedBurner for this functionality, but we manually inserted the code in the same location as the Social Networking example above. Here is the linking code:

Email Link Code for FeedBurnerhttp://www.feedburner.com/fb/a/emailFlare?itemTitle=<?php the_title();?>&uri=<?php the_permalink(); ?>

3. Add tags

Your WordPress blog has built-in categories, but categories should be used as an organizational tool specific to your blog. Tags allow you to attach universal meta data to your posts, and can be used by sites like Technorati, which will increase your blog’s visibility. A great plugin for this is the Ultimate Tag Warrior plugin.

This plugin works well in conjunction with the SEO Title Tag plugin. I talk about the SEO Title Tag plugin in my article Optimize Your WordPress Blog as a Whole.

Note: WordPress 2.3 has native support for tags, but my experimentation so far has shown that the new tag functionality is very limited. I recommend using the Ultimate Tag Warrior plugin even if you’re using WordPress 2.3.

4. Show Related Posts

Provide links to other posts on your blog that are related to the post the user is reading. This will make it very easy for them to find more information, and it will increase the chances they will pass your articles onto friends and colleagues.

A great plugin for this is the Related Posts plugin.

5. Consider Using Sticky Posts

A ’sticky’ post is one that always remains at the top of a page regardless of whether or not it is the most recent post. If you have a page that has ranked well because of a keyword rich post, you might want to consider making that post sticky so it remains at the top of the page. This could keep that page ranked well for a longer period of time. You also might want to utilize sticky posts if you have a particular article that represents a page very well.

The Adhesive plugin can create sticky posts. It doesn’t seem to be highly configurable, but you can make a post sticky for all pages, or just for Category pages.

That’s All Folks

There are other obvious optimization techniques for your blog posts like including targeted keywords in your titles and body copy, and using ‘alt’ attributes in your <img> tags, but this article has focused on WordPress specific solutions. Check out Complete Blog Optimization Guidelines and Increase Your Blog Traffic - 8 Important Steps for more general optimization techniques.

This article concludes my series on WordPress specific optimization techniques. I hope you’ve found this information as useful as I have while trying to optimize your WordPress blog.

This is part two of a three-part follow-up series to my article Complete Blog Optimization Guidelines.

Part one, Optimize RSS and Atom Feeds for Wordpress, focused on Feed optimization. This article focuses on WordPress platform-specific guidelines for optimizing Your Blog as a Whole. (Keep an eye out for part three which will focus on optimizing Individual Blog Posts.)

Note: These tips assume you are using WordPress as an installed application on your own dedicated or shared server, and not as a free hosted blog on wordpress.com. These tips do not take into account any WordPress upgrades in the recently released version 2.3.

1. Customize Page Titles””Utilize Targeted Keywords

This is arguably the most important change you can make to help improve your organic search rankings. Incorporate targeted keywords into your titles, even if this means the page title will be different from the actual post title.

There is a great plugin called the SEO Title Tag plugin for WordPress that will allow you to customize your titles. Download it, place it in your plugins directory (main-blog-directory/wp-content/plugins), and enable it in the Plugins area of Admin.

After you enable the plugin, you will need to add a little code to the header.php page of your theme. Don’t worry. It’s very simple. In the Admin area of your WordPress blog, go to Presentation >> Theme Editor and click the Header link on the right. In the editing window scroll down and find the <title>{code here}</title> element.

Replace everything between <title> and </title> with:

<?php if (function_exists('seo_title_tag')) { seo_title_tag(); } else { wp_title(); bloginfo('name');} ?>

This checks to see if the SEO Title Tag plugin is active. If so, it uses the custom title, if not, it will use the WordPress default.

To set the home page title go to Options >> SEO Title Tag.

To set other page titles, enter the custom title in the Title Tag text field which will now appear when you are writing a post or editing a page or post:

2. Use Keyword Rich URLs

By default, WordPress uses query strings in its URLs. For example, http://your-blog/?p=180. These URLs are not search friendly. You should change your Permalink structure to incorporate post date and name. In Admin go to Options >> Permalinks and click the radio button next to Date and name based.

This will now use your post title in the URL. It might look something like this:

http://your-blog/2007/11/14/optimize-your-blog/

This URL now contains keywords the search engines might pick up.

Many times you will want the URL to be different than the actual post title. For example, my post Blogs Gone Wild!: Optimization Strategies to Ensure Yours is ‘Of Age’ is a hook that will hopefully get people to click, but it’s not good for optimization purposes. So, rather than using the post title as the default page title and URL, I changed them both to Complete Blog Optimization Guidelines.

Post Title:

Page Title & URL

To make the URL different than your post title, enter your custom title in the Post Slug text field when you are writing or editing your post.

You don’t need to add the dashes. WordPress does that for you.

3. Add News Reader Subscribe Buttons

You should to make it very simple for users to subscribe to your feed. Sure, the autodiscovery chicklet is probably displayed in the URL window (unless you’re using IE 6.0…shame, shame), but many people have no idea what this is. So, make subscribing easy by adding a few popular feed reader buttons to your sidebar. Do not overdo it. Just pick a few.

The method for adding the code into your sidebar can vary depending on if you’re using widgets, and on what theme you are using. For this blog I simply went into Presentation >> Theme Editor, clicked on the Sidebar link on the right and added in the code.

Again, your solution might be different, but here are the images I used for this blog. Feel free to grab them. The linking code is also represented.

Yahoo
http://e.my.yahoo.com/config/cstore?.opt=content&amp.url=<?php bloginfo('rss2_url'); ?>

Google
http://www.google.com/ig/add?feedurl=<?php bloginfo('rss2_url'); ?>

netvibes
http://www.netvibes.com/subscribe.php?url=<?php bloginfo('rss2_url'); ?>

Bloglines
http://www.bloglines.com/sub/<?php bloginfo('rss2_url'); ?>

This code:

<?php bloginfo('rss2_url'); ?>

represents your blog’s RSS 2.0 feed. If you use FeedBurner (we use MyBrand from FeedBurner) you can replace that code with your FeedBurner URL.

For example:

http://www.bloglines.com/sub/http://feeds.closed-loop-marketing.com/ TheClmBlog

4. Add a Technorati Button

You definitely want your blog ‘faved’ on Technorati if you want it to be ‘findable’ in one of the largest blog search engines. Make it easy for your readers to ‘fave’ your blog by putting a Technorati Button in your sidebar. The CLM blog has the Technorati button just under the feed reader buttons.

Here is a Technorati button and link code:

Technorati Button
http://technorati.com/faves?sub=addfavbtn&add={your blog address}

Note: {your blog address} is the full URL of your blog’s home page, NOT the feed URL.

5. Offer Email-based Subscriptions

Many, if not most, people are unaware or not comfortable with the concept of feeds. Depending upon your specific audience, you might want to consider offering your content via email subscriptions. This allows users to receive your content via email rather than having to use a feed reader.

FeedBurner offers a free email subscription service.

6. List Most Recent Blog Posts

Make is easy for your readers to scan your latest posts’ titles. Show 3 - 5 titles. Download and install the Recent Posts plugin.

7. Add a Google Sitemap

Make your blog readily visible to Google. Download and install the Google Sitemaps Generator plugin.

8. Ping Blog Search Engines Each Time You Post

Wordpress makes this very easy. In Admin go to Options >> Writing and add the sites you want to ping into the Update Services form field. Make sure WordPress has auto-populated this field with http://rpc.pingomatic.com/. Also consider adding these other services.

Following these tips to Optimize Your WordPress Blog as a Whole will help increase your blog’s visibility and will make it easier for your users to find what they are looking for. My next post will be part 3 on WordPress optimization for Individual Blog Posts.

I recently posted an article on Complete Blog Optimization Guidelines that covered optimizing three key areas of your blog: Feeds, Your Blog as a Whole, and Individual Blog Posts.

This is part one of a three-part follow-up series to those guidelines that provides WordPress platform-specific solutions for optimizing your RSS and Atom feeds.

Note: These tips assume you are using WordPress as an installed application on your own dedicated or shared server, and not as a free hosted blog on wordpress.com. These tips do not take into account any WordPress upgrades in the recently released version 2.3.

1. Enable Full Text in Your Feed

There are a variety of arguments in favor of full text feeds, as opposed to partial text feeds. I tend to agree with the full text arguments, and the click-through rate is pretty much equal for both. To enable full text in your feeds go to your WordPress Admin, and then to Options >> Reading and click the Full text radio button (see graphic below). Note that if you use the ‘more’ feature in your posts, your feeds will still be cut off even after choosing the Full text option. To fix this, install the Full Text Feed plugin.

2. Show the Most Recent 20 Posts in your Feed

Including the most recent 20 posts in your feed means more content for new subscribers and more chances your posts will be passed around. Under Options>>Reading change the default to 20 in the Show the most recent posts text field.

3. Add Categories at the Feed Level

Categories are automatically included for each post in your feed, but you can also add feed level categories which act as meta information for your entire blog. You need to manually edit your feed file to accomplish this. Don’t worry, it’s not hard.

Find the wp-includes folder in the root directory of your blog’s file structure. For example, this blog’s wp-includes folder is located at: http://www.closed-loop-marketing.com/blog/wp-includes. You will find the .php files you need to edit in this folder.

For RSS 2 (WordPress default):

Open the feed-rss2.php file for editing. You can insert multiple categories. Each category uses a start and end tag. For example:

<category>Giant Spiders</category>

<category>Arachnid Diaries</category>

These categories just need to be placed after the opening <channel> element but before the opening <item> element. If in doubt, place them just after the feed <title> element like this:

<channel>

<title>The CLM Blog</title>

<category>Category 1</category>

<category>Category 2</category>

For Atom:

Open the feed-atom.php file for editing. The Atom category syntax is different from RSS 2. Example:

<category term="Squid Food" />

<category term="Shrimp" />

For Atom, these categories need to be placed after the opening <feed> element but before the opening <entry> element. Again, a good place is directly after the feed <title> element. So an example might be:

<feed xmlns=http://www.w3.org/2005/atom …[various other cryptic writings]…>


<title type="text">The CLM Blog</title>

<category term="Category 1" />

<category term="Category 2" />

Both RSS 2 and Atom feed-level categories allow for extra attributes or elements within the <category> element. Read more about feed categories in the RSS 2 spec and the Atom spec.

4. Add an Image or Logo to your Feed

Adding an image to your feed will help it stand out from the crowd. Not many feed readers support it yet, but it’s simple to implement for those that do. You will need to edit the same feed file that you added categories to in the previous section.

For RSS 2:

Open the feed-rss2.php file for editing. The image you will be adding should have a maximum width of 144 pixels and a maximum height of 400 pixels. Insert the code after the opening <channel> element.

<channel>

<image>

<url>path-to-your-image.gif</url>

<title>The CLM Blog</title>

<link>http://www.closed-loop-marketing.com/blog/</link>

<width>88</width>

<height>31</height>

<description> Expert commentary and advice on SEM, SEO, usability, conversion enhancement, and the web.</description>

</image>

For Atom:

Open the feed-atom.php file for editing. Atom doesn’t specify height or width values, but make sure the image is sized reasonably to display in feed readers that allow images. Insert the code after the opening <feed> element.

<feed>


<logo>path-to-your-image.gif</logo>

That’s all there is to it. You can subscribe to your blog using Bloglines to see the image in action.

5. Enable Autodiscovery:

Enabling autodiscovery makes it that much easier for people to subscribe to your feed. This is enabled by default in WordPress for your main blog. However, if you’d like to enable autodiscovery of your blog on a different site, like your company’s main corporate site, then here is what to do:

Pick the page(s) you want your blog to be discovered on and open it for editing. Anywhere in between the <head></head> elements, insert the following <link> element code (you can specify a different title attribute if wanted):

For RSS 2:

<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://closed-loop-marketing.com/blog/feed/" />


For Atom:

<link rel="alternate" type="application/atom+xml" title="Atom" href="http://closed-loop-marketing.com/blog/feed/atom/" />

Note: Replace http://closed-loop-marketing.com/blog/ with your blog’s root directory. For example, http://closed-loop-marketing.com/blog/feed/ becomes http://the-path-to-your-blog-root-directory/feed/.

The code above assumes that you are using custom permalinks that are name based. If you are still using the default permalinks with query strings like ?p=140, then either switch to name based permalinks under Options >> Permalinks (recommended), or use the following code instead:

For RSS 2:

<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://closed-loop-marketing.com/blog/?feed=rss2" />


For Atom:

<link rel="alternate" type="application/atom+xml" title="Atom" href="http://closed-loop-marketing.com/blog/?feed=atom" />

Following these RSS and Atom feed optimization tips will increase your blog’s visibility and can help your feed stand out from the pack. I’ll be following up with parts 2 and 3 on WordPress optimization for Your Blog as a Whole and for Individual Blog Posts soon, so keep an eye out!