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

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.

  • 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.

  • Mark Gandy says:


    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.


    Great content, by the way.

    • 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.

    • Dane morgan says:

      You cannot talk about width without also talking about font size for readability. Chris Pearson did a series of posts about using the golden ratio for this a while back, culminating with a calculator.

      You can find, and use the calculator, and if you are interested, follow the links to the reasoning behind the math it employs here.

      • David Risley says:

        Yeah, I talk about font in the training in the Lab, but not here. But, yes, font size matters, too. And, Chris did do a nice writeup on that. Not sure what that guy is up to these days.

  • Dane M says:

    Great article. I’m building a site now, that I am going to try the left sidebar style on, and I’m going through the stuff on making the right lead magnet for it first both here and on Digital Marketer.

    I confess, that my original, and current design has the sign up for the newsletter form in that spot, and I’m taking the critique on that here to heart and fixing it before I move on with the rest of the site build.

    I am thinking that even with the lead magnet in the top left position, it would still be a good idea to hit on a couple of CTAs for it in the body copy as well.

    I’m also thinking, as I consider this post, that I probably need to install some sort of ad manager to control that widget location so that I can target different lead magnets to different articles, right?

    • David Risley says:

      Yes, in-copy opt-ins almost always work better than anything in the sidebar. And in terms of different lead magnets for different content, you should really check out Thrive Leads. It is what I use here, and it makes it easy to do both in-content op-tins, but also conditional optins in the sidebar based on the page they’re on. Also, Thrive has a Clever Widgets plug-in that allows you to put conditionals on any widget.

  • Thank you very much for this great post ! I am a huge fan of the golden ratio that I use in photography. I never thought of using it on a web page even though it seems pretty obvious to me now 🙂

    Have you measured any conversion rate improvements or have you made some tests regarding these concepts or is this just about logic ?

    • David Risley says:

      I’ve not tested the golden ratio thing in terms of conversions, but the stuff on sidebars and the homepage, yes. No hard numbers in front of me since it was from a long time ago, but I’ve had sidebars on both sides, and none at all. In terms of sidebar opt-ins, the left worked better for opt-ins and banner ad revenue (back when I was running a tech site that had banner ads). Here on BMA, the left sidebar wasn’t as big a deal, and ultimately the content does the heavy lifting, so I don’t do the left sidebar.

  • >