The Blueprint of an Optimal Blog Design

The design of your blog isn’t just supposed to look “cool.” It should be optimized to help you gain more readers and engagement.

Do you know what your blog should look like?

From using snippets and placing images in the correct location to figuring out the optimal width of your design, there has to be a perfect formula, right?

Well, there is. To show you how you can create the optimal design, I’ve created an infographic that breaks down what you need to do.

Download a print friendly version of this infographic.

Click on the image below to see a larger view:

The Blueprint of an Optimal Blog Design

Click here to view an enlarged version of this infographic.

Conclusion

If you implement the advice provided in the infographic, you’ll see an increase in your readership. Trust me, it works. I’ve tested a lot of these design elements on Quick Sprout, and the tweaks helped me grow my readership to the size it is today.

So, how else can you optimize your blog design?

Embed This Image On Your Site (copy code below):

If you want to break through to real profits online, you need some serious firepower. For a limited time I’m sharing some select tips and tricks Amazon, Microsoft, NBC & Hewlett Packard paid thousands of dollars per hour for, FREE.
  • The step by step guide to monster traffic generation
  • The how-to guide for increasing conversions on your website
  • 7 Cashflow killers your analytics tools are hiding from you
     
 
100% privacy, I will never spam you!

Comments

  1. Thank you for being so specific Neil. I definitely plan to do some remodeling based on your advice.

    • Hey Sarah,
      you are having a article writing company(I have seen from the link, you have provided while commenting) So i would suggest you to write long comment 😉 People will read it and will definitely visit your website
      Maybe, some will become your clients 🙂 and you will get more work!
      Thanks!

    • Sarah/Nitin/Michael :

      Thanks for all your responses 🙂
      While long comments are great, short comments can also do a good job of conveying points. It’s all about being relevant and contextual. That’s all I really care about to be honest.

      Glad I could help, Sarah. Let me know if I can help along the way!

  2. Hey Neil,
    Thanks for sharing these tips to tweak my blog design in a effective way which will help to increase my blog readership too.
    I am definitely gonna try it, what to say, every piece of content i found on quick sprout is just awesome. One more thing i have to ask, will these design tweaks help us to attract more traffic from search engines? As I have to grow search engine traffic. Waiting for your reply. I’ll look forward for your reply and to share my thoughts after some time, after implementing these tips in my blog.
    Going to link this post, from my latest blog post. Really awesome piece of content
    Thanks for sharing
    ~Nitin Singh

    • Nitin,
      Thanks for the enthusiasm and support. It really means a lot when people find value from the posts.

      These designs tweaks will definitely help out in regards to making your site more user friendly/optimized. Ultimately, however, the design can only take you so far. Content matters most, so keep on blogging and keep me posted on your progress 🙂

  3. I hate to be “that guy,” but shouldn’t the font name Vedrana
    actually be Verdana.

    P.S.
    I LOVE receiving the benefit of other people’s testing. Thanks, Neil!

  4. Thanks for the post Neil, Here are some of my key Takeaways from the post:

    1. Optimal use of white-space

    2. Use of exit intent pop-ups

    Thanks that I feel could have been added to this guide:

    1. Adding a small widget about the blog author in the sidebar (like Neil does it) – people love to find out about the person behind the keyboard who wrote the content

    2. Avoid like-gating content parts using plugins like social-locker

    • Debjit,
      Thanks for condensing it down to the main points. Those are very valuable.
      As to your additional points, great adds! I definitely agree that personalizes the page and offering a bio on the author is important.

  5. Hey, great infographic Neil. Loved it. I especially loved the way you stressed the importance of great layout.

    Including only excerpts on homepage is very important. The blog excerpt should be a short as possible.

    Keeping images in excerpts, helps a lot in increasing CTR. I have decreased about 30% of the bounce rate on my blog homepage by including thumbnail images.

    I keep homepage with my 5 latest blog posts. Well by hearing the tip it seems that I need to increase the count.

    Coming to the font size, I am a great typography lover. I love to keep fonts larger. Content should be the main focus. I have also included readability widget to adjust font size for readers, that’s something called accessibility plugin.

    I can observe in my head map that clicks on this widget is more. So I am sure that font size matters a lot.

    The font I love the most are of Sans. Especially Roboto and Verdana. They are great.
    Using Serif for Headlines if of a great deal, it makes your headings stand out. Really loved this strategy.

    Indeed, exit intended boxes are great in terms of conversion rates. I personally use time and scroll based subscription pop-ups on my blog. Planning to offer Ebooks and reports.

    So I would finally like to include some tips, that I am following.
    1. Include accessibility widget, it’s a WordPress plugin that lets your readers to change the font size of your blog posts while reading.

    2. Use sticky widgets, they are widgets that remain intact even the user scrolls the page. By this readers of your blog will not be distracted.

    3. Make sure of blog formatting tags effectively. Bold, italics and underline act as speed breakers for speed readers.

    4. Include much space between lines and shorten paragraphs.

    5. If possible use clutter free reading environment button.

    Meanwhile great infographic, Neil. Shared and Pinterested it!!
    Have a great day ahead!

    Cheers,
    Akshay Hallur.

    • Akshay, thanks for the great in-depth analysis. It’s my assumption that you may have a designer/development background because you know so much.

      Thanks for adding the additional points, as well. I especially like points 4 & 5. I like simplicity so those really resonated with me. I look forward to hearing more from you!

  6. Fully agree with your points – I hate it when blogs look beautiful but are nearly unreadable and load looong on mobile! The blog is not just a piece of arts – normally it is supposed to be read and using most of these tips on my blog I can say that with a short form conversion is much better and a sidebar is a must, even more important than just big design

    • Victoria, thanks for the great feedback. It’s all a matter of personal preference. Some people like short form, and others long form. I try to go off the data I get from surveying and testing. I look forward to hearing more from you.

  7. WOW! Great infographic with tons of information and test results. I really love your statistics and your inforgraphics, Neil.

    Thanks

  8. Pablo Domingo Montesinos :

    Wow Neil, great infographics!!

    And supercomplete list of what to have in the design of a blog and how to have it.

    I’ll take the idea of offering something for free in the opt-in for subscribing.

    Thanks a lot
    Pablo

  9. What about best practices for line spacing? This is tied to both font size and white space, but worth addressing specifically, I think.

    M

    • Matt, if you look at the comment above by Askhay he goes into that. Something I should have addressed in this blog post 🙂

  10. Neil, thanks for the infographic.

    Interesting point is about where to place a sidebar. I’ve seen some recommendation that sidebar on the left increases opt-in conversions (if the opt-in form is on the left).

    Anyway, split tests can help us make a more facts-based opinion in each particular case depending on what a page is supposed to do (e.g. convert or engage).

    • Michael, great points!
      As I mentioned it’s all about testing. I have found that it works best for me the way I have it, however, others may find it works differently for them. At the end of the day you have to test to see what works best for you. Always a pleasure reading your comments 🙂

  11. Thanks for the info Neil. I would love to know where you get all of the research numbers. Do you mind sharing?

    Thanks,

    Randy

  12. Neil, you’ve opened my mind. I was thinking to get a cooler layout and improve my blog. you just solved the problem and made my day.

    thank you
    khurram

  13. I think someone mispelled verdana here, you say “vedrana font” in the ‘Use serif or sans serif based fonts’ section.

  14. Love your content as always, but I’m pretty tired of infographics.

  15. Hi Neil,

    What do you think of left column menus? I don’t like the right side simply because so many users have right column blindness.

    • Etoille, as mentioned above I would really go in and look to see what works best for you. I go off data that I have found via testing and surveying.

  16. What a great piece of information and Info-graphics. I was in search of perfect Font for my Blog and found solution.
    Thank you Neil.

  17. Hey Neil! Awesome infographic as always. I agree with almost everything, but maybe because I’m a designer myself, I couldn’t help but find a couple small mistakes on the “Optimal Font and Typeface” part:

    I think some of the information there might be outdated. For example: Lifehacker is currently using 38px for headlines and 15px for body copy.

    Smashing magazine is not only not using Verdana as a font (Font is set in Skolar Bold for Headings and Skolar Regular for Body), but they are using 32px for headlines and 20px for body copy.

    In my opinion, optimal heading font size lies between 24 and 36px, while optimal font size for body lies between 16px and 22px.

    Other than that, I fully agree with everything proposed here.

    Thank you for all this.

    • Mariano,
      I always value other opinions. It’s definitely true that what works for one site will not always work for other sites. In my experience, however, these types of fonts have worked best for me. There are always a lot of exceptions to the rule. That is why testing is vital. Thanks for the feedback 🙂

  18. Worth giving you my email – not done so easily nowadays.

    Thanks for this content! 🙂

  19. Great tips Neil. The tip with the white space I included already in my last few blog posts and I think it makes the post more readable.

  20. Hello Neil, your posts are really much impressive and is so valuable. I have got one personal question to ask you. I don’t know where to contact you personally.

  21. As usual, I love that you’ve done this research. It’s great advice for bloggers. I’ve just embedded it on my site. Thank you!

  22. Greg Strandberg :

    I love posts like this because it tells me what everyone else will be doing. That way I can do something completely different.

  23. Neil, I gotta ask you something about not adding the name field in the email form.

    Granted, you will have a higher sign up rate but without the name would not the emails lose that element of personalization? This might result in a decrease in open and click through rates

    • Bhaskar, I am glad you brought that up. It’s an honest concern. However, in my experience I have found that personalization is something that comes when you can provide value to another person. Also, the name will often times be part of their email.

  24. Great Read…specially about keeping the number of excerpts between 5 to 20. Cheers!

  25. Hi Neil,

    Amazing infographic again! It is really helpful to get good attractive blog design. I will definitely keep in mind this while redesigning my blog.

    Thanks for sharing with us Neil.

    Have a lovely and enjoyable weekend ahead!

  26. This was perfectly timed, Neil. I was just about to commence work on the design of my new business blog when your email came through.

    Just as a bit of feedback, i think the design of this infographic is one of your better ones. I like the fact that it is quite linear (not too much left to right content) and the layout is really easy to follow – good use of whitespace.

    Keep up the great work.

    • Tom, thanks for the feedback. It’s always good to hear that I am providing value. I think white space is an essential element most people overlook.

  27. Hey Neil,
    Timely, info…many thanks for your excellent analysis and info…
    Any ideas on WP themes that you would recommend…
    Dushan

  28. Thank you for the great article, but techcrunch is not using Verdana either. I haven’t seen websites with Verdana for a while, so I am wondering what the top font is. These days most of the websites are using nice webfonts anyway, so there are not too many websites left with the old-school fonts like Verdana, Arial etc. Oh, and zenhabits.net is not using Lucida either.

    I am wondering what went wrong in the graphic.

    However, still a lot of great information in the infographic. Thank you!

    • Karsten, everything on the infographic is suggestive not definitive. I always encourage people to test things out to see what works best. With that being said there will be exceptions to the rules based on a variety of factors. Glad you found it helpful aside from that!

  29. For some reason, I can rarel view your infographics on my iPad mini, especially right after they are first published. I wonder why that is?

    Thanks for all your hard work, I enjoy reading your blog and learn a lot from you. Thanks for all you are doing!

  30. Hi Neil,

    You probably do not need to publish this, spotted a typo in your content above, I think the font should be Verdana, you have Vedrana,

    Cheers

    PS I like the stuff you publish

  31. Yeah,it’s simple tips and very useful gr8 work by MR Patel…..

  32. Hi Neil, Thanks for the great post with some really good points laid down. I really appreciate the information you keep providing which is quite productive. Thanks!

  33. Thanks Neil,

    Very helpful advice, going to up my font size and add more snippets to home page.

    Awesome!

  34. Thanks. its a great infographics. Really helpful. Thanks Neil.

  35. Hi Neil, Thanks for this comprehensive list. The only other think that I can think of is to make sure the colour of any links are different to the rest of the site. I’ve seen a lot of websites and blogs where you can’t differentiate between links and regular text, which can get really annoying. I think the different link colour also helps break-up the content.

    • Niall, great point. I think contrast makes a big difference. Being able to differentiate certain elements makes a big difference.

  36. Hi Neil Sir,

    I believe having infographic post is much better than reading a post with only text and image.Cause they are so common and backdated type.Going through an awesome infographic always encourage a reader to take it more carefully.So thanks again for producing such an awesome infographic with lots of useful information.

    Regards

    Debarpan

    • Debarpan, glad you find these infographics helpful. Some people are visual learners so it definitely helps to have infographics, rather than text, for them. I try to mix it up the best I can!

      • As per this fast growing world, people have less time to spend on So rather than text articles infographics,videos and pictures are morst useful..As they are more interesting and time saving too. 🙂

  37. Interesting infographic. All my blogs are in compliance. I am happy!

    However, I have my own doubts about exit intent popup. I have tried it but it was not very successful. There wasn’t any significant increase in sign ups over a period of 4 months.

    • Lalit, glad you are on the right track. I would suggest testing out different variations of the popup to see what works best. You should also try to find the best solution.

  38. Hi Neil,
    I noticed that you use infographics more often now. Please bear in mind that on mobile it’s soooo inconvenient to wait for the image to load, which probably also take a lot of traffic / battery.

    I love your content, just maybe reconsider infographics strategy. Although if overall this type of content brings you more visitors and followers, don’t listen to me and keep doing what you’re doing 🙂

    • Povilas, thanks for the feedback. I will definitely keep that in mind moving forward. I look forward to hearing much more from you.

  39. very elaborate

  40. Neil,

    I’d have to disagree with this article. I’ve never believed that having the same font as everyone else and doing what is popular to be the way towards growing your audience. You’ll just look the same as the 50 million other blogs on your topic.

    • Freddie, you bring up a great point. I am not encouraging everyone to do the same, rather I am encouraging them to look at works for me and try to pick and choose different solutions that may work for them. It’s always about customizing and going off empirical data. Thanks for the feedback!

  41. I was sent a link to this article and I’m glad to have landed on this genuinely useful information. Thank you Neil! I’m keen to see what happens when the Neil’s tips are implemented.

  42. Hey Neil,
    Gr8 post and I liked it for implementing it for my blog. I hope it will do for my blog as well. Thanks or sharing these small but important things ,,, generally we forget while managing our blogs.

  43. Great info-graphic and i have already implemented them on my site. Thanks for the great share.

  44. “Keep the design centered width between 951px to 1000px”
    RUBBISH!
    Use an elastic layout that works with ALL screen sizes. Fixed width layouts are for people who can’t code html properly.

  45. Great post Neil, already made my site responsive. now thinking to tweak the design little bit.

  46. This graphic is invaluable. Thanks for giving it away for free! Made some tweaks and everything is looking great. Thanks Neil!

  47. Chintan Goswami :

    Great article Neil! We’ve used a lot of pointers from your post to refine our b2b blog (blog.travelcarma.com)

    It’s amazing how seemingly little things are the font size and use of whitespace can make significant difference to the readability and performance of a blog!

    Regards,
    Chintan

    • Chintan, simplicity is key — and sometimes the small things make all the difference 😉

    • Chintan, glad you liked it.

      The smallest things can have the most significant impact — looking forward to hearing much more from you.

  48. Saransh Kataria :

    Glad to see my site complies with all the points mentioned here. Thanks for a great infographic Neil. The information about font size affecting readership was quite fascinating.
    And on one end you say “Keep the design centered width between 951px to 1000px”, and on the other you suggest having a responsive layout, that point has created some confusion. Could you elaborate?

  49. If some one wants to be updated with most up-to-date technologies therefore he must be pay a quick isit this
    website and be up to date all the time.

    • The internet is always changing. The rewards can be high, but its true that you’ll need constantly maintain and evolve with it.

  50. Thanks for the info Neil. I would love to know where you get all of the research numbers. Do you mind sharing?

    Thanks,

  51. I hate to be “that guy,” but shouldn’t the font name Vedrana
    actually be Verdana.

    P.S.
    I LOVE receiving the benefit of other people’s testing. Thanks,

  52. What about best practices for line spacing? This is tied to both font size and white space, but worth addressing specifically, I think.

    • That I have to do some more research… but usually enough to make things readable and easy on these eyes. And not too much where your page just keeps scrolling.

Speak Your Mind

*