Blog Design for ROI Rule #5: Engage Readers On Archive Pages—Fast!

This guest post is by Gab Goldenberg, author of The Advanced SEO Book.

The purpose of a blog archive page, such as a category page or even the blog homepage, is to maximize the average number of blog posts read by any visitor. The more visitors read on each visit, the likelier they are to become loyal readers and stay loyal.

To maximize the amount of our archive that visitors read, we need to know what content will best engage them and how best to display that content.

That’s what we’re going to cover in today’s post, the latest in our series on blog design for ROI.

First, let’s look at the assumptions inherent in the classic debate about how to display posts on an archive page.

Full posts or excerpts?

This question assumes certain things, and it’s important to point them out.

Assumption 1. You can have one, but not the other

First, the question assumes that we can use either full posts or excerpts, but not both.

This is the case in traditional archive page layouts (typically single-column layouts), where every post is shown the same way, i.e. full posts or excerpts.

That doesn’t have to be the case, though.

Eurogamer offers a great example of a twin-column layout. Here’s what their 3DS archive page looks like:

Eurogamer layout

One easy-ish way of showing both full posts and excerpts is to imitate Eurogamer’s twin-column layout. You then program one column to offer full posts and the other to just show excerpts.

(From a technical perspective, I realize that two columns could be styled by the same CSS, as with Thesis theme. What I mean by two columns is that the layout uses separate code blocks that will be styled differently and given different functionality.)

Assumption 2. All visitors want the same thing

Another assumption of the “full posts or excerpts” debate is that all visitors to an archive page want the same thing.

I can tell you from my own experience that this isn’t the case.

When I was starting in SEO, I spent untold hours and visits poring through’s blog archives, looking for useful tricks and ideas. I obviously didn’t go back to read the same thing every time—I kept digging around the archives for different material.

Similarly, other bloggers may be searching for the link to a post they liked so that they can link to you. Make this easy for them!

What content should you feature on a blog archive?

First, make a strong first impression on new visitors by displaying your top hits.

If your site is new, you can call them Editor’s Recommended Reads or use language like, “New to {BlogName}? Start here.”

This is an increasingly popular practice because of its utility to new visitors. As we saw above, Eurogamer lists recently popular posts on their archives page.

37Signals’ blog Signal vs Noise also feature popular posts in a category, but theirs come from across the entire timespan of their archive:


The flip side is that you can’t just show your hits in the archives, because some people may be there to find other content, as I explained above.

In addition to popular content, also show your recent posts, but make navigating the archives fast and easy.

Help returning visitors get the most out of your archive with these tips:

  • Give visitors control over how many posts are shown on your archive pages, and if possible, save their preference for next time. Don’t limit people who are navigating deep into your archives to viewing ten posts at a time.
  • Offer paginated navigation (i.e. numbered links like “1, 2, 3, 4…”) to your deeper archive pages even at the top of your Recent posts column for returning visitors.
  • Use AJAX to load posts or further archive pages in the same category (e.g. links to pages “1, 2, 3, 4…” ). This will speed archives’ load times.

(For those who don’t know, AJAX is a programming technology that lets you load additional content on the page you’re viewing, without requiring a new page load. AJAX stands for Asynchronous Javascript And XML. Regarding SEO, since Googlebot is only learning to read Javascript, you’ll want the code for those with Javascript disabled to be a regular link to the URL of the post or archive page.)

Now that we’ve covered what content to show on an archive page, let’s go back to our discussion about full posts and excerpts to understand why the archives are a great place to use AJAX.

Which display style gets more content read: excerpts or full posts?

Pros and cons of post excerpts

The primary advantage of displaying post excerpts over full posts is that you can make more posts visible at once. If the first or second post isn’t enticing, you might still get a click on the fourth or fifth post, without forcing the visitor to scroll.

At the same time, post excerpts clarify the post’s subject. This compensates for vague or ambiguous titles, which will draw fewer clicks if displayed without the excerpt, or clicks from visitors who misunderstood the title and click the Back button. Potential readers can make more informed choices whether or not to read the post, thanks to intro text.

The disadvantage with post excerpts is that they require extra page loads, slowing visitors actions down and making them leave your blog faster.

Pros and cons of full posts

Full posts help visitors avoid extra page loads. If we use full posts, and visitors like the first thing they see, then we’ve got an advantage over post excerpts, since the visitor saves a page load.

If visitors aren’t interested in reading the above-the-fold-content, though, they need to scroll. And the more they need to scroll (e.g. due to long posts, obscure titles, a lack of clear beginning- and end-points for posts, etc.), the likelier they are to lose interest and leave.

The longer it takes a user to read something interesting (not only to find it), the more likely they are to leave. We need to help them find something fast and load it fast.

The solution

Use long excerpts for popular content and short excerpts for recent content.

Full posts

Let’s assume that we know from traffic stats which posts are the most popular posts. This means there’s low risk of a visitor not being immediately engaged by these hit posts, so there’s a good argument for using full posts. Scrolling isn’t likely to be a problem, since the first or second post has a good chance of engaging them.

However, we haven’t eradicated the risk that someone won’t want to read the first one or two posts. This is especially so for returning visitors who may have liked our top hits last time and are now back for more.

Therefore, it’s best to use longer-than-normal excerpts for top hits. The excerpt aspect limits scrolling for people who don’t want to read the first posts, while leaving less to load via AJAX for those who do chose to read them. Full posts are not ideal but they’re still okay, especially for short posts.

Post excerpts

