36 Comments
no. 5

5 Easy Tips to Improve Every Blog Design

In most cases, changing the entirety of a blog’s design can be too overwhelming and expensive.

If you’re already happy with your blog’s layout and artistry, but still feel like it needs some additional refining, then this post will illustrate your options.

I have put together five tips that can be applied to your current design, significantly improving its appeal.

1. Enlarge headings

Most people will scan a blog’s content and read only the blog post subheadings. You can easily streamline this process.

Make sure your headings and subheadings are large and clear. Remember the correct hierarchy – H2 is bigger than H3, etc.

Not only will your blog posts be easier to read, but they will also appear more organized and professional.

See the example below:

On the left, you can clearly spot the subheadings which might not be so obvious in the example on the right.

2. Increase the contrast

This is one of the most common blog design mistakes: a light gray body text may look nice aesthetically but it can be a marked problem for many people. Not only will persons with poor vision find the text difficult to read, but also individuals using small mobile screens and low quality monitors.

Try to make a clear contrast between the background and the text. Doing so will make your blog easier to read and your content look cleaner.

See the example below:

The same content with higher contrast on the left and lower contrast on the right. You can easily see which one is easier to read. View this using your mobile device and the difference may be even more noticable..

3. Add more space

Don’t be afraid of whitespace! First, make sure you have optimal spacing between the main content and the edges of the page. There should be at least 20 pixels of space. I’ve been using 30-40 pixels recently as a standard page inner spacing.

This provides a clear separation between the text and other elements. It will also make the text lines shorter, which is easier to read.

Also, don’t forget about the “micro whitespace” within your blog content:

  • around the images (at least 20 pixels)
  • before and after the block quotes
  • after the paragraphs (the ‘margin-bottom’ can be same as your body text ‘line-height’ to keep a nice text flow)
  • before the subheadings

Look at this simple example:

The extra inner padding adds a visual margin around the content.


I think I will repeat “more white space” frequently in my blog. Examining the whitespace can tell you a lot about the designer.

4. Eliminate distractions

Try reading a book while someone is flashing a light in your eyes. The experience is similar to reading text posted on a page full of flash banners.

Choose advertisers who don’t use ultra flashy banners and try to reduce the number of graphical elements around your content. These are very distracting to readers.

Social media sharing buttons are also important. These can become irritating, particularly if you’re trying to force people to share your content in an overbearing manner.

Keep the social sharing buttons in well known places — at the top or at the bottom of the post — so everyone will know where to go to share it.

5. Make your blog easy to navigate

First, make sure you have a simple main blog navigation menu which is easily accessible. For instance, place the navigation menu at the top of the website. Your location on the website should also be obvious by highlighting the current page.

If you use many categories and sub-categories, using breadcrumbs can be very helpful.

A list of categories in the sidebar, or internal blog post links, are also a part of the blog navigation. Make sure your links look clickable. Do this easily by underlining the clickable text. You can also highlight links in a different color or add an inline background (as shown on my blog).

Summary

As you can see, there is no sorcery involved in a solid blog design. It’s all about keeping everything clean, well-organized, intuitive and user-friendly.

This is the age when we can do nearly everything on the web. There are very few technological boundaries. You can make flying pink cows (really?), with flashing buttons and fireworks in the background.

However, we typically won’t do that. We care about our readers and want to create a fantastic and pleasurable user experience. Essentially, less is more.

Written by Rafal Tomal.

Learn More About Web Design

Sign Up and Get Free Email Updates

Free content. Unsubscribe at any time. No spam.

