Facebook Pixel
Join our Facebook Community

Blog Design for ROI, Rule 1: Prioritize the Opt-in Form

Posted By Guest Blogger 20th of November 2012 Blogging for Dollars, Featured Posts 0 Comments

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

Are you writing phenomenal posts only to have your poor design fail you? Here’s how to fix that, with rules that will guide you whether you create a custom theme or just pick a theme and adapt it.

Today’s post is the first in a series on blog design for ROI.

Lots of articles give blog design rules or guidelines, but no one I’ve seen explains how these rules achieve your goals.

So let’s look at a business blogger’s possible ROI goals and how the design can help one achieve those goals:

  1. earning ad revenue
  2. earning revenue from selling your own products and services
  3. growing your email list, RSS + Facebook, or Twitter list (listed in decreasing order of value)
  4. building a community or audience—especially as reflected by comments, forum activity, etc.
  5. developing connections and networking.

Every blogger’s first goal should be developing repeat traffic from a loyal audience. Everything else—sales, links, social sharing, networking opportunities—is attainable from this.

In practical terms, the most direct way to achieve this is to blog regularly and to build an email list. Blog design can’t motivate you to write regularly, but it can maximize the number of people who subscribe to your newsletter.

Blog design for ROI rule #1: Prioritize the opt-in form above all

Q: How does your blog design help you build your list?

A: It makes the newsletter subscription call to action the most prominent element on any page, be it the homepage, an individual post page etc.

Sandra Niehaus of Closed-Loop-Marketing wrote an excellent guide to the factors of visual prominence (or “pop”), and I encourage you to read it.

Notably, Sandra highlights the following factors, which are within reach for every blogger to use.

  • location on the page
  • whitespace around an element
  • colour (saturation, hue and contrast).

Have a look at Derek Halpern’s Social Triggers. The design is brilliant with regards to building an email list. Here’s what an individual post page looks like:

Derek Halpern Home

Notice how besides the logo, the next most noticeable things are the email optin area and Derek’s face, followed by the title? Derek is making excellent use of both location, whitespace and color to draw attention to his opt-in box.

Even top marketers like Derek can improve, though.

If you look at the above screenshot, the email opt-in stands out—but it’s trying to shout over the logo and the further branding in the image box embedded in the post.

It’s easy to understand that Derek wants to brand himself and his blog as an expert source, but the large logo and face staring out are very distracting. Derek would likely increase his conversion rate by making the logo smaller and removing his face from the promotional box within his post.

What about branding? Branding is the result of relationships and getting your message out—two things which email does significantly better than a one-time view of a large logo and face.

So what lessons can we draw from Derek, on prioritizing our opt-in form in the blog design?

1. The ideal location to place your optin box is after the logo, before the content

This is the most prominent position you can place anything on the page, and since this is the call to action we care about, it fits here best. This is also why Google suggests placing AdSense ads there.

Failing this, you should still get it above the fold, and you can see that Derek did so at the very top of his sidebar. (Personally I’d love to see it integrated in the post’s upper right corner where his Insider box is, but that’s not always possible.)

2. Give the box plenty of breathing room

Note how it’s not squished between anything else? There’s also whitespace on the right and left margins, so this stands out even more.

3. Give it some colourThis way, it can contrast with the remainder of the page.

4. Make the rest of the page’s above-the-fold elements less prominent

Keep your logo small: look at Amazon’s for a good example of smart use of space. Also, avoid using a headshot above the fold, unless it’s integrated into your opt-in box.

Even this second point is debatable, as making the box too loud can make it physically hard for people to draw their eyes away from the opt-in to read your content. Or you could use a grayscale headshot in association with the author credits, or else resize the face image to be quite small.

The point is to be warily careful in using faces because they’re such a visually dominant element.

5. The spot before your comments is also a big draw visually, so put another opt-in form here

I attribute this prominence to people skipping down to the conclusion of a post to learn quickly what matters, as well as to being curious what others said and/or to see replies to their own comments.

Again, Derek does a good job with his placement, whitespace, and color contrast.

Derek's opt-in

So that was rule number 1: give the top spot in your visual hierarchy to your email list’s opt-in form.

I’d love if you could comment with other examples of bloggers whose designs do a very good job of persuading people to join their lists.

At this time over the next few weeks, I’ll share the other steps involved in designing your blog for ROI. To follow along, add ProbBlogger’s RSS feed to your reader!

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 seoroi.com/blog-design-for-roi/ .

About Guest Blogger
This post was written by a guest contributor. Please see their details in the post above.
  1. For me, the video opt-in form has been performing better than any other opt in form on the site. But, still, not as well as I would have thought going into it.

  2. Nice post. I like the directive speech, it compels you to change something immediately.

  3. Thanks for some excellent points in your article Gab. Would love to see some more examples beyond Derek’s site because its not something that you can pull off easily. Navigation placement also seems limited when you have such a prominent element competing for attention. Thanks!

    • hey Ben

      Fascinating to hear that – I’d love to see your data and swap notes – wrote you an email n love to hear back!

      • Sorry, replied the above to the wrong post. @David – I see why you would think that it would be challenging, because the navigation needs a spot where it will be seen/used. There are a few solutions. One is to put the navigation in your sidebar. There other is just to put the navigation below the form, and to make it less loud visually (ex.: white background, regular black text).

        Keep following the series and you’ll see how it pulls together.

  4. I love the concept, but It isn’t possible to place the optin form below above menu. Well, the design of a blog plays a huge role in increasing the number of subscribers and traffic.

    Looking for to upcoming posts in series.

  5. I love that opt in box and would love to create something like it. Looks like I have some homework to do. I tried a pop up, but found that it confused too many people and turned a lot of people away. I’m excited that people like my blog enough to let me know so that I could change to something else.

    Thanks for these tips. This is going to be a great ProBlogger week. What’s next?

  6. good post and useful information about blog design thanks for sharing

  7. I haven’t properly integrated an email sign up box into my design at all – I’m going to put one at the top of my sidebar and beneath the content before the comments (as you suggest). Great article – thanks!

  8. I found with a smaller thin space for someone to add themselves or adding a sign-up box at the end of each blog post. This is where someone will want to sign-up since they enjoyed your post once reaching the bottom of your post.

  9. Great but simple tips for optimizing web design. Inserting the opt-in form right after the logo works because it’s usually at the top of the page and therefore hard to miss.

  10. i love seo book thanks for the grt info u are giving

  11. Some very useful advice, Gab.

    Considering the importance placed on building up an email(newsletter) subscriber list, any improvements to the appearance and location choice, could make a huge difference to the results being achieved.

    There are many opinions on how far to “push” to gain new subscribers, and whether not popups, etc are the way to go…..

    It may be a case of, what works very well with one site(niche, design, etc) may not hardly work at all for another using the same set up….

    The best thing to do would probably be to experiment with locations and appearance, approach, and give it a bit of time to measure the results……

  12. I have seen opt-in forms in different places on different sites and wondered where the locations were. Thank you for this insight. I will keep this article close as I re-vamp my sites this year.

  13. Great Post Gab,
    I have optin form beneath my posts and the the top of my sidebar just like you said in this post, I woukd have added one beneath my logo, but I think i will usebthat spot for ads.
    i will like to add another spot that works which is the footer, having a form in the footer also converts well. ;-)

A Practical Podcast… to Help You Build a Better Blog

The ProBlogger Podcast

A Practical Podcast…