In contrast to popular posts, there’s relatively higher risk in displaying the full text of recent posts. Sometimes, recent posts include great material, but sometimes, it’s ordinary material.

So your display of recent posts should definitely be limited to excerpts that are shorter than your top content.

Once someone clicks on a post…

Once someone indicates they want to read a given post, we need to serve them the post as fast as possible. That’s why using AJAX to load post content is great, because we can just load the body of the post, without wasting time by reloading everything else (the header, sidebar, footer etc).

Facebook makes use of AJAX for these reasons, when you get to the end of the content that was initially loaded. This is what some people call the “scroll forever” presentation.

Scroll forever on Facebook

Boost ROI by engaging readers in your archives

Your blog will receive returning visitors and new visitors, and your archive page layouts need to accommodate both. Here’s how to help with that.

  1. Use two content columns on your archive pages, one for popular posts (or editor’s picks if your site is new) and one for recent content.
  2. Use longer excerpts for the popular content and shorter excerpts for the recent material.
  3. Make the archives’ navigation fast and easy, by:
    • loading posts and “next” archive pages (i.e. pages linked to as ‘1, 2, 3, 4’) with AJAX
    • offering navigation deeper into the archive right at the top of your archive pages
    • giving visitors control over how many posts they see on archive pages.

As a post-script, I’d encourage you to show authors’ pictures on archive pages, as well as on individual posts. If a reader enjoys works by a particular author, seeing their picture will increase the likelihood of them clicking through from the archive page (or stick around and read if they’re coming right to the individual post).

If you liked this post, check out the others in the series: Rule #1: Prioritize The Opt-In Form, Rule #2: Highlight Your Key Content, Rule #3: Show Your Community Love, and Rule #4: Make Posts Easy to Read.

Gab Goldenberg wrote The Advanced SEO Book—and you can get a free chapter here. Gab and Internet Marketing Ninjas, the folks behind the Blog Design for ROI series here on Problogger, are offering to mail you a free print copy of the Blog Design for ROI guide as a small book. Get your free copy from .

Lookin’ Good! A Brief Intro to Inline CSS for Bloggers

This guest post is by Andrew Couch of

As a website owner it can be really handy to know a bit of web coding. The HTML editor in most blogging platforms gives you enough power to do a lot of cool things without any risk of screwing up your site.

Adding inline styles to elements is one of the easiest.

What are inline CSS styles?

CSS is the style language of the web. It describes to the browser how web pages should look to the last detail. These styles can be packed together in a style sheet and attached to a site as a whole. Or they can be added to individual elements to affect only that element, not the entire site.

This second way of applying CSS styles is called inline styling. These pieces of CSS are inline styles.

Why can they be the blogger’s best friend?

1. They’re easy to use

You can add an inline style in the HTML editor of your platform. Just a few pieces of code can go a long way. And all without hacking into your theme.

The most common element to style is the paragraph. An inline paragraph style would affect all of the text in the styled paragraph. In WordPress HTML editor you need to add the tags <p …> </p>.

Type this into your HTML editor:
&lt;p style="border:1px solid red;padding:5px;"&gt; This is the text that I want to affect. &lt;/p&gt;

This is how it’ll look in the visual editor, and the post itself:

This is the text that I want to affect.

P is the name of the element. It stands for paragraph.

Style is the name of the element that lets you define an inline style.

So border:1px solid red;padding:5px; is the style in the example. It adds a red border around the paragraph and a bit of spacing to keep the border from running into the text. Pretty easy!

2. They’re safe

Since you are working only in one post instead of the theme itself, there is no chance you could screw up your entire site. This is often a worry of novice coders—that one mistake could take down their site. Inline styles can give you a safe place to play with your creations.

Using inline styles could at most affect the one post you are working on. However if you use your blog’s Preview feature to look at the post before it gets published, you can reduce even that risk.

Styles only affect how specific elements look, not how the site functions. At most, mistakes mean the effect you are going for won’t be seen; they don’t result in a loss of functionality.

3. They are powerful

Many effects can be created on a specific element using inline styles. They do not need to remain as bland as changing the color, or be as functional as spacing out paragraphs.

How about a box set aside as a tip?

This tip callout floats next to your text and lets you push something out of the flow of the text to highlight it. It looks impressive, but is just a slightly more complex inline style.

&lt;p style="padding: 10px; border: 1px solid #cccccc; background-color: #f9f595; width: 210px; float: right; margin: 0 0 5px 5px;"&gt; How about a box set aside as a tip. &lt;/p&gt;

Why aren’t inline styles used more?

Themes for blogs and custom-built websites include a set of CSS rules that are attached to the site as a whole. This style sheet dictates how the site looks. This means you don’t need to use inline styles to achieve effects that fit within the overall theme style.

At a technical level, these overall styles are more efficient than using inline styles on every element. This just means that you would never use them to build an entire site. But inline styles are still very powerful and often overlooked as a way to impact certain elements in a single post.

Give inline styles a try

Basic knowledge of CSS can help you make small changes to the appearance of an individual post. It’s a simple way to make important parts of a post stand out, it can make your post look more professional, and it can break up the monotony.

Best of all, learning a few basics of CSS isn’t too complicated.

If you are intrigued about what CSS can do for you, check out the extensive list of examples at w3schools and their entire CSS section. These move beyond inline styles and into stylesheets, but can give you an idea of what’s possible for your blog.

Andrew Couch is a career web developer and author of a tech e-book for non-techs called Web Foundations for the Non-Geek. He also runs a travel blog at Ctrl-Alt-Travel with his wife.

