Blog Layouts: Is YOUR Blog Designed According To These Conversion Blueprints?

What makes the difference between blogs that make money... and those which don't? Find out how blog monetization REALLY works in 2017... and how it has everything to do with getting traffic. Pick your date and time for this free blog monetization workshop.

 

Research has shown that an attractive person is likely to earn an average of 3% to 4% more than a person with below average looks – and over the course of a lifetime, that adds up to about $230,000 in additional income.

At least that is the findings of Daniel Hamermesh, an economics professor at the University of Texas, and author of Beauty Pays: Why Attractive People Are More Successful.

Now, you can put as much stock (or lack thereof) in that study as you want, but I think we all know that people often do make snap judgements based on appearance. It goes for people…

… but it also goes for blogs.

People will make a snap judgement about your blog based on its design.

Now, the idea of what is good-looking and not is often quite subjective, however there ARE certain things which are very concrete and real that we should pay attention to.

We’re talking about design frameworks, proportions, and how things are laid out on the screen so that they’re most likely to be noticed and acted upon.

If we’re going to use a blog as an effective marketing vehicle, then it has to be set up for conversions – and quite frankly that takes precedence over how attractive the site is.

In this post, I’m going to talk about the basic layout of your blog and I’m going to give you a few frameworks that you can use on your own blog to ensure people notice what you want them to see, thereby increasing the chances they’ll convert into a real subscriber and prospect for you.

OK, let’s do it…

How To Model Your Blog Design Off Natural Law

Many designers are familiar with what is called the Golden Ratio, or the Golden Mean. It describes the relationship between two proportions. Without getting all into the math of it (which quite frankly, I’m not good at anyway 🙂 ), when you plot the numbers out in scale, you get this….

fibonaccispiral

This is a pattern you see in nature alot. You see this exact ratio happen naturally in geometry, in art, in architecture and many other areas. The ratio has been used for over 4,000 years in various forms of human art and design.

panthenon

The Golden Ratio has been used to create what is called the Golden Rectangle. That is simply a rectangle where the dimensions of the sides are in proportion to the golden ratio.

golden_rectangleNow, whether one believes this is all just arbitrary or not, it doesn’t get around the fact that this ratio appears over and over again.

And we can follow suit to build this golden ratio into the overall dimensions of our blogs.

In fact, if you look at the golden rectangle, you can easily see how the blog content would go on the left and the sidebar would go on the right. However, by setting the WIDTH of the content and sidebar to be in proportion, then your blog would have those “golden” dimensions.

Ever wonder the ideal width for your sidebar? This is how you can calculate it.

Take the overall width of your content container and divide it by the golden ratio (1.62, to round it off) and that would give you the width of your content. And the remainder? That’s your sidebar.

As an example, if our total content container was 900 pixels, then if we divide 900/1.62, we get 555 pixels. That’s our content box for the blog post. And the remainder (345 pixels) would be the width of the sidebar.

golden-blog-dimensions

A simple approximation of this is the “Rule of Thirds”. The rule of thirds is a very common principle in photography and has to do with how you frame the subject of the photo. The rule of thirds isn’t the same as the golden ratio, but it can be simpler to apply.

The whole idea of applying these ratios to your blog is to make the blog more visually pleasing, easier to scan, and allow things to pop out when you want them to.

Interestingly, if I look at the dimensions of this very blog (at the time of this writing), I get this…

bma_dimensions

If this blog were going to be “golden”, then a 1140 pixel layout would need to have a 704 pixel content area with a 436 pixel sidebar. Of course, 436 pixels is pretty dang wide, but if I adjust for padding, I get something like this:

bma-dimensions2

No doubt, it makes the call to action in the sidebar much more noticeable. A little TOO noticeable – and that’s because the sidebar is on the left side.

About that…

Sidebar On The Left? Or The Right?

No doubt, the customary thing to do with a blog is to have the sidebar on the right side. However, there is a reason why I have been running the sidebar on the left side.

That reason is opt-ins.

See, there is yet another pattern used in design – and this one is called the “F Pattern”.

f_reading_pattern_eyetracking

Essentially, eye-tracking technology has shown that people will typically land on the top left and then scan across the top. They’ll make another horizontal scan across the middle. All in all, the “hot” areas of scanning show that it loosely resembles the letter “F”.

How this applies to the design of the blog should be very clear…

Elements in the top left will get seen first. Now you can see why I put my sidebar on the left – and the lead magnet at the top. It places my opt-in right at the hottest place on the site.

I also know from my experience running a tech blog (where banner advertising was a core component of the site’s revenue) that having the banner ad in that top location increased clicks, and hence increased my revenue.

So, that’s the argument for the left-side sidebar. But, I wouldn’t go so far as to say it is a concrete rule. After all, a lot of blogs (most of them) have the sidebar on the other side. Are they all just stupid?

No. It is because it all has to do with what you want your visitor to focus on first. There’s most definitely a strong case to be made that we want them to focus on the content first. Additionally, if our content is actually serving as our marketing as well (and ideally it would be), then that’s exactly where we want them.

But, it still wouldn’t be a violation of the “F Pattern”.

f-pattern-3

(Image credit: TutsPlus: Understanding The F-Layout in Web Design)

The F Pattern has resting points where the eye will land. Usually, we’ll land top left and that could be the logo. Then we’ll scan through the top navigation, search, subscription, etc. The next scan will usually be the headline, then immediately over to the top of the sidebar. What goes at the top of the sidebar? The opt-in, of course.

