Blog Design For ROI Rule #7: Blend Ads With Content & Encourage Comments

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

What happens when someone comes to the end of your post? Their eyes keep reading downwards, so it’s wise to optimize the area with advertorials and an encouraging comment area.


What do I mean by advertorials? And why should they be present at the end of a post specifically?

In the news-media world, there’s traditionally been a distinction between “editorial content” and ads.

An advertorial is an ad designed to look like regular, non-sponsored content. Advertorial design aims to increase readership by avoiding traditional ad blindness.

As you can imagine, advertorials’ appearance varies according to the media they appear in, to better look like the content they’re designed after. Traditionally advertorials looked like news articles.

Today, Facebook offers “sponsored stories” in the News Feed, which are essentially advertorials:


Likewise Twitter offers “promoted account” suggestions and sponsored tweets, that are a modern variant of advertorials:

Twitter advertorial

What’s the key takeaway?

As Fred Wilson writes on AVC:

“In both examples, the ad unit is the same atomic unit of content as the users create in the service.”

The takeaway for bloggers is that advertorials for blogs need to look like blog posts, or at least inhouse content.

And what better place on a blog for an advertorial than where people are most likely to read it—after another post?

In other words, place the advertorial either after a few posts on a category page (where it looks like another post in the category page’s list) or after a blog post on its own page. In both cases your placement contributes to the impression that the advertorial is regular, non-paid content.

Some of the top marketing blogs use this area for advertorial promotions, be it for inhouse marketing (most commonly), or also for other people’s products.

Social Media Examiner uses their branded cartoon-jungle-explorer style for their newsletter promotion:

SM Examiner

And MediaBistro make their promo’s background the same as the background behind links to related content:

Media Bistro

And of course Problogger does this as well, featuring affiliate marketing for the Genesis WordPress framework. The advertorial uses the Problogger-brand-orange in the advertorial title and the light-blue of the related content box above the advertorial, having it blend in easily with the rest of Problogger content.


Summary On Below-The-Post Ads

Style the ad like your content by featuring elements of your branding. These can include design styles like a border – visible in SocialMediaExaminer’s worn jungle map style and on Chris Brogan’s jagged-border advertorials – or your brand colours, or the background color used for some of your content blocks, like MediaBistro’s previous-link and next-link blocks.

Another approach that I struggled to find an example of but that can be even more impactful is adopting the exact styles of your post for the advertorial.