3 Ways Cartoons Can Improve Your Blog

This guest post is by Mark Anderson of

Mark Anderson is the cartoonist behind where he offers cartoon subscriptions and creates custom cartoons.

Blog Design for ROI Rule #4: Make Posts Easy to Read

This guest post is by Gab Goldenberg of The Advanced SEO Book.

In the last instalment of the Blog Design for ROI series, I discussed the importance of showering attention on your community using design elements.

The fourth commandment of blog design for ROI is to make your posts easy to read. This ensures that your message gets across even to first-time skimmers, which helps turn them into loyal readers (and post-sharers).

There are several elements that impact on the ease with which a post is read. The primary elements we’ll cover here are:

Each individual blog post should have clear start and end points

The web 2.0 design trend contributed positively to web design practices in this regard, as it led many people to show rounded-corner graphics at the tops and bottoms of blog posts.

In itself, the roundness or squareness of the corners doesn’t matter. It’s the presence of the corner graphics that matters, because they indicate the beginning and end of the post.

You can see bottom-corner graphics in this old design of’s blog:

rounded corners

In contrast to the above, it’s hard to distinguish where posts in WordPress’s Toolbox theme start and end, for lack of such graphic hints. Toolbox Theme, pictured below, uses large-font blue text links to show that a new post is starting.

no end to the post

If you didn’t know the site was a blog, though, you wouldn’t necessarily know that the links were the start of new posts, as I discovered in usability testing. Also, the blog’s name is only a little larger than the post titles. Using corner graphics clearly makes it easier to know when a post starts and ends.

That being said, the date, post categories and tags do help to distinguish the start and ends of posts. (And kudos to this theme’s designers for avoiding the calendar date icons, which are just distracting graphics.)

I’m not saying Toolbox is bad, it’s just that there’s an important improvement possible here. The flip-side is that the Toolbox theme gets some advantages from this light use of graphics, like fast loading times.

Line length and font size

Just as some forms of print are easier to read, so too it’s easier to read some particular text layouts online. For blogs, this means somewhere between 12-16 words per line, with about 12-point type.

Obviously this will vary a bit if you choose to accomodate older readers who typically prefer larger type (13 point of 14-point font sizes), but this rule is a good starting point.

Look at the legibility of my SEO blog‘s design in terms of the number of words per line, in the next image. There are a lot of words—20-22 words in each line!

line length on my blog

In contrast, you’ll find that Problogger has 12-15 words per line.

line length on problogger

These shorter lines are a lot more manageable and mentally rewarding, as readers feel that they are making progress more quickly.

It’s similar when kids choose a book with a large font and wide margins for their book report, so they can have done their homework (reading the book) in less time.

Besides your default post width and font size, which will determine post design, certain graphic elements also help readers speed through posts—and enjoy and understand them more…

Post-embedded sidebars, blockquotes, pull quotes, and image captions

Our blog posts need to be visually appealing not for the sake of art, but to help break up large sections of text into more manageable, bite-size pieces.

Pull quotes and blockquotes

Pull quotes and blockquotes, as well as post-embedded sidebars, help shorten some of the lines in your posts. This helps the reader feel like they’ll get through the post quickly.

Pull quotes are those quotes that appear on the side of a main block of text, and highlight an important quotation. (This also makes them a text tidbit, which I’ll discuss more below.)pull quote

In this, pull quotes are different from blockquotes, because blockquotes are typically complete paragraphs that are part of the main column of text. Smashing Magazine does a good job explaining the details of different quote types.

Blockquotes shorten a line by being indented, as you can see with the yellow line to the left of the content below.

Block quote indents

Post-embedded sidebars

Here’s what a post-embedded sidebar looks like (see the right-hand side of this picture), for those who haven’t yet seen one.


Do you see how the sidebar makes the main body of text narrower? This lets people to get through each line faster. It’s important also that the sidebar has a distinct appearance thanks to its grey background color. (You could use a border instead.)

Note: A post-embedded sidebar is different from the blog’s main sidebar.

The post-embedded sidebar offers information related to a specific post, such as biographical information on a person being interviewed, or background context on a story. The main sidebar is unrelated to a specific post and offers general information and navigation for the site overall.

Text tidbits: subheaders, bullets and image captions

I call these elements “text tidbits,” as they’re the little bits that get read most—they’re read by regular readers but also by skimmers who may skip other content, so that these tidbits are worth spending time on.

Since image captions are very highly read text tidbits, it’s important that blog themes include a caption element—even the basic grey background that is the default in WordPress.

In my personal experience, custom theme designs often forget to include a caption element. Words typed into the caption area of WordPress’ image uploader appear out of place, if they appear at all. This means visitors read fewer words, lowering the chances that they will become loyal readers.

Tables of contents

If you’re writing a long post with many sections, readers will find it useful to preview what the sections are. This way they can pick and choose what interests them.

Wikipedia of course, is the master of this technique:

Table of contents

The question of whether to follow Wikipedia’s approach of placing the table of contents as its own unique paragraph in the main body of text (as opposed to having the text wrap around it), is debatable.

On the one hand, this placement achieves the introduction’s goal, telling us what is to come. And this placement’s visual weight promotes use of the table of contents. On the other hand, a table of contents around which the main text wraps may prove less obtrusive while still communicating its point.

The answer to this question depends in part on the rest of your design, and so informal usability testing is the best way to choose which alignment option to choose.

Author profile information

It’s debatable where post authors should get credit for the post, but this matters both for new blogs and for blogs looking to encourage guest posting. On the one hand, leaving the bio to the end of the post rewards authors less—not every reader will read to the end. But placing too much content at the start of a post can be annoying for readers.