Here on the Academy blog, I did think about the top of the site this way. The logo is on the top left, as is customary. Then, the top nav has the “Start Here” option (one of my core pages) as the first menu option. And the last nav option is the option to join the VIP membership. That VIP nav placement at the end was done on purpose.

bma-topnav

The Perfect Blog Layout

Now that we have covered some basic principles that will dictate dimensions and placement of objects on your blog, let’s talk about the “perfect” blog layout.

For maximum opt-ins or banner clicks, this is the best overall layout framework:

perfect-blog-layout

Now again, this layout has a left-aligned sidebar and that’s for the purpose of opt-ins. For this to work the best, you need to have a very well targeted lead magnet at the very top of the sidebar. No “Subscribe to my newsletter” offers. You need a REAL lead magnet.

The sidebar also needs to avoid the clutter which is all too typical with so many bloggers’ sidebars. So, rather than stuff the sidebar with every widget you can get your hands on, you need to be strategic about what goes in there. My favorites:

  • The “Money Posts”. These are your best, highest quality posts. But, they also need to be really well suited as a marketing piece for something that will make you money. For instance, if you ran a blog post which laid on a ton of value and then sold them into a front-end product you offer, you could link to that as a “money post”. In essence, this is “native advertising” for your own blog.
  • Social. You do want your reader to connect with you in other ways. In my case, I provide a very short author box (which contains a link to the about page) and an option to connect on Twitter.

The key thing to remember is that every item on your sidebar needs to have a strategic reason to exist there.

Now, an alternative of this layout would be…

perfect-blog-layout-2

This is if you really want to maintain sidebar conventions and keep the sidebar on the right side. 🙂

Which is totally fine, but in this case, it is even more important that you put your big calls to action INSIDE your content. For instance, links to a free resource which triggers a LeadBox.

In either scenario, notice the lead magnet is front and center at the top of the sidebar – AND the width of the sidebar is roughly compliant with the golden ratio or the rule of thirds.

The Perfect Blog Homepage

Most of the pages on your site will be in the above layout – and that’s because most of your pages are likely blog posts. Certainly, though, not ALL of your pages should look that way.

Many bloggers have every single page of their site look the same – complete with the sidebar. However, it is a basic rule of landing pages that you need to minimize distraction and focus them on what you want them to do.

The homepage is just such a page. The homepage of your blog is one page where it is NOT ideal to run your standard sidebar layout. The homepage is a landing page. And it has two primary purposes:

  1. To communicate the value proposition.
  2. To tell them what to do next.

Simply listing out your latest posts does not accomplish this. It gives up control, sacrifices opt-ins, and basically leaves all the heavy lifting of communicating your site’s value to the latest few posts that you’ve written.

A better way is this…

blog-homepage

A few points about this:

  • The image you put in this spot should be congruent with your brand.
  • The value proposition should be stated clearly. Don’t try to get cute with it.
  • Give them a CLEAR call to action.
  • Below all of that, you can highlight content, but it is completely optional.

As an example, here is the current homepage of the Blog Marketing Academy

bma-homepage

You can see it follows the homepage framework. And beneath the main call to action, I give yet another value proposition and then link to some of my latest Action Plans.

Another example of this is Pat Flynn’s Smart Passive Income:

spi

Amy Porterfield does it with a more traditional bullet point setup. And her call to action is a full opt-in form rather than a LeadBox:

amy-porterfield

Setting Up A Conversion Friendly Blog

In this post, I’ve introduced you to some of the concepts which go into a strategic blog design – not just the colors and the graphics, but the actual placement of objects on the page.

We’ve talked about…

  • How to calculate the proportions and widths of your content and your sidebar
  • Which side of your site to put the sidebar
  • What should go into your sidebar
  • The “perfect” blog homepage

To take this post to the next level – and to complete the picture, so to speak – I’d like to introduce the next Action Plan for the Academy VIP. I’m calling it The Perfect Blog Blueprint.

perfect-blog-blueprintThis Action Plan will take the concepts discussed in this post and dive deeper with them – into actually implementing each piece of these frameworks.

But, we’ll also extend the framework with strategies like:

  • Getting The Branding Right On Your Blog
  • The use of color and choosing the right colors
  • How to define your top navigation and determine what goes in it
  • The Perfect blog post layout
  • The perfect about page layout
  • The “Core Pages” and how to set each one up the right way for conversions
  • How to set up your blog categories to serve as marketing tools for you
  • How to set up calls to action across your blog and manage them from one, central place.

This Action Plan is all tactics, no fluff. To learn more about it, click here. You can also grab access to it.

And if you’re an active VIP member, you’ll find this AP inside the Vault waiting for you. 🙂

4 Comments

  1. Hi David,

    Thanks for this post. This is awesome.
    You help me to understand the science behind a perfect blog design and shows practical examples.

    I am one of your student from The Blog Masters Club. I am now able to combine my online business and face to face training in presentation topic. Thanks again for the teaching and sharing.

    1. David Risley says:

      Hey Muhammad, I actually remember your name from the Blog Masters Club. Awesome to see you here. 🙂

  2. Mark Gandy says:

    David,

    Could you comment on pixel width of blog pages (the text area)? Some of my favorite themes I recommend either have a pixel width of around 600 (seems a shade too narrow), and others are too wide (high 700s to just over 800 in pixel width). In those wider widths, reading is a tad harder on a PC.

    Your blog’s pixel width (only counting the text area) is 663 which seems just right.

    Thoughts?

    Great content, by the way.

    1. David Risley says:

      I can’t give you exact pixel counts, but generally speaking, a text width of 800 would be too large and hard to read unless the font size were larger.

Leave a Reply

Your email address will not be published. Required fields are marked *