Of the three, I’m regularly surprised at how little attention is paid to SEO, especially the basics.

Everyone knows that the http://www.businesswebspring.com/blog/?p=29 http://www.businesswebspring.com/blog/?p=29#comments Thu, 26 Mar 2009 15:16:14 +0000 admin http://www.businesswebspring.com/blog/?p=29 It’s no secret that lists are a popular blog post format. Long lists of resources, in particular, can be a very successful type of post in terms of driving traffic and raising awareness of your site. Just check out Smashing Magazine for numerous examples.

I recently went through the (fairly lengthy) process of gathering and organizing articles for a list post of my own about working with web design clients.

However, it was only after I published it that I really thought about the many benefits (beyond the obvious) to this type of post.

Let’s take a look at why long list posts make a good blog post format.

1. Good Linkbait (the obvious)
There’s no denying that list posts can be extremely popular. My own post on CSS Rounded Corners has been driving a steady stream of traffic to my site ever since it went up.

You only have to glance through social bookmarking sites like Digg or Delicious to see the prevalence of these types of posts and their popularity.

Within the various flavors of linkbait, long list posts fall into the ‘resource hook’ category.

2. Improves Your Research Skills
The most time-consuming element of writing posts that gather together a large collection of resources is the research piece. This typically goes beyond typing a few phrases into Google and looking through the top three pages of results.

If you want to be thorough you’re going to need to refer to a variety of search engines, social bookmarking sites, industry forums, and online magazines in your research.

By broadening your research methodology you’ll not only catch the best resources on the web, but also hopefully some less well known nuggets that will set your list post apart.

3. Forces You to Read Widely on a Subject
In order to create a long list post you have to read and understand the source material you intend to reference.

This process of self-education means that there is as much to be gained from the activity of writing a long list post as there is from the publishing of the actual post itself.

Researching a post that requires you to read widely gives you a reason to catch up on all that reading that you wouldn’t otherwise get around to.

If you ever want that post to be published, it also forces you to focus — to avoid going off at a tangent when you come across interesting, but non-related, articles (which you naturally save as source fodder for future posts).

4. Discover New Sources of Information
If you ever get tired of reading the same old web design sites, it’s always a refreshing change to discover a new source of quality content.

Researching a long list post makes this typically infrequent process of discovery happen more quickly and more often.

For me it was Graphic Define Magazine, which focuses on the business side of running an interactive design agency.

5. Good Reference Tool for Yourself
One of the reasons I write certain posts is so that I can refer to them in the future.

Not only do I use my blog as a way to create these ‘quality’ bookmarks, but the process of writing helps me to better understand and remember the information I’m referencing than if I just bookmarked those sites and resources in Delicious.

It works — I often find myself searching for an old post on my site in regards to something I am involved with for work.

On the other hand, although I still save things to Delicious on a regular basis, I find that new bookmarks tend to get swallowed up among all the others.

This has happened to such an extent that I rarely remember what I have bookmarked and frequently find myself starting searches on Google rather than in my Delicious account.

6. Promote Your Site to Others in Your Field
One outcome of writing a popular long list post is that you will send a lot of traffic to the sites you reference.

If the owners of these sites — your respected peers — are checking their traffic stats regularly, they’ll see the traffic coming from your site and will most likely check out what you’ve written about them.