I’m in favour of a balanced approach: reward authors by showing the author’s photo and a one- or two- sentence bio with links at the start of a post. Then place a more expansive bio at the end for people who really must find out more.

The Fanciest Author Box plugin is an elegant way to create the more expansive bio:

Author bio

The balanced approach benefits both the post author and the blog owner. When visitors see a respected, familiar face at the start of a post, they’re more likely to stay and read. And as I mentioned before, the use of images (regardless of what exactly they are) lightens a post and makes it more readable.

Blog post design pointers

When choosing graphic design options for your post, always aim to facilitate a quick read that will fully express your message. The more they absorb your message, the better for you and your blog’s ROI.

  1. Ensure people know where one post ends and the next starts, so that readers scanning homepages and archive pages can easily choose a post to read.
  2. Keep the line length down to 12-15 words to help visitors read more. Occasionally, make lines even shorter with some attractive pull quotes, sidebars, and blockquotes, as this helps move readers through your post.
  3. When writing long posts, offer a content preview in the form of a table of contents. That way people know if they’ll read something of interest from the very beginning.
  4. Post author credits are an important reward for encouraging guest posts, so share some love at the start—but save the whole personal bio for the end.

How does your blog post design stack up against these guidelines? Share your thoughts in the comments.

Gab Goldenberg wrote The Advanced SEO Book – and you can get a free chapter here. Gab and Internet Marketing Ninjas, the folks behind the Blog Design for ROI series here on Problogger, are offering to mail you a free print copy of the Blog Design for ROI guide as a small book. Get your free copy from

Blog Design for ROI Rule #3: Shower Attention and Appreciation On Your Community

This guest post is by Gab Goldenberg, author of The Advanced SEO Book.

This is part 3 of Problogger’s Blog Design for ROI series. Today we’ll talk about integrating your community into your design. Since a blog is a form of social media, even if—or especially if—it’s a business blog, it only makes sense to design the blog in a way that will maximize interaction.

Let’s address the importance of interaction, though, before we delve into the details of design.

The skeptics amongst you may ask, “What are the benefits?” Heck, giving attention to others may attract trolls and other negative behaviour!

One of the great benefits is that an engaged community promotes your blog, providing word of mouth marketing. This includes social bookmarking and sharing, as well as regular links from your community members’ own sites. So you increase your social and SEO traffic. Plus building community is more enjoyable than manually requesting links and attention…

I could go on, but check out Richard’s post on techniques to measure online communities’ ROI in dollars, or my own on the intangible ROI of social media such as better hiring, partnerships, and more.

How do you show that you care about your community?

There are a number of ways to visually reinforce the importance of community on your blog, and they center around giving your community visual prominence and rewarding (“gamifying”) their behaviour.

Credit for the contribution: avatars

One easy way to do this is to use avatars—thumbnail pictures of your members that appear alongside their contributions.

If you accept guest posts, why make your guest authors anonymous? Instead, show their profile picture at the top of the posts they publish on your blog. (We’ll discuss this more in the next article in this series, on post design.) My friends at SEOmoz were some of the first people to do this:

Daily seo

Of course, this idea isn’t limited to post authors—most people comment and they are in fact the bulk of your community, so you should offer avatars to your commenters, as well.

Here’s what you want your blog comments area to look like:


What do you do for people who haven’t provided an avatar?

I’d suggest something generic that reflects your brand, perhaps with the text, “User hasn’t yet uploaded a profile picture.” The idea is that users will realize what they need to do to get the avatar to appear. (Note: avoid using the word “avatar” since not everyone knows what it means. “Profile picture” is clearer.)


SEOmoz gets this partly right by using their logo’s starshape icon, but they omit to specify why that’s appearing instead of human picture like other people’s. It’s a missed opportunity.

It is nonetheless a step up from the generic-and-distracting images provided by certain blog commenting/avatar systems.

Distracting avatar

Why limit yourself to just showing a person’s photo and name, though?

Awards, badges, and recognition

Since you want to encourage high quality participation, as well as helping people understand why they should visit a particular member’s profile page instead of clicking elsewhere, give your members titles (or “badges”) and display these alongside members’ profiles.

When I was in high school and really into hiphop, I used to frequent a forum, NobodySmiling, that did a good job of this, placing badges (in the shape of various trophies) for various achievements alongside members’ posts. In the screenshot below, you can see an excellent example of a site that recognizes user contributions.

The moderator MetiphOracle has his title, Moderator, displayed as well as multiple stars indicating his veteran-contributor status. Additionally, his post count, win-loss record (in hiphop battles), “Vicious rating” (how frequently other members clicked his Praise or Smite links, a pre-Facebook Like function), and two microphone awards are shown.


It’s also worth highlighting that most of the awards were accessible on the basis of merit—win ten rap battles and you got a bronze mic, for example. This is important, because if the awards are only hierarchical—that is, only one person can hold an award—then it can reduce motivation for newer members.

The site admins realized that this was a very popular feature and quickly added other awards for a variety of achievements.

Awards list

That being said, being #1 (or in the top five or ten) is also very motivating to senior members—especially so if you make the achievement of that status a contest. That was the idea behind the belts, like the Vet Tourney award in the screenshot above.

You can take the idea even further though, and reward the best collaboration.

The crown award in the screenshot above went to the best crew—the group of rappers who beat other top crews in rap battles.

