7 Blog Layout Best Practices to Use in 2018

by Christina Hooper on March 6, 2020
in General

I'm going to show you some simple layout and style tweaks that you can implement on your blog to keep your visitors around longer and coming back for more.

Your business blog is an essential tool for bringing new visitors to your website.  They have questions and their quest for answers brings them to your pages.

If you've already discovered the power of blogging for relationship building, but you aren't satisfied with the results that you're currently getting, then you've landed in the right place.

No matter how good your content is, a poor layout can turn away the future customers that you're trying so hard to attract.  So follow these tweaks to fix your blog.

Blog Layout Best Practices


Use White Space

Back when print was the primary form of advertisement, white space was considered wasted space.  Prints were costly to produce and costly to get into the hands of consumers.  You didn't leave empty space that could be filled.

However, when it comes to your blog, white space is necessary.

  • It makes the text on your page easier to read.  When the words and letters are too close together, everything blends into a big wall of text.  By spacing the elements out, you break it up and make it easier to read and consume.
  • It makes your brand look more polished and professional.  If you visit the blogs of name-brand companies, you will typically find designs that are not cluttered.  The fonts are easy to read and everything is spaced well.  This makes your brand look more expensive.


Card-Based Layouts

Content-focused businesses like yours are putting out a lot of content to attract more visitors.  Whether you're just added a few new articles each month, or new articles every day, your blog could end up with a lot of new content by the end of the year.

It's important to organize your content in a way that makes it easy for someone to skim your blog and find the articles that they want.  

That's where Card-Based Layouts come in.  

All the big players in the content game are utilizing cards to display massive amounts of information in an easy to skim and digest layout.

blog layouts twitter
blog layouts google

The important thing to remember here is to keep your layouts and information simple.

  • Include an image and try to keep the sizes consistent
  • List the blog title, and style the font in a way that stands out - like a different font, or bold
  • If there's room, show the blog author and their photo - this helps to build a relationship with the authors so people that like their content will come back more regularly for more
  • Include the post published date so that people know the content is current
  • Show an excerpt or teaser description so visitors can determine if the content will be helpful to their particular need and question
  • Put a link for them to click on to view the whole article


Font Families & Sizes

People coming to your blog articles are trying to read and learn.  It's important that you use fonts that are easy to read and size the fonts large enough to be easily visible even if your visitor doesn't have 20/20 vision.

Fancy fonts like these may look cool, but they aren't pleasant to read in long sentences or paragraphs.

Allura font is fancy
Cookie is another pretty script font

Sacramento is neat looking
Homemade Apple is delicious

For your body font (which is what this paragraph is that you're currently reading), your font size will generally be between 16px and 21px.  Some fonts will need to be on the larger size to be easily read, while others will be fine at smaller sizes.

For headings (like the ones next to each of the numbers in this list), I would suggest anywhere from 22px up to 48px.  

For example, H1 Headings might be 48px where H6 would be 22px.  Again - your font choice will greatly influence this and you will need to adjust accordingly.

Some sites that have done a great job with their typography choices and sizes are:

1. Smashing Magazine

If you want a deeper dive into typography for websites, then I would suggest checking out this article.


Invite Repeat Visits

Most of the people that come to your site won't buy anything on their first visit.  This is why your article content and layout should be focused on providing value and building a relationship instead of pushing a sale.

Also - keep in mind that landing pages and conversion offers are a form of sale.  People purchase the additional content with their contact information instead of a credit card, but for the purposes of attracting visitors and keeping them coming back, you can think of those pages almost the same way as you would think of asking for someone's credit card information.

So how do you invite them to come back without scaring them away?

1.  Invite them to subscribe to your newsletter.  If this is their first visit and they found value in the content that you provided, then they may be interested in reading more.

Segmentation and series articles are a great way to encourage this.  If your article is part 1 of 3, then it makes sense for them to subscribe to get notified when the additional articles publish.  This doesn't work for subscribers after the new content is published, but a good alternative is to have the second and thirds parts available to subscribers only so they have an incentive to subscribe.

2.  Ask them to follow you on a social channel.  If they follow you on Facebook, Twitter, or other social channels, then they are more likely to be notified when you publish new content and therefore more likely to return back to your site later.

3. Use a lead magnet / landing page offer. Make sure you think about your audience and the type of article that you've written with this tactic.  If your audience includes the type of people that aren't overly concerned with sharing their contact info then this can work well.

Even if they aren't stingy with their details, you still need to provide a decent incentive for them convert on your landing page after reading your article.  The strongest tactic to use here is alignment. Align the offer with the same focus as the article so that someone will see it as a content upgrade to get the offer after reading the article.


Stock Photos

People are constantly telling you that you need to include more images in your content.  Images convey complex concepts in a way that's easier to understand.  People remember information contained in images better, longer, and easier than information they read in text. You get my point.

But so many stock photos out there are obviously fake and ridiculous looking. Try doing an image search for happy woman eating salad and you'll see exactly what I mean.

So what's the alternative?

There are more and more people suggesting that it would be better to take your own photos.  With the price of cameras being so cheap and the quality of cell phone cameras getting better with every generation, it makes sense to at consider it.

If you are going to use stock photos, then keep a few simple rules in mind:

  1. Consider your brand color scheme and try to find photos that match your brand.  If you can't, then consider at least using a tool like Canva to tint the photo slightly to make it fit your brand better.
  2. Look for photos that show people in more natural positions.  In real life, it's rare to see someone blissfully smiling at the camera and posed for the picture.
  3. Avoid overly "creative" photos that are not realistic.  Sometimes you can be stretching too far to get an image that conveys your concept.  A photo should attract attention, but it's not meant to explain the entire concept.


Avoid Clutter

If you are monetizing your blog - either through ads or calls-to-action - then it can be really easy to cram everything you think might get someone's attention onto the page.

You hope that by providing a lot of options they'll take you up on at least one of them and you'll get that conversion.  The problem is that by providing so many options, you've actually made it harder on them. 

When there is too much to look at, they start avoiding some areas of your site and might actually miss the action that you want them to take.

So instead, focus on aligning each article with a single goal.  And focus each article on a particular need someone has and help them solve it.  Make sure that your goal and their need line up and you'll get more people to convert through your funnel.


Value Subheadings

The word is out that short content doesn't perform in search engines and doesn't present the value to users that it used to.  So more and more people are producing long-form content so they don't lose their search rank.

That doesn't mean that people are willing to read the whole page of content that you spent so much time creating.  

It's more likely that they have a specific question in their mind that they want to find an answer to.  They will hit your page and skim quickly to see if you have the answer.

Headings and subheadings are a great way to get that information across quickly.  For example, you can look at how I've used headings in this article.

  • The title of this article is at the top of the page and uses an H1 tag.  The font is bigger and bolder so it's easy to tell that it's important.
  • Below that is an H2 heading that tells you immediately what this article is about and why you should care.
  • Then each of the list items on this page utilize H3 headings.  They break up the content into sections to get attention and make it easier to skim.

Key Takeaways

The biggest thing I want you to take from this article is that your visitor's experience is more important than what you think looks good or is pretty or is fancy enough to represent you.

You have to put their needs first.

Make sure the text is easy to read with white space, legible fonts, and fonts sized to make them easy to see without the user having to zoom in.  

Choose photos that are believable and represent your brand so they can build a connection and trust the information you're sharing.  Don't bury them in ads and clutter.  

Finally, give them a reason to come back.

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}

Do you want a reliable way to find the right customers for your business?

I just have a quick question.