Comments

  1. Hi Rafal
    5 useful points, I particularly like “Eliminate distractions”
    Blocks of bright colour can distract, but moving or flashing objects just drive me mad.. but people still use them!

    Also got to mention the popup box that some sites use… what a turn off.

    Spot on information as ever.

    • Keith,
      I agree on the popup boxes. Good point!

      • I agree because pop ups annoy me as well but is that more of a personal preference? Maybe pop ups do better in different niches? I ask because Neil Patel at QuickSprout uses quite a few pop ups on his blog and I’m fairly certain that he knows what hes doing.

        Whats your thoughts on his uses of it?

  2. My golden rule is to keep things as simple as possible. I’m a huge fan of “less is more,” and the design tips you mention provide solid examples.

    I’d say #4 is the most commonly overlooked, but the one design feature folks would benefit from the most. Great looking site, Rafal!

  3. Thank Rafal
    To be honest I have certain design errors mainly in terms of distractions, errors that I will correct based on this advices

  4. I agree. Infact I tell many times on twitter that people should increase their heading and font size.

    PS: I see that your site disagree with point pt 2 :P
    (just kidding, I know the design part )

    • Ankur,
      I don’t use black text on white background but the contrast is still pretty high. You may didn’t realize it but I’ve lightened up my content background twice since I launched this site. Then, I took a note about that change and used it later in this article.

      I like the contrast and big bold headings on your site! Well done :)

  5. Thanks for the solid advice Rafal. I love the fact that you spent the time creating examples to illustrate your points too. I’m subscribing coz I can’t wait for more articles like this :)

    • Thanks David!
      I understand you’re talking about the horse at the top ;)

      I found illustrating the examples much easier than writing about it. I definitely want to go more in this direction in my blog.

      Thanks for subscribing!

  6. Hi Rafal,

    Nice and useful tips. I guess I have to work on my subheadings size. I really don’t have any idea, maybe some suggestion.
    Thanks

  7. I’d be careful about making the headings too large. As a matter of fact, I believe the headings here are too large.

    Why?

    Studies show that using extremely large fonts encourages people to scan your content as opposed to actually reading it.

    :-)

    • Hi Derek,
      this is a very interesting comment. You’re probably right because too big headings can be just another distraction.

      I should say to make the subheadings bolder and relatively bigger than the body text.

      Thanks for pointing this out!

  8. Hi Rafal,

    I’ve followed your advice and my site is indeed better now, thank you! This is my question:
    When looking at this page’s source code, I’ve found you’re using a tag for your first paragraphs and I want to know if this is semantically correct or if it would be better to use some class instead.
    Cheers!

  9. The comment form took away the tag I entered. It is the H5 tag.

  10. Rafal, great post. We’re a marketing agency and always moving towards more UX centered designs. We find sites and blogs that are cleaner, more vibrant not only perform better from a user perspective but also in search naturally due to the increase in traffic, search benefit resulting from H1s over more conservative H5s/H6s. It’s fun to see texture move out and bold continue forward. Ha! In writing that I noticed an example of this in William’s post above.

    – Cheers and thanks for your creativity ;)

  11. “Try reading a book while someone is flashing a light in your eyes. The experience is similar to reading text posted on a page full of flash banners.”
    What a great analogy! I’ve always had issues with overbearing ads that add noise and only cheapen a site (90% of content sites out there). That’s why it’s so refreshing to see sites like Copyblogger that get this. I suppose that’s the reason there are Carbon Ads and other ad networks that adhere to this philosophy. Great read BTW.

  12. Hey Rafal: Great post with some really nice illustrations. Question: It does not seem possible to doing any embolding of the article heading at wordpress.com or am I missing something?

  13. thanks for this advice. It’s hard to not clutter up my blog. Every week I see something cool that I think should be added.

  14. Right on, could not agree more. I love how you have blured out the “Enlarge headings” picture. That’s actually one of the tests I do and I was impressed to see it here :) I got to admit I love your taste.

    Another test I do is convert everything to black and white and invert the colors, this helps seeing what unconscious eye scans.

  15. This is a very well written ( and illustrated ) post. What I like most is that you have focused on the 5 items that will make a huge impact. I will admit that from time to time I get a little overwhelmed in trying to decide just want to put into a blog page design. This is helpful.
    Thanks
    Ed

  16. Great article, Rafal! Really useful advices! I wish everyone knows these rules and makes cool websites!

  17. its benificial for blog and a great advice for good posting.

  18. Yo Rafal,

    I’m really glad to see someone pointing out simple fixes like this for people to implement on their sites. The less seizure-causing horror shows floating around on the web the better it is for everyone. Keep it up!

  19. I personally feel that a fixed top menu which is used on your blog and I have seen on several modern websites lately is a bit annoying at times, i don’t like to see the navigation menu that thick scrolling along with the page.

Trackbacks

  1. [...] decir, tienes que diseñar un esquema que guie la vista de tu lector para que vaya encontrando de manera natural los elementos que a ti te interesa que vea. De hecho, [...]

  2. [...] is an example from Rafal Tomal which reveals why headings are important in content. Even when blurred, the content on the left [...]

  3. […] White space makes your text more comprehensible. Rafal Tomal shows you how to reduce distractions and increase white space. […]

  4. […] of my favorite blog posts from Rafal has to be 5 Tips to Improve Any Blog Design, an article I’ve linked to literally dozens of times thanks to super helpful images like […]

  5. […] of my favorite blog posts from Rafal has to be 5 Tips to Improve Any Blog Design, an article I’ve linked to literally dozens of times thanks to super helpful images like […]

  6. […] of my favorite blog posts from Rafal has to be 5 Tips to Improve Any Blog Design, an article I’ve linked to literally dozens of times thanks to super helpful images like these, […]

  7. […] design. It’s all about keeping everything clean, well-organized, intuitive and user-friendly. http://rafaltomal.com/5-easy-tips-to-improve-every-blog-design/ (Blog de Rafal […]

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>