As someone who competed for (and won!) the crown, I can tell you that my friends and I spent hours talking on instant messenger about how we were going to do it. So the result of this kind of gamification of your community is that its members are no longer dependent on their interaction with you—they’re brought back to your blog repeatedly to interact amongst themselves, and the friendships they build.

You don’t specifically need different images for your reward badges though.

An easy way to start is to have some kind of general-purpose image on which you can overlay people’s titles. Below, SEOmoz have a gold-colour ribbon that appears below members’ answers in SEOmoz’s Q&A forum.

Displaying titles

A simple way to do this without a lot of up-front coding work—and to see if you have enough traction in your blog’s readership to warrant the coding work—is to begin with a monthly community contest.

Offer prizes for different forms of interaction—the most comments, the best comment, the best comment by someone who never won before, and so on. Then, you can have a monthly announcement for the winners, and a page where you list current and past winners.

Help and encourage members to interact between themselves

Another thing I recall being rather practical and popular on NobodySmiling—and which is now found everywhere from Skype and MSN messenger to Facebook (though not yet Twitter)—is the list of members online. Essentially, this is an invitation to members to chat or private message with each other.

Who's online

Where does the “members online now” block belong?

I’d venture to say that it’s becoming conventional to list a similar block—the Facebook Page Likers list—in the sidebar, so it’s probably a good idea to place this here. Using conventions on your blog requires less effort from your visitors.

Social seomoz

A further way to help encourage the contact via your blog’s design is to make member contact information readily accessible. You can see this done on SEOmoz member profiles:

Member profiles

Another tool that’s not pictured there is a button that lets members send each other private messages within SEOmoz, similar to the way forum software handles membership interaction.

An even better way to display this is to make the person’s contact information available at the end of all their posts and comments. You can see in the screenshot from NobodySmiling that MetiphOracle’s accounts—MSN and others—were all linked below his posts.

Accounts shown
The following excerpt from an Inc. magazine article discusses how popular review site Yelp made a point of inviting its top members to exclusive parties.

This achieved a few things: it rewarded high levels of participation, provided recognition, and helped the members meet each other and interact.

“Without the cash for a national rollout, [Yelp co-founder Jeremy] Stoppelman decided to focus on making Yelp famous locally. With the help of a buzz-marketing guru he hired on a whim, Stoppelman decided to select a few dozen people—the most active reviewers on the site—and throw them an open-bar party. As a joke, he called the group the Yelp Elite Squad.

“[Yelp investor Max] Levchin thought the idea was crazy—”I was like, ‘Holy cr*p: We’re nowhere near profitability; this is ridiculous,'” he says—but 100 people showed up, and traffic to the site began to crawl up. Because the parties were reserved for prolific reviewers, they gave casual users a reason to use the site more and nonusers a reason to join Yelp.

By June 2005, Yelp had 12,000 reviewers, most of them in the Bay Area. In November, Stoppelman went back to the VCs and bagged $5 million from Bessemer Venture Partners. He used the money to throw more parties and to hire party planners—Yelp calls them community managers—in New York, Chicago, and Boston. The company now employs 40 of these people.”

Comments as forum posts—a way to encourage repeat and deeper interactions

Perhaps the most unique—and clever—form of tying a blog into a community that I’ve seen comes from the comic, Least I Could Do (NSFW Warning: sexual humour and scantily clad cartoon women).

Instead of using a common commenting system like Disqus, Least I Could Do (LICD) gets people to go to the forum to comment on blog posts.

The way the blog and forum are tied together is that blog posts are forum excerpts. In the screenshot below, you see that the Read More link (same as the Comments link) takes you to LICD’s forum.

Post excerpt

The advantage of this approach is that forums comfortably hold longer discussions that are typically uncommon on blogs. Also, many of the community-oriented details described in this posts exists by default with forums (including easy member registration, avatars, recognition, member praise and thanks, and contact info links).

The disadvantage is that you need custom code to get your members’ avatars and other details to appear alongside their guest post author credits if you publish guest posts.

How to shower attention on your community

    • Show avatars and usernames alongside contributions: Help people stand out as individuals. The more you do this, the more likely people will be to remember each other, and members will become friendly with one another faster.
    • Visually recognize members:When people achieve certain contribution plateaus, when they get acknowledged by other community members, when they gain seniority, and when they outperform others, let them brag with badges that are visible on their member profiles.Pro tip: Make these badges embeddable on other sites so that members who are proud of their achievements can link back to your site to show off their badges.
    • Encourage members to interact: Provide links to as many contact methods as they want to provide—Skype, MSN, social media profiles, personal sites, and so on. Also, show who’s online at the moment so it’s easy for people to draw their friends’ attention to particular discussions they want others to participate in.
      Pro tip: Offer a chat room. It’s old-fashioned, but it works! Before there were live webinars, people had live events in chat rooms.
    • Use forums for comments: Encourage a community to build around your posts by putting the spotlight on members, allowing longer discussions, and more.

What design techniques do you use to recognize and reward your blog’s loyal users? What other ideas have you seen on the web? Share your experiences with us in the comments, and check back next week for the next part in our series!

Gab Goldenberg wrote The Advanced SEO Book—and you can get a free chapter here. Gab and Internet Marketing Ninjas, the folks behind the Blog Design for ROI series here on Problogger, are offering to mail you a free print copy of the Blog Design for ROI guide as a small book. Get your free copy from .

Blog Design for ROI Rule 2: Highlight Your Key Content

This guest post is by Gab Goldenberg, author of The Advanced SEO Book.