If you have graphics indicating the start of a post (following Blog Design For ROI Rule #4: Make Posts Easy To Read), you can repeat these at the end of your post to start your advertorial. This maximizes the impression that there’s more editorial content following the post … exactly as intended with the whole idea behind advertorials.

(NB: You need to indicate that the content is an ad, if promoting a third-party. However, leave the notice to the end, as Facebook and Twitter do, because if you immediately tell people that what follows is an ad, you may as well say “the following content is useless, so skip it.” The goal in using the advertorial approach is to overcome this obstacle. You then disclose that the content was sponsored at the end, so that people can decide for themselves what to think of the ad.)

Persuasive, easy-to-use comment design

As business bloggers, we want the most comments possible, of the best quality possible, so as to generate a vibrant community that helps build their repeat visitor traffic. Yet comment design rarely does anything to encourage this behaviour, being seen as a merely functional element rather than a serious opportunity.

Tell people Why they should comment

Tell them about incentives

It’s true that many people don’t comment for lack of time or for lack of anything to say.

Yet I know from giving away links to people who left thoughtful comments on my SEO ROI blog, that incentives can get some of these otherwise-passive readers to comment. And I know that SEOmoz, which has probably the richest, most thoughtful comments on the web, owes their success in part to rewarding participation with points, recognition (e.g. speaking engagements at events they run), and free memberships.

So offer a reward, and write a brief blurb near the comments saying so. For example, a while ago I saw a blog offering a monthly cash prize for its most prolific and best commenters.

Tell people about author engagement

If you’re able to, commit to responding to every single comment left on your blog. While it’s common knowledge that responding to blog comments encourages others to comment, that’s only for people who bother to read the comment section.

What if the first thing you see is that there lots of comments, though? Chances are you don’t expect the author to respond to each comment, in which case there’s less incentive to comment. No one likes talking to a brick wall.

So to answer people’s concern, you can explicitly state that you respond to all comments (say, except for “I agrees”).

For blogs that take contributions from multiple authors, you can either ask authors to commit to responding to all comments or even show what percentage of comments got a response from the post’s author.

An upper limit might also be appropriate in such a case, such as “I Gab Goldenberg commit to responding to the first 50 comments that state something beyond ‘I agree’. (Early thanks goes to those who comment just to show appreciation.)”

Tell them about rewards

If you run contests or offer prizes for reaching fixed participation levels, don’t hide the information elsewhere. State it explicitly above the comments area!

Auto-complete commenter names

The 80-20 rule applies to comments. 80% of comments come from 20% of the audience. Why not save time for repeat commenters by asking, once they’ve submitted their comment, if they’d like their names to be stored for future-auto-completion? Similarly you can get them to register at the same time, and use this for community rankings as described in “Shower Love On Your Blog Community.”

Display people’s profile thumbnails

It may seem obvious, yet most blogs still don’t show a thumbnail photo of their commenters. Probably this is partly because of non-registration, since most people don’t want to register separately for a blog (it’s yet another thing to register for…).

You can get around this by using Facebook for comments, since most people are registered on Facebook, and Facebook comments include thumbnails. This also gets you auto-completion of people’s names if they’re logged in to Facebook while browsing your site and it also has the advantage of…

Threaded comments

While it’s ironically not possible in regular status-update discussions within, Facebook-powered comments on third party sites use threaded comments. Threaded comments mean that you can respond to the first comment on a post without the comment appearing beneath all the intervening comments, which enables discussion that would otherwise be fragmented and unwieldy.Threaded comments

In addition to threading comments, Facebook-powered comments have the advantage of auto-filling in commenters’ names if the commenter is logged in to Facebook at the same time (e.g. in another browser tab).

So should you just switch to Facebook comments?

As of this writing, there seems to be a bit of technical savvy required, and the WordPress plugins I found for this have mixed reviews. If you have a suggestion in this regard, then please do. In any case, if you can implement it technically, then Facebook comments offer the above advantages as well as some others. And if you use FBXML, you can ensure the comments are indexed by Google, for optimal SEO.

In conclusion

At the end of your post, don’t just abandon the reader with nothing to read or do – show them an advertorial.

Ideally, have it adopt the appearance of your post, complete with header font and colors, category links etc. This will help maximize the percentage of people who read your message, as opposed to skipping it as just another ad.

If you’re advertising a third party’s wares, you should disclose this – at the end of the advertisement.

With regards to your comments, add an area above the comments section where you tell people the incentives to comment. Let them know that all comments are read and responded to.

And as to providing an optimal user experience, you’d be well advised to integrate Facebook comments, as they auto-complete the user’s name and profile picture, while threading discussions.

Gab Goldenberg and Internet Marketing Ninjas are developing a book based on this series – get your free copy at . You can also get a free chapter of Goldenberg’s The Advanced SEO Book.

How—and Why—to Make Your Blog Print-friendly

This guest post is by Dunya Carter.

When crafting your blog, it is easy to neglect how it might look to someone who wants to print your articles and posts.

After all, with huge monitors, smart phones, tablets, and the bevy of other ways people can access your content, who’d want to print it out on a piece of paper like it’s 2004?

Well, it’s the hallmark of a good designer to not assume how someone will want to digest what you have to offer, and it’s so easy to make your blog print-friendly that there is really no reason not to.

You’d be surprised by how many people will choose to print useful articles, especially if they contain some useful information that they would like to refer to when they’re not near a computer.

Printing from scratch

For the code-skittish, there are some special tools and plugins you can use to help get your print-ready blog set up, and we’ll get to those shortly. If you want to customize it exactly how you want—for example, adding a print-only message to the bottom of the page—the best way to do it is coding it yourself with CSS.

Start in the file called header.php in your theme, and look for the line below:

<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” media=”screen” />

That line tells the browser what style it should use based on the way the user is viewing the page. Most of the time, it will be viewed on a screen. Below that line, add this one:

<link rel=”stylesheet” href=”<?php bloginfo(‘template_directory’); ?>/print.css” type=”text/css” media=”print” />

This directs the browser to use a different stylesheet, called print.css, if the content is being printed. Of course, print.css does not exist yet, so open up your favorite text editor and save a new file called print.css, dropping it into your theme’s directory (the same place you can find your theme’s main stylesheet).

If someone is printing your article, they want just the content of the article. Excessive images that don’t add real value to the content usually wreak havoc on printers and ink supplies, so you’ll want to remove your site’s header, menus, and advertisements (you won’t be making any cash from printed out Internet ads, anyway).

How can you do this? Take a look at your page code, and find the div id of the section you would like to remove (e.g. <div id=”comments”>). Then, simply add the following rule to your print.css file:

#comments {display:none;}

If the code begins with div class (e.g. <div class=”comments”>, the rule should be .comments {display:none;}, not #comments {display:none;}.

The reader wants the article formatted to fit the piece of paper it is being printed on, so scrap any sidebars and footers that might cause unnecessary white space and extra pages.

Finally, remove anything that a reader of a printed sheet cannot use. This includes comment sections (as we’ve just seen), navigation bars, and anything else that requires some sort of user action, like related articles links.

You can test your stylesheet as you modify it using your browser’s print preview function. Just keep removing stuff until it looks like something you’d want to come out of the printer!

Using tools and plugins

WordPress and Blogger are the two most popular blogging platforms, and for those who are not comfortable digging into code and writing a stylesheet themselves, both platforms have plugins that can quickly get you a serviceable print-ready page for every article on your blog.

For WordPress, the easiest option is WP-Print.

A very simple plugin, it gives you a few basic options about how your print page should look, including which links to include, what images should stay in the page, how to handle videos, and an option for a disclaimer.

Your user will simply see a Print button next to your articles exactly where they expect it to. Some other, more complicated tools might offer other functionality, such as printing a page to a PDF, emailing it to friends, or integration with social media like Twitter and Facebook.

If you run a Blogger site, the website asks you to make a few simple choices, such as the appearance of your Print button and the inclusion or exclusion of features like email and PDF printing. It then gives you a link to download a Blogger widget you can install directly on your site, as well as code you can copy and paste directly where you want the button to show up.

Looking good … in print!

In the end, whatever method you choose, you will have an attractive print-friendly version of every page on your site with only a few minutes’ work.

It might not be the most used feature you ever offer, but for the occasions when a visitor does want to print out something you wrote, they will undoubtedly appreciate that you spent the time to accommodate them.

This article was written by Dunya Carter. Dunya is a marketing consultant from Brisbane, Australia who works for Ink Station, an Australian online ink toner shop. She also writes articles on tech and business for several websites and blogs.

A New Theme, Part 2: When Your New Theme Crashes Your Blog

This guest post is by Ayelet Weisz of All Colores.

Yesterday, we talked about preparing your blog for a theme upgrade. You read it, worked through all the steps, and now you’re ready to go.

So you get up on Saturday morning and sit down to work, a breeze coming through the window. You turn on some music as you browse through potential new themes for your blog. You find one and click Install.

Excited that you’ve found the perfect match for your blog, you click Activate.

Then you see this message:

Fatal error: Call to undefined function wp_get_theme() in /home/colores/public_html/ on line 119

You think to yourself, “Fatal error?! I better refresh the page!”

Then you discover that fatal means fatal. Not only do visitors have no ability to access your blog—you have no ability to access your dashboard!

Not even if you left an additional tab of it open. Moving backward in your browser might work, yet any other function you attempt takes you right back to the fatal error message. Is your blog lost for good?

Why would a site crash on theme installation?

Like houses, some themes are built better than others. Files in the theme might have been tempered with or coded incorrectly, or the theme might require a more updated WordPress version than you’re using.

As you browse through themes online and explore their demo sites, there is no way for you to guess which theme would cause your blog to crash. In fact, the tech support agent in the hosting company I use said there’s some chance that the same theme that crashed one site would work fine on another one.

Either way, unless you’re the one who created the theme, it’s likely not your fault that this happened.

The best times to crash your site

Let’s face it—there is never a good time to crash your site.

However, if it must happen, the least harmful times are:

1. When your largest audience is asleep

If you can experiment with your blog when it is night time or very early in the morning in the time zone of your largest audience, that would be best. This way, the majority of your visitors won’t be bothered by bizarre, constant changes to your blog, and the quality of their stay won’t be ruined. Moreover, these visitors might never know something had ever gone wrong with your theme upgrade.

2. When your second-largest audience is enjoying a weekend

A weekend in one country might not fall at the same time as a weekend in another country. Weekend days in the United States, for example, are Saturday and Sunday. In Israel, on the other hand, the weekend starts on Friday evening and ends on Saturday evening. Folks get up early and go to work on Sundays.

If you plan to do any kind of work on your site and you can’t work on everyone’s night time—or anyone’s night time, for that matter—make sure you do your blog changes on a weekend. Some people, though not all, spend less time on their computer on weekends. Instead, they hang out with other people who have the day or two off … leaving you to take care of your blog.

Now that you’ve picked a good time to flip the switch, let’s see what you can do to minimize downtime that arises if your installation goes wrong.

If it all goes wrong

If your site crashes after you installed or activated a theme, there are a few things you can do.

Option #1. Put on the tech hat

Since the theme caused your website to crash, you need to erase the theme from your dashboard.

However, if you’ve lost access to your dashboard, you need to log in to your control panel on the hosting company’s website and erase it there.

Following that, reactivate WordPress’s basic theme—the one that showed up when you first installed WordPress. It’s either Twenty Ten or Twenty Eleven.

You data is usually safe in this case—the fatal error turns out not to be so fatal after all. Once you switch back to the basic theme, you’ll be able to log in both to your blog and your dashboard. Switch back to the theme you had earlier, before you tried changing it, and everything will be back to normal.

This process will undoubtedly require you to delve into technical tasks. If you are not tech-oriented and fear you might cause a truly fatal error, check out option #2.

Option #2. Contact your hosting company’s tech support team

The challenge you’re facing was caused due to a WordPress theme. Therefore, it might make sense to contact the theme’s creator or It might—but contact your hosting company’s tech support anyway.

It took only ten minutes for my theme issue to be resolved once I started an online chat with a representative from my web host.

Note that you might need to provide your billing email address and password for security verification purposes. Then, the agent will do what was specified in the previous section—she or he will remove the malfunctioning theme from your system and reactivate the basic WordPress theme that came with your blog when you first launched it.

Make sure to ask the person assisting you to stay on the line while you verify that returning to your previously-regular theme causes no issues, and then go off on your merry way.

Fatal doesn’t always mean fatal

The most important part of this process is, of course, to breathe. Remember that there are plenty of sources to get information and support. Blogs like ProBlogger, WordPress message boards, Facebook and LinkedIn groups for bloggers, good ol’ Google and your hosting company are just a few examples.

Mishaps happen. Hopefully, a little quick research and asking for help will help you resolve them in no time—and you might even gain new knowledge and tools along the way.

And once the issue at hand is resolved, don’t forget to do a happy dance.

Has a theme ever crashed your blog? What did you do to fix the problem? Share your tips with us in the comments.

Ayelet Weisz is an enthusiastic freelance writer, blogger and screenwriter. She celebrates the everyday and extraordinaire joys of life on her travel blog, All Colores. Get her free report, 48 Must-Live Israeli Experiences, and connect with her on Twitter.

A New Theme, Part 1: 11 Ways to Prepare for Your Blog Theme Upgrade

This guest post is by Ayelet Weisz of All Colores.

You’ve been reading all about the importance of a good blog design while struggling with your basic WordPress theme.

You’ve been frustrated with the limitations of this basic theme, yet you don’t have enough tech knowledge to create a new theme—or the budget to hire someone to create your dream design for you.

You drool over other blogs’ themes, and you search online for alternatives. Are you even ready for a change?

You are?

Well, maybe it’s time to tackle a theme upgrade! Today and tomorrow, I’ll share some tips from my own experience doing this to help you avoid the pitfalls—and the panic when something goes wrong.

First up, it’s important to get prepared. Once you find a premium theme you love at an affordable price, follow these guidelines before upgrading your blog’s design.

1. Verify the theme you’re purchasing is blog-friendly

Not every spectacular premium theme you fall in love with will be a good fit for your blog. Some themes are created specifically with online stores or static websites in mind. While those can sometimes be adjusted to blog format, the end result could be very different than the vision for which you pulled out your credit card or PayPal account.

Check to make sure that the theme is blog-friendly, perhaps by looking at implementations of it on other blogs before you buy.

2. Make sure it has a full refund policy

Some premium theme purchases can be canceled within 30 days (or more), and their makers offer a full refund—no questions asked.

If you’ve never upgraded your blog to a premium theme before, or even if you have, it’s a great idea to make sure you can change your mind later on. The fact that the purchase is almost risk-free might just give you the courage to finally take this step.

3. Read the terms and conditions

Some companies offer premium themes that you pay for once and keep for a lifetime. Some let you use that same theme on as many websites as you like.

Others offer premiums themes that you pay for once and can only use on one website, or you pay for once a year and can use on one or limitless number of websites. Some offer multiple themes for the same price as a single theme in a different company.

These are some of the considerations you’ll face when you’re upgrading a to a premium blog theme. Read what the deal includes and what it doesn’t, and life will be easier after you type in your credit card information and make the purchase.

4. Know what you want in advance—or at least have an idea

Build a list of features you love on other blogs’ designs. Brainstorm colors. Read blog design tutorials.

All this will help you choose your premium design, and make tweaking the theme after installation faster and easier.

5. Know when to switch themes

Traffic to many blogs decreases on weekends, holidays, and at night. If you’re willing to work when others are asleep or vacationing, you can make sure as small a number of readers as possible will be annoyed from the constant changes that take place while you’re working on improving your blog’s design.

If you need to take a long break and you’re not done tweaking, sometimes it’s best to save your changes and temporarily switch back to your previous theme. You’re upgrading your blog to a premium theme so that readers’ experience will be improved—make sure not to bug them on the way to that improvement.

6. Make time

Blog themes, especially premium ones, are made to suit different types of blogs and bloggers. They offer all kinds of options, and it will take you time to tweak the theme you choose so that it looks exactly as you want it to. It might also take time to adjust to the interface or respond to any surprises that might come up. You may even want to make changes you never imagined before.

Make sure you set aside time for this process in your calendar, and make sure you allow a bit more time than you think you need.

7. Take tech support into consideration

Before making your purchase, realize that you may need to use the blog theme company’s tech support team. Learn in advance how you can access this team and when, as well whether tech support is included in the price you pay for the theme.

Will the team be available 24/7, or does it only work during office hours? Is its time zone completely different than yours? Will you have to skip sleep to talk to them? Will the call be expensive? Does the company offer tech support via chat, email, or message boards? How fast can you expect a reply in these forms? If the tech support is given on a message board, can you stay anonymous if you want to, and still get help?

Make sure you know what you can expect in the way of support before you start switching themes.

8. Be willing to play with code—or get help

Some tech support teams prefer to guide you through the process; others take your information, log in and make the changes themselves. At times, it will be a combination of both, with a tech representative taking over only when guiding you through the process isn’t helping.

This, of course, can be an opportunity. Usually, tech representatives won’t ask you to do something too complex, and you’ll have good reason to acknowledge yourself for overcoming your fear of technology.

If you are not willing to play with code, or if you want to make sure there’ll be someone who’ll take over and help you out if you get in tech trouble, find out the company’s policies in advance by sending it an email or calling their customer service department.

9. Be willing to ask questions

The only way to get answers and to eliminate some of the unknowns is to ask questions. Don’t worry about looking silly or as if you have no clue. Tech support representatives get hundreds of strange and silly questions a day, and it’s very unlikely they’ll remember yours as the strangest or silliest one of all.

Remember, this isn’t about what they think, anyway. It’s about you giving your blog the best you’ve got—and expanding your comfort zone at the same time.

10. Get a recommendation

If you can find blogs that use your desired premium theme, email their owners and ask about their experiences with that theme. Some will give you the pros and cons of their experience, others will simply reassure you that the theme creation company exists and maybe even fulfills its promises of service or refunds.

If you don’t know anyone who’s purchased a premium theme where you want to buy one, look up reviews online or find Facebook groups dedicated to blogging, either in your niche or in general. Surely someone there will be able to share her or his experience with you, or refer you to someone who can.

11. Know that things will go wrong

Tweaking your blog’s new theme will take longer than you expect, or will take more work than you expect. You might find yourself dealing with tech challenges, or with a frustrated reader or two. The end result might not be as you pleased. Mostly, you might miss your writing and want to get this tech stuff done with already.

Take a deep breath and remind yourself why you started this part of your journey. Remind yourself of the benefits. Let go of perfectionism. Embrace your time in the uncomfortable zone. You’ll have a better blog once you’re finished.

Do you have additional suggestions for surviving a blog theme upgrade? Let us know in the comments, and don’t forget to check back tomorrow, when we’ll look at what you can do if something goes wrong with your theme upgrade.

Ayelet Weisz is an enthusiastic freelance writer, blogger and screenwriter. She celebrates the everyday and extraordinaire joys of life on her travel blog, All Colores. Get her free report, 48 Must-Live Israeli Experiences, and connect with her on Twitter.

Use These 5 Design Elements to Create the Optimum Blog User Experience

This post is by Mark Acsay III of Webby Thoughts.

One of the main unacknowledged problems with today’s websites is that many just follow the favorite design of the month. When Flash was born, we got bombarded by Flash-based sites that took forever to load. When sliding banners came along, almost everybody wanted to have one too.

Many bloggers and business websites today only focus on search engine optimization, trying to make their way to top rankings just to get a chunk of traffic. Yet when they do, they waste a lot of that traffic and lose the confidence of their potential audience through of bad user experience.

Websites must not only be optimized for designs and for search engines but also for “visitors’ thought sequences.”

We need to understand that every time there’s a visitor on our website, we must answer the thought conversations that they have while navigating our sites. Take this thought sequence as an example:

  1. Where am I?
  2. Where should I begin?
  3. Where did they put the ___?
  4. What is the most important thing on this page?
  5. Why did they call it that?

If your site does not answer most of those questions, then you are not giving the best experience for your users. It means that you are not guiding them to accomplish their objectives on your blog.  Fortunately, there are five primary web design elements, and we can use them with the intention of guiding the visitors through a clear sequence of thoughts.

What are the five primary web design elements?

  1. Size: Size does matter. We use size to emphasize something. Whether it’s the font, image, or shape, we instinctively understand that the bigger it is, the more important it is, and vice versa. Just like when we speak, the louder the sound, the more we emphasize.
  2. Shape: Shapes are among the first things we learn as toddlers and they have an innate connection to all of us. Shapes direct and communicate. They have a big appeal to our emotions and thoughts. Just seeing a heart shape gives many of us an impression of love. It is said that shapes are processed by the brain many times faster than words.
  3. Color: We all know the suggestive power of colors. This is one of the most powerful elements of design. Red is known to induce appetite, which is why it’s used by many restaurants.  By using colors to guide the thought sequences of a visitor to accomplish your main objective, you get to increase your conversions and give your users a better experience.
  4. Position: This element is one of the trickiest if it’s not carefully implemented. It is obvious that when you put something above the fold of the website, it’s important—but not all the time. Since we usually skim web content instead of reading it, positioning should be based on the eye movement patterns of your visitors. So position your most important messages and navigational cues where the eyes are scanning the page.
  5. Motion: The effective combination of shape, color, size and position to create motion in directing the focus of visitor’s attention dramatically impacts the user behavior. A simple .gif arrow moving back and forth and pointing to the “Subscribe Now” form can impact sign ups.

Now that we have an overview of the design elements, let’s put them into practice and see how we can use them to, firstly, guide visitors’ thought sequences; and secondly, focus the attention of visitors to achieve their—and your—objectives, while giving them the best user experience they could ask for.

As a note, I cherry-picked these example sites from different niches so we can learn how they applied the elements of design to serve a better user experience.

The design elements in practice

1. Emphasize the most important objective

Let’s take a look at what did for their Black Friday campaign. UPrinting is one of the top printing companies in the US.


Let’s see how they used the design elements here.


Since it was Black Friday, the designers put the biggest banner in front of the site’s visitors. Look at the size of the word “sale”; they also used the number 20% to emphasize their main objective.


They used a rectangle to identify the banner ad. Notice also the green button, which led visitors to a page where the offers were, and where interested people can learn more about the sale.


I really like the way they used color contrast here. A black background was aligned with the theme, Black Friday. Then they used the contrasting color of white to emphasize the word “sale”. Finally, the use of red behind the words “20% off everything” automatically drives our eyes to this message, and eventually to the green Learn more button.

Why use green instead of the usual red or orange? This might signal to users that clicking the button is safe to do, and that there’s more on the next page. Green is also the color of their logo at the upper left hand corner. The subliminal message here—that when I click on that button, I will find things that are about printing and learn more about the promo—is very clever.


Obviously, this ad is above the fold. But the position of the green button does not distract from the other messages in the banner. It’s at a spot where, after your eyes have scanned the whole message about the sale, you will naturally end up.

So here’s how the thought sequences are answered in this page:

  1. Where am I? The logo at the top-left says you’re at UPrinting’s site.
  2. Where should I begin? Begin with this large banner that says SALE, 20% off everything.
  3. Where did they put the button? Right beneath the 20% off message.
  4. What is the most important thing in this page? The Black Friday discount sale.
  5. What printing services are discounted by 20%? Click the button to learn more about the offer.

2. Use just the right number of design elements

Let’s take a look at what Amazon did for their Cyber Monday promotion. Amazon is the largest online retail store in the world—they could really give us some great lessons in design.


  • The business emphasized their Kindle Fire sale because it was Cyber Monday.
  • Despite the volume of products they sell, they limit the elements above the fold to reduce the noise and to focus visitors’ attention on what’s important.
  • By reducing the clutter and highlighting their own product—Kindle Fire—in the top position, they leave you no other option but to first consider it. When you leave your visitors on their own to try to work out what’s most important, it slows down the buying thought sequence, because they have to stop to make meaning of the options.
  • Giving a lot of options to the potential buyer can actually reduce conversions. If you have to give more than one option, be sure to guide users’ thought patterns to decide on the best one for them.

3. Make effective use of balance

SEOMoz is one of the most prominent organizations in the SEO and inbound marketing community. Let’s look at what they do with balance.


  1. SEOMoz’s design uses the right contrast and a color combination that’s easy on the eyes.
  2. There is symmetry between the text on the left and the image on the right, except for the hiring ad banner that temporarily interrupts that flow, and grabs the attention.
  3. A strong emphasis was also given to the Free trial button.

4. Communicate the right messages effectively

Let’s analyze the how communicates its key messages about attracting traffic.


  1. Think Traffic presents a consistent brand message: think about your traffic. Obviously, they want to attract users who need more traffic for their sites.
  2. To display the brand’s unique selling proposition, the designers used a box to highlight relevant questions for users. They used shapes and colors in the background to show an upward trend, which reflects the fact that users want to have an upward trend in their traffic.
  3. In the third box, the designers used an arrow to communicate that the solution to the traffic problem is to fill out the form. Users just have to enter their email addresses to get a traffic toolkit.
  4. Then, they used the right color combination, with just right to contrast, to present the call to action, “Let’s do it”—a message that conveys, “We can help you. Let’s work together.”

5. Use the right flow

Recently I updated Adobe Flash Player and after everything was done, I was redirected to an installation success page that contains a banner for Adobe‘s newest Photoshop Elements packages. Let’s take a look.


  1. Color: The designers used color saturation to guide my eyes to the button at the right-hand side. My attention was drawn seamlessly right to the button.
  2. Size: They used font size to emphasize the availability of their new Photoshop Elements product.
  3. Balance and the right combination of design elements were carefully mixed to guide visitors’ thought sequences, from the moment they see the “Now available” message. This leads them to the Adobe Photoshop Elements II message, then to the leftmost box, then back to the leaping person, which points to the “Learn more” button.

Are you using the design elements on your blog?

When you work on your blog’s design, don’t just optimize it for search engines or for a fashionable design. Think of how you can best serve your visitors by giving them the best user experience.

You can do this by guiding them through the sequence of their own thoughts. This approach builds trust in your site and helps you communicate your message clearly, which supports higher conversions.

People buy from people. Talk to your users through these design elements.

Do you have other ideas you can share based on the examples I’ve mentioned here?

+Mark Acsay III is an online marketing consultant, the owner of Webby Thoughts blog that talks about inbound marketing topics.

Make an Offer they Can’t Refuse: 5 Tactics for Stronger Calls to Action

This guest post is by Christopher Jan Benitez of

For site owners to increase their profit, they need to strengthen their calls to action (CTA).

Websites earn from visitors who click on a button or banner. This leads them down the conversation funnel until they reach the end of the funnel where they become a lead, if not a customer.

Getting people to perform a click of a mouse button—or any desired action—however, is never easy. It takes careful planning and strategizing to get people to heed your CTA, let alone act on it.

ProBlogger has said much about calls to action here and here. But a call to action needs to weave some factors left out of these posts together into an eye-catching and attention-grabbing banner or button.

This post discusses other essential points to help site owners maximize their earnings.

1. Color

The colors you use on your calls to action trigger different emotions in users. Whether it’s the copy or button itself, you need to use the appropriate color choices that best connect with your audience to increase the chances of people acting on your CTA.

This color wheel shows how each color is perceived by users:

Color wheel

The color you will use on your landing page will depend on the site’s theme. For the copy and button to pop out from the screen, you will have to choose a color that is complementary to the site’s theme.

If there are elements of your call to action that stick out like a sore thumb, redesign it with a color that is analogous to the theme.

2. Size

Make your calls to action appear in large buttons or fonts. If you have different calls to action set up on your page, make the priority ones larger and the lesser ones smaller, so that users can distinguish which are more important.

Don’t design the entire page with a call to action graphic design—observe subtlety at all times.

3. Placement

Theoretically, the best places for your calls to action to appear are above the fold and below the post.

When positioned above the fold, users will immediately see your call to action as the page is done loading. They won’t have to scroll down the page to see what’s in store for them.

On the other hand, placing your call to action below the post has the potential to produce more leads. Users who scroll down the page are engaged with the content of your post. Therefore, once your call to action appears on their screen, they will be more likely to heed your call.

The placement of your CTA ultimately depends on your site design. Since each site is unique, some best practices may not necessarily apply to your blog. You need to determine how your site is viewed by users by looking at a heat map. This helps you figure out which parts of your pages receive the most attention from visitors.

Slodive has a post of heat mapping tools that you can use for your site to learn the best places where you can post your call to action.

By placing your CTA on “hotspot” areas in your layout, you increase the chances of users heeding your call to action.

4. Uniqueness

It is advisable to follow the suggested practices of a particular task, but you can’t let yourself be restricted by those practices. Eventually, everybody will start using those tactics. until every other call to action ends up looking exactly the same.

Although there’s essentially nothing wrong with having a fundamentally sound CTA, a really good call to action operates away from convention.

Writer Dan Kennedy shares his insane advertising ideas for pain relievers, financial services, and skin cream product in the market in this post. “Truly groundbreaking” are words that perfectly capture the essence of Dan’s advertising ideas.

The idea here is that your CTA stands out even more from those of your competitors. When everyone else is following the best practices for their CTA, you can do ever better by going against the flow and following your gut.

Be distinct from the competition, but don’t overdo the weirdness—you may end up alienating your target audience. Let your creative side show while still being in touch with your core values and mission.

5. The “What’s in it for me?”

To effectively get people to perform your desired action, you need to put yourself in the shoes of your potential clients.

Think of your experiences purchasing goods from a store. You will find yourself buying something that gives you the most satisfaction at reasonable prices.

As a service provider, it is your responsibility to provide high-quality products and services that fill a need. Start by listening to people and knowing what makes them tick. Then develop your CTA based on the findings.

The higher the demand, the greater the possibility that your CTA will be answered. Whether you’re offering free ebooks, email subscriptions, or products for sale, ensure that there is genuine interest among users, and craft your CTA accordingly.

There’s a lot more about calls to action that needs to be discussed to help site improve their lead generation tactics and increase sales. If you have tips and tricks on how to boost your CTA that weren’t mentioned in this post, let us know by commenting below!

Christopher Jan Benitez writes helpful articles about social media, small business, and print marketing, in particular full color brochure printing. He is currently a writer for the PrintRunner Blog.

Blog Design for ROI Rule #6: KISS Headers, Navigation, and Sidebars

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

This post is the sixth in a series on blog design for ROI. Previous posts in the series were:

  1. Prioritize the Optin Form
  2. Highlight Your Key Content
  3. Show Love To Your Community
  4. Make Posts Easy To Read
  5. Engage Readers on Archive Pages Fast.

One area that blog designers regularly get wrong is the design of secondary elements, and I should know, since I made the error myself.

In this 2008 screenshot of my blog, the header, sidebar, and navigation are roughly as loud as a drunk protesting he shouldn’t be thrown out of the bar. Maybe louder!

SEOROI in 2008

The sidebar was screaming for attention, distracting people from reading the post content

Not only was my sidebar loud, but the ample whitespace in the header drew attention to my slogan. At the same time, the dark contrasting background I’d used for my main navigation and breadcrumb trail drew eyes there.

There was no clear focus to the design at all.

You might think that this was an accident, that I wouldn’t have made such a loud sidebar if I’d known better … I wish. Really, my idea was that having a prominent sidebar would allow me to periodically try different marketing messages there in order to gain more business. Similarly, I wanted people looking at and clicking on the navigation since the pages listed there were sales-oriented.

Considering the popularity of widgets (typically styled sidebar boxes like the one above) in the world of WordPress blog design, I’m probably not the only one prioritizing the sidebar over the main content.

So today’s rule really just has a simple message for myself and my fellow business bloggers.

Keep It Simple, Sam: the KISS rule applied to blog headers, navigation and sidebars

Simpler headers

Takeaway #1: Don’t distract visitors with big logos and branding. Either offer an opt-in form in that space or just tone down the branding and move your content up vertically.

Surprise! People’s top priority in visiting your blog is not to admire your logo and branding, nor the sidebar and your awards. It’s not even to click around your navigation.

Your visitors’ number one priority is to read your content.

What do many of us do? We load up large header graphics and massive logos, which not only push our content further down the page, but also distract the eye and brain from their goal:

Peter Shallard's blog

Peter Shallard’s blog features a very large header


A mega-sized logo takes pride of place at MogulMom – but she’d be even more successful than she is by scaling down her logo

Of course, this delaying and distracting of readers with large branding graphics is counter-productive. Why?

It’s a waste of space to use XXL branding, because we could instead prioritize the email signup form, which definitely feeds our long-term audience growth.

Another reason is that we want visitors to start reading fast, so we can maximize repeat visits and build our audience.

Simpler sidebars

Takeaway #2: Don’t distract visitors with long blogrolls, loads of award badges and other unruly sidebar features.

Keep the sidebar’s visual weight secondary, and minimize the clutter.

Chances are that your awards and reads you enjoy are not directly relevant to the specific post somebody has loaded or to the given archive page, let alone the About Us or Contact pages. So why not move the blogroll, category and tag links to their own separate pages?

Have a page with links to your favourite blogs. Add another page to serve as a general archive clearinghouse with links to each category and tag page.

What should you feature in your sidebar instead?

  1. Earlier in this series I discussed the importance of showing attention to your community. The sidebar is a good place to do that.
  2. You can have widgets that highlight related content (e.g. tag-based) as well as popular content from the same category the post is in. This personalizes or contextualizes the content suggestions, which most readers appreciate.
  3. 3. Write an About page summary in the sidebar.

And what about subscription calls to action?

As I mentioned earlier, it’s best to place these in visually prominent areas above and below the main column rather than in the sidebar. If that’s not possible, then the sidebar is the next best place.

Think of your sidebar as a complement to your post, and you’ll be more successful than if you see the sidebar and post as competing for attention.

Simpler navigation

Takeaway #3: Your primary menu has a place on every page … but a secondary place.

Remember how my blog’s menu drew attention to itself with rich colours, instead of helping eyes rest on my content?

Learn from my mistake and keep your navigation’s visual weight secondary. A light grey or white background will do, and the breadcrumb navigation really does not deserve to be at the center of things, much less to have a highlighted background.

For more on visual hierarchy, see this great post on Search Engine Land and this one on the 4 degrees of visual hierarchy in wireframing.

Keep it simple!

The massive header branding does far less for you than either getting the visitor to join your newsletter or read some content—so use your space accordingly.

To the same effect, reading post content is more important than clicking links in the main navigation, blogroll, or discovering the admiration some other group has for your blog. Making the sidebar visually loud makes it harder for people’s eyes to read the post normally.

Keep it simple and watch your readership grow!

Gab Goldenberg and Internet Marketing Ninjas are developing a book based on this series – get your free copy at . You can also get a free chapter of Goldenberg’s The Advanced SEO Book.

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.