They’ll notice you and, who knows, maybe you’ll gain a new RSS subscriber (and a link back — see #1, above).

7. Easy to Write
Posts that pull together large amounts of resources certainly take a lot of researching and organizing — which may take place over a period of weeks — but they’re pretty straight forward to write.

They certainly won’t be challenging your grammatical abilities. If you’re like me and write your blog in the evening, after a long day’s work, collecting and organizing resources is often a lot easier than actually writing something from scratch.

8. Easy to Read
Long list posts are popular partly because they’re easy to read. By their very nature the content is broken up into easily digestible chunks and these posts tend to be easy to scan.

9. Makes You Think About Your Audience
If you’re going to go to the time and effort to pull together a large list of resources on a topic, you’d better make sure that the topic is of interest to your audience.

Planning and writing these types of post forces you to focus on what subjects your audience might find interesting and useful.

Furthermore, it makes you think about what constitutes quality content for this audience within the subject area you’ve chosen.

10. Drive Discussion
Long list posts are easy for people to comment on. More often than not comments will be of the “great post, thanks” variety, but these types of post often encourage readers to add their own favorite resources.

If reader interaction is one of the goals of your blog, long list posts can be a great way to get readers more involved in the conversation.

11. Source of New Articles
In researching a long list post you will inevitably come across interesting but unrelated information and insights that make good source material for other posts.

In addition, after you’ve published your post you can still save other relevant resources as you come across them. Once you’ve gathered enough, you can publish an update to your post (maybe 6 months later) and hit a whole new group of readers.

This tag is also recognized by Yahoo! and Microsoft.

The canonical link tag tells the search engine what the preferred URL for a page should be. It goes in the and looks like this:

<link rel=”canonical” href=”http://mysite.com/page.html” />

This is extremely useful for sites that can have multiple versions of a page thanks to variables such as tracking parameters or session IDs. Another benefit is that PageRank is passed to the canonical URL.

To understand more about the implications of this new tag it’s worth reading through the comments to the post and in particular Google’s response to them.

This definitely sounds like something I should add to my 12 essential web site building blocks list.

And, regardless of the initial intentions of the designer for how everything within it should be arranged, things get moved around, stuff gets added, some things get taken away, more stuff gets added, the occasional renovation takes place, and yet more stuff gets added.

Many web sites are not really designed to be ‘lived in’ — i.e. to support all these changes by different owners with various intentions. After a while they bear little resemblance to any sort of coherent design and are likely to become increasingly hard to manage.

Of course, it’s impossible to plan for all the ‘home improvements’ that will happen to a web site between major redesigns.

However, it is possible to be prepared so that the addition of something new to a page doesn’t break its design.

A good way to future-proof a web site is to create styles in advance for the most common page elements, even if they are not yet being used. This is called ‘planning ahead’ and is an activity often overlooked by web designers.

Using the ‘planning ahead’ method, if a content author wants to add something to a page — say, a definition list — you’ve already planned how it will look so that it fits within the overall page design and will coexist with the other elements that may be present.

Let’s take a look at the more common page elements a future-proofed site should plan for.

Headings

Even though you may only be using H1s and H2s, it’s worth creating styles for H1 down to H4.

I’d question whether you need to go further than that (perhaps just make H4, H5 and H6 look the same). If a content author feels the need to use heading levels all the way down to H5 or H6 the structure of their content may be in question.

You might also want to create a style for a byline or a page summary as it’s not uncommon for these to be used below the main page heading.

Lists

Lists can be quite tricky from a layout perspective, especially when you take cross-browser display issues into account.

Therefore, it’s essential to plan for different implementations of lists in advance.

Of course, you’ll create styles for the standard ordered and unordered list. But, what about nested lists? I would at least plan for the following variations:

• Unordered list with a nested unordered list
• Unordered list with a nested ordered list
• Ordered list with a nested ordered list
• Ordered list with a nested unordered list

I wouldn’t worry about more than one level of nesting. If the content requires this, from a web readability standpoint it should more than likely be rewritten.

Definition lists are a great way to display lists of resources. You’ll often have a link to a resource (such as a PDF) and a summary sentence below it. Take the time to set this style up and you’ll stop users from littering your ‘resources’ pages with <br /> tags.

Web pages often start with a list of jump links to the various sections on the page. It’s worth considering a style for this type of link list, to visually separate it from the regular content on the page.

A list of links with thumbnails plus a summary is quite a popular approach for gallery pages, so you may want to create such a style in advance.

Tables

Tables can be very time-consuming to build and style. However, with a little forethought at least the styling part can be made easier.

Be sure to plan for types of data other than numerical that tables can contain — such as text and images.

Here are the common table elements that you should consider:

• Table headings along the top row
• Table headings along the top row and left column
• Table cell containing text (multiple paragraphs) / list / image
• Caption
• Footnotes

It’s also worth adding in advance any table-related functionality (often JavaScript-based) that you will likely be using. This can include:

• Displaying table row backgrounds in alternating colors
• Highlighting the row and/or column being moused over
• Sorting a table by a column

If you’re managing a corporate web site it’s a good idea to also think about financial data such as that in an annual report might be displayed.

Images

There aren’t too many variations on how images are placed within content, so they’re pretty easy to plan for. Try incorporating options for the following:

• Image floated to the left or right
• Image with a caption
• Image with a caption that contains a link
• Image that is a link
• Image that displays a larger version on being clicked
• Multi-image slideshow
• Image with a photography credit

Links

As well as the standard link states, consider whether links to external sites and to downloadable files should be treated differently (i.e. indicating the target of the link).

It may also be worth planning for how to style an A to Z index.

Forms

It’s impossible to plan for all the layout complexities that forms can require.

However, do plan for all the standard form elements — for example, that are present in a registration form — as well as how error messages will be presented.

JavaScript

I’m no JavaScript expert, but I do know that it’s often a good idea to choose a JavaScript library upfront rather than cherry pick individual scripts and hope they all work well together.

Doing this will help you to avoid functionality clashes and bloat that can come from using scripts from a variety of sources. I’ve used jQuery in the past, which is well established and has a good selection of plugins.

Pull Quotes

Pull quotes are a great way to call out important information or lines from quotations. I’d highly recommend creating styles for these common pull quote variants:

• Floated to the left and right
• Within a paragraph and at the start of a paragraph
• Without a citation
• With a citation

Other Things to Consider

If you’re not already using Flash, plan for how you will embed it into your site. Also, consider creating styles for displaying sidebar content such as boxes of related links or featured resources.

Don’t forget to create a print style sheet and maybe even a mobile style sheet (and remember to keep them updated).

How Does Everything Fit Together?

Lastly, it’s important to test the interaction of different combinations of page elements.

It’s simple enough to separate headings and paragraphs appropriately. But what about a heading followed by a table? Or, a heading preceded by a list? Or an H2 followed by an H3?

The same is true for other page elements — for example, lists followed by tables.

It’s worth taking the time to try out these different page layouts (including the more unlikely ones) to make sure that your spacing is set up correctly.

It’s much easier to do this in advance than to incrementally tweak your CSS as content gets moved around and added.

Float this image over to the right. What code do I use to do that again? What’s the HTML for a blockquote … and what about one with a name attached?

On this site I always find myself referring back to old blog posts to see how I coded a particular piece of content, which quickly gets pretty tiresome.

On large sites, it becomes even harder to track all the styles you are using to format different types of content.

This makes it difficult to make sure that you reuse existing styles rather than create new, potentially duplicate ones, and to monitor the effect of altering the styling for a particular content type on other content styling.

It’s not exactly practical to keep looking back through the style sheet once it gets to be hundreds of lines long.

This is why I created a content formatting quick reference guide, or markup guide, so that I can easily see what HTML I need to use to add certain types of content such as a centered image with a caption.

This quick reference also enables me to make CSS edits and easily see the impact on the formatting of my content without referring to multiple pages across my site.

And it enables me to see the impact of changing the formatting of one type of content on other content types.

For example, if I change the spacing following an unordered list, what impact does that have if it is followed by a heading rather than a paragraph? Do my tables play nicely with other content types? And so on.

I’ve personally found this to be quite helpful, if only because it removes the need for me to keep viewing source to see the markup for commonly used elements that I just can’t seem to remember the code for.

What are some tactics that other people use when it comes to this issue? Sticky notes?

Her home page has an overall bounce rate of around 30-35%. The bounce rate from Google is about 12%, and the average time on page is around a minute (there’s quite a lot of content) so clearly it is doing something right.

Sure, I could refresh the colors and move some content around. But is this a good use of my time and her money when the home page represents 20-25% of page views?

Yes, that’s a lot for a single page. However, when the other pages on her site represent over 75% of pageviews, it makes sense to spend most of my time on their maintenance and improvement rather than on the home page.

Unfortunately, this is not the case. It’s a small site, so almost all of those pages play an important in driving business.

However, I don’t remember when some of these other pages haven’t had their content updated. And, visually very little has been done from a design standpoint. This is why I tried to explain that her home page is actually far less important than she thinks.