Previously in the Blog Design for ROI series, I discussed the importance of prioritizing your email optin form within your page layout.

The next best use of space in your design is to highlight your key content.

Why does highlighting your key content matter?

There are a few reasons why this is important.

  • It helps convert one-off visitors into repeat visitors: If someone browses a few posts and realizes that they really enjoy the content, they’ll keep coming back for more. This is one reason why many blogs struggle to build a loyal following—they leave it to more-or-less random chance whether someone sees their best posts.
  • It helps repeat readers keep digging into your archives: This way, they deepen their knowledge of the subject, and associate that education with you.
  • This highlighting is also an easy, practical way to give visitors an idea of what you blog about.

When I say you should highlight key content, I don’t just mean posts, I mean your key posts and key blog categories. You can pick key categories either by popularity of the category’s posts and/or frequency of posting on that topic.

In the main content area

In this regard, I think ProBlogger’s design circa end of 2005 was a brilliant, successful approach to the problem:

Problogger header highlights key posts, categories and news/resources

Beneath the logo and banner ad, there are three visually dominant content blocks. The prominent position is one part of the story.

Another part of the success story here was the specific content featured.

  • The first block, aptly entitled Introduction – Key Articles, featured core posts. It did something quite clever that went beyond that, though—after five specific posts, it offered a single link to drive people further into other posts—the Top 20 Posts at Problogger. And it offered a broad review of past experience—a summary of the best content, if you will—in the seventh link, Lessons I’ve Learnt.
  • The second block, Tips and Hints – Toolbox, listed core categories on Problogger that still represent the blog’s topics accurately to this day—advice on publishing ads, blog design, writing and marketing.
  • The third block, for miscellaneous items, provided valuable resources like interviews, case studies and tools, as well as miscellaneous info about ProBlogger like ProBlogger News, ProBlogger In The News and a Disclaimer.

I don’t know if it was deliberate at the time, but to me the content in those blocks is arranged in increasing order of expertise. Beginners can read, “What is a blog?” Intermediate bloggers can dig through the archives to satisfy their curiosity and deepen their knowledge. Experts can see interviews and case studies with particular details, as well as tools for for implementation.

In the sidebar

Another popular place—though probably less effective—to highlight a blog’s top content is the sidebar.

Here’s how Copyblogger did it back in the day.

Copyblogger in 2006

And you’ll see that this is still where CopyBlogger highlights his top content today:

Copyblogger 2012

While CopyBlogger didn’t also link to category pages in 2006, you’ll see the design comes around and does this later, with the categories linked to above the Popular Articles section. Again, he enables people to go deeper into his subject matter and deepen their knowledge.

Email form + top content = win?

Another aspect which I like about Copyblogger’s positioning of the top content in the sidebar is that it’s right next to his email optin form.

One best practice for optin forms is to provide a [lightbox / popover] link to a sample email so people can preview what they’re signing up to. This advice comes from those well-known conversion experts, the Eisenberg brothers, founders of FutureNow. Here’s a look at their optin form.

FutureNow Optin Email form

Caveat: I said that I like this association of the email form with links to key content, because I think it’s similar to providing a sample newsletter as advocated by conversion rate gurus like the Eisenberg brothers. I haven’t tested it myself, though, so I don’t know if the analogy (sample newsletter link = top blog post links) holds true.

Raise ROI by highlighting your key content

After your email optin form, the most important element of your blog that you need to devote space to is your key content. It shows what you blog about, builds your loyal and subscribed audience, and helps people explore your archives.

Your key content is not just articles, but also categories and additional resources like tools and case studies.

Organizing the key content call-out by the intended audience’s degree of expertise is a practical way to make multiple audiences happy.

Placing the key content near your email optin form gives people a preview of what they’ll get in the newsletter, and may increase subscriptions.

I’d love to hear your thoughts on these tips in the comments. Have you tried these approaches? How did they work?

Next time, we’ll look at integrating the community you’ve built around your blog into the design of the blog itself. See you then!

Gab Goldenberg wrote The Advanced SEO Book – and you can get a free chapter here. Gab and Internet Marketing Ninjas, the folks behind the Blog Design for ROI series here on Problogger, are offering to mail you a free print copy of the Blog Design for ROI guide as a small book. Get your free copy from .

5 Ways to Use Images to Make Your Posts Irresistible

This week on #blogchat on Twitter, we discussed the use of images in blog posts, and I thought that some of the advice we covered there might be useful for you too. So here are my top tips for using images in your blog posts.

1. Use an image per post

At Digital Photography School, I include an image at the top of every post.

This provides a visual point of interest that draws people to read the post. Whilst the audience is particularly visually oriented, I think this is true across the board. The web is filled with rich media, and great images now. So the more you can do to make text-based posts visually appealing, the better.

In fact, some of our most shared posts on dPS are composed almost entirely of images, with little to no text at all.  Take a look at the stats on your blog for posts with images, and compare them with posts that don’t have images. You might find that the former do better with readers. They’ll almost certainly be more likely to be shared.


Image courtesy stock.xchng user L-O-L-A

2. Use images to draw the eye

Using an image at the post’s top is a default for dPS, but we also often images later in posts, too. In this way, they act almost like sub-headings to draw people down the page, and keep them engaged throughout the post.

Not only do those later images catch attention, they provide visual respite for the visitor who is diligently reading through the whole post, from start to finish. So these images serve all kinds of readers—not just scanners.

I think the trick with this is to take care with the images you use. If the reader scans from the top image to a subsequent one, you may—or may not— want that subsequent image to jar for them. It’s important to choose those images carefully, so that they tell the story you want them to.

3. Use images for RSS

Images in your posts also grab the attention of users who are subscribed to your RSS feed. In that case, they can mean the difference between your post being read or ignored.

If you think images are eye-catching on your blog—which is already heavily designed and strongly visual, just imagine what they can do to get attention in a less designed, more texty environment.

4. Trust your instincts

I choose images for blog posts based on the feeling that the image gives me more than anything else. And I’ve really found this to work well.

Often here on ProBlogger, guest posters will send us generic clipart-style images to accompany their content, and we avoid publishing these.

The best images are the ones that evoke a feeling in you and your readers. Clip art probably won’t do that! What does are images that contain people. We’re human, and biology has preprogrammed us to look into each others’ eyes.

So I find that using images with people who are looking at the camera tend to be the most engaging.

5. Take your time

Images are important—and not just to those embracing Pinterest as a medium for growing their readership!

A good image is sometimes as important (if not more important) than a good title for a blog post. On dPS, sometimes I’ll take longer choosing the image for a post than writing the post itself.

You may not spend that much time on your image selection, but if you’re not paying much attention to it, I encourage you to build some time into your posting schedule over the next few weeks to source really strong, eye-catching, and engaging images. You never know how your readers will respond, but you might see longer visits, and more sharing of your content if you do.

Are you already using images on your blog? What types work best for you? Share your advice in the comments.

How to Work With Designers to Design Your Blog

This guest post is by Rob Cubbon.

Psychologists have long been aware of the halo effect—a situation in which our judgment of a person’s character is influenced by our overall impression of them.

The same is true of websites. Rightly or wrongly, we judge a website first and foremost by the way it looks.

Think of your favorite blog and close your eyes for a second. Can you picture elements of the blog’s design (the logo, the colors) clearly? I bet you can; and I bet you like it!

So now that you know how crucial a blog’s design is to its success, how do you go about getting a great blog design if you’re not a designer?

What type of blog design do you require?

The first thing you need to decide is exactly what sort of blog design you require. Do you need:

  • A small amount of customization of an existing theme: This would be the cheapest and simplest option—you could just have your logo tacked onto the Genesis Generate theme, for example.
  • A fully customized child theme built on top of a solid theme framework: You might use Genesis or Thesis, with more unique features.
  • A completely customized WordPress theme.

Either of the first two options would be sufficient for most blogs. A general rule would be the less you change a chosen theme, the less you’ll spend on design and the simpler the process will be.

I’ve had to “rescue” many blogs where someone has created a completely custom theme that the owner then finds unwieldy and difficult to work with. WordPress is the most ubiquitous CMS on the planet for a reason. The popular WordPress themes and theme frameworks are popular for a reason. Work with them rather than against them!

Working out the brief

Next, you must spend a good deal of time working out your brief. While a good designer will likely have their own questions to ask you, you’ll have trouble finding good designers if you don’t know what you want or need in the first place.

To begin, ask yourself which sites you admire. What is it about them you like? Is it the colors, the look and feel, the functionality? Visit them and answer these questions as specifically as you can.

Then, think about your own site. These are some of the major points you should include in your brief:

  • What should it look like? Do you have any examples of websites you wish to emulate without copying?
  • Who is your target audience? List the target readers’ ages, genders, geographic locationd, what sort of work do they do, etc.
  • Would you like the site to be responsive to phones and tablets?
  • Do you need a logo? What other logos do you like, or would like yours to be on a par with? Specify that you’d like the logo supplied as a small image, a large image, and in the original vector file format.
  • Do you require any other design collateral? For example, business cards, email templates, a Twitter background, a Facebook page design, a YouTube channel background, etc.
  • What functionality do you require? Do you want to be able to change around widgets such as featured posts, signup boxes, featured video, etc., on your home page as well as the sidebar(s)?

Don’t sacrifice user experience for design. Websites first and foremost need to work. So don’t get too complicated with the design brief. Simplicity is key.

Your brief should also include URLs of example websites you like and the specific parts of the sites you want to emulate on your blog.

Choosing a designer

Regardless of your budget, always try to find one person who can competently do all the work you require (design, development, email templates, logo design, etc.) if it is at all possible. You’ll win on two counts: simplicity and cost.

If you don’t know of a good designer, you can try LinkedIn Groups and the freelance sites such as oDesk and Elance, which show potential candidates’ previous work history and client feedback.

Once you start to get responses, you can begin to whittle them down. Some of the replies you get can be easily rejected. Other designers may have excellent portfolios but can be passed over because their skills aren’t appropriate. If a designer doesn’t have a blog design that you like in their portfolio, then it’s not a good idea to choose them.

If you have chosen a child theme on the Genesis theme framework, for example, you can specify this in the job description, and then only consider designers who have experience with Genesis.

Narrow the candidates down to a group of about five to ten, and then contact these designers with your brief. After they’ve reviewed it, they’ll be able to answer your questions about availability, timeframes, and costs. You will be able to remove more of them from consideration once you have this information.

At this point, check the the candidate’s references. Contact anyone who has previously employed their services and ask how the project went, as well as any other specific questions you’d answers to. This not only gives you peace of mind, it can also give you tips for working with particular designers.

Hopefully at the end of that process, you’ll be left with one or two designers who will be a perfect fit for you.

Working with contracts and copyright

Contracts and copyright are huge topics that vary enormously from country to country and from designer to designer.

If you are dealing with a designer through oDesk or other freelancing sites, you’ll use the contractual and payment arrangements there.

If you’ve contacted a designer privately, they’ll likely send through contracts in order to specify payment and work arrangements. Always read these contracts and suggest amendments, if necessary, to ensure the contracts specify exactly the deliverables and the timeframes expected of the designer.

Copyright ownership also needs to be covered. Copyright to designs tends to stay with the creator—the designer. This can be signed over for a fee, but that rarely happens. The work of the designer should only be used for the initially intended purposes, so don’t imagine you can repurpose a design for some other reason down the track.

Communicating with the designer

A good designer will ask you the right questions about the website you envisage, and will prepare and amend visuals of the home page and other pages in the site so you’ll know what you’re getting.

If you have chosen a designer online, there may be language, cultural, and geographical barriers to communication. This makes the initial brief writing and communication even more important. In these cases, you may want to start with the logo design to see how well you work together, and then move on to the website if that goes well.

But in all cases, make sure you and your designer agree on every detail of the brief and contracts, and understand the work involved.

What you can do

There are many elements that go towards creating a great looking blog, but if you can communicate the values of simplicity and clarity to the designer, you’ll be halfway there!

What about your tips? If you’ve ever worked with a designer to design a blog, we’d love to hear your thoughts in the comments.

Rob Cubbon is a web designer and blogger.

A Basic Visual Design Guide for the Visually Incompetent

This guest post is by Anabelle of Read, Write, Live.

Have you ever woken up one day, looked at your blog’s header and other visual elements, and thought, “My, this is ugly!”

You need a visual redesign.

What to do?

There are two solutions to this problem: you hire a designer to work on your new visuals from scratch, or you try to do it yourself. The first solution can come at a cost, so cash-strapped bloggers can easily be tempted to try building their blog’s visual elements by themselves.

But what if, like me, you’re visually incompetent? I mean, really incompetent? You can’t draw a stick figure to save your life, and you know absolutely nothing about the basics of visual design. You’re a writer, after all, and writers are better off writing than playing around with pictures.

And yet, you can’t afford a designer, so you need to find a way, any way, to do it yourself.

In this article, I will share the lessons I have learned trying to redesign my blog visuals on my own—header, logo, and all.

Start with software that you understand

We’ve all tried to play with those complex professional photo and visual design programs. You load a picture or an empty canvas and you think “Wow, with all these great tools, I’m sure I can come up with something amazing!”

Well, not so much. After five minutes of trying to understand the functions of the program, you give up. This happened to me time and time again, until I discovered a nice little Mac app called Logoist.

Logoist is simple and has all the functions I need. I can use cliparts from its extensive library, add text, apply filters and effects and insert pictures and photos. Its interface is intuitive and it has a few tutorials to show you the ropes. It also has automatic grid lines that help align all your elements. This simplicity let me create more freely than any professional design program could.

There are a lot of apps and programs you can use for both Mac and PC. Some are free and most are reasonably priced. You don’t have to go for the $500 creative suite to get the job done.

Black and white are your friends

I’ve always worked under the principle that, when in doubt, you should take the simplest route. In visual design, black and white is a great base to start with.

A black and white design looks professional, clean, and easy to work with. You don’t have to worry about colors matching or clashing. You know your text and your visual elements will be readable on a computer screen, a tablet or a smartphone. Black and white reminds readers of printed paper, something that’s ubiquitous and familiar. It’s trustworthy.

But of course, black and white can become a little bland. To add variety, choose one (and when I say that, I really mean one) accent color for your sidebar widgets, for the picture in your logo, or for the blog title in your header.

For example, on my writer’s website, I decided to go with dark red. It’s a color I like, and I think it brings about the right amount of visual interest. On my blog, I count on the pictures inserted in my posts for a blast of color.

Play with fonts

For my blog’s header, I decided to keep everything simple and play with fonts rather than pictures or images. Each word of my title (Read, Write, Live) uses a different font that expresses something unique about that word.

“Read” is in a formal, serif type that you could find in a book or newspaper. “Write” is in a handwritten-looking font that illustrates the act of writing on paper and separates it visually the other two words. “Live” is in a bold, sans-serif font with unexpected lines. I added a small ornament (one of the cliparts in Logoist) in the middle for visual interest.

Here’s the logo version, with the first letter of each word:

Blog logo
Fonts are great because you can give personality to words and ideas before they are processed by the brain through reading. They leave an instant impression, and can make or break the viewer’s desire to read on.

A tool I love for choosing awesome fonts is Google Fonts. If you’re tired of Times New Roman and Comic Sans, Google Fonts has an impressive collection of independent, public domain fonts you can use.

Be yourself, be realistic

The most important thing when you’re stuck having to design your own visual elements without training is to be honest with yourself. If you don’t know how to use vector software, then don’t. There are a lot of solutions that are within your reach and your abilities.

You also need to be realistic: there is no substitute for a professional design. As much as a self-designed header and logo can fill in temporarily, as soon as you get a steady flow of readers, you’ll be expected to get some custom, professional visual design on your blog. But as a beginner or novice blogger, a handmade, simple header and minimal visual elements can go a long way

One last thing: remember to have fun. I can tell you that this kind of visual work can be absorbing and exciting when you really get into it. I didn’t know I could come up with something so attractive on my own. I was very proud of the results, and it got me compliments from readers too!

Have you ever tried to design your own visual elements? Do you have any other basic visual design tips you’d like to share with the visually incompetent among us? I’d love to hear from you!

Anabelle is visually incompetent and would rather write about books, writing and living life with purpose at Read, Write, Live. She’s also a professional freelance writer for hire.