Platonik

Guide to Blog Layout & Design for better leads & conversions

Blog layouts and design are often seen as an afterthought by many web designers, developers and businesses.

Very little consideration is given to the user experience or the business goal.

When, in fact, blog content should drive about 80% of your organic traffic.

I’ll outline my guide to blog layout and design to help drive more leads and conversions.

What does the user wants from a blog post ?

People visit blog posts from Google or other channels for a variety reasons such as :

  • Answer my question
  • Solve my problem
  • Educate me
  • Entertain me
  • Inspire me
  • Persuade or convince me
  • Help me choose what to buy

Blog posts are the warm up act; product or service are the main act that do the selling.

Back To Top

What your business needs from a blog

I sell keyword research to clients and web agencies and have analysed over 100,000 websites.

A common denominator is the 80/20 SEO Rule.

80% of most websites traffic come from 20% of their web pages.

And most of those 20% of pages are not their service or product pages.

I have invested thousands of hours in research and content creation and I don’t do it for fun or to be vain.

I figured the best way to get a steady stream of ongoing traffic was to write great content around what people are searching for.

Then I figured if I could get their email address maybe they could be a customer in the future.

That’s why I blog; purely business reasons.

Download: Guide to Blog Layouts & Design

Back To Top

Blog, resources, guides or articles ?

Should you even name blog posts a blog ?

In some professional service industries blog posts maybe better phrased as resources, guides or articles.

Back To Top

Blog list layouts

There are, to my knowledge, 5 blog list layout designs.

List blog layout

Ahrefs use a very simple centred list layout to display all their blog lists.

A read more or learn more link would be a useful addition.

List blog layout design example image

Simple box layout

Big Commerce use a simple box layout with an image on one side of the box and the title and read more link on the other side.

They have a subscribe link at the very top of their blog page too which is a good touch.

Simple box layout for blog design image

Combination layout

Hello Sign use a combination layout; the top blog post is a company welcome post that’s much bigger than other post listings.

Then below there is a 3 column row with 2 blog posts and a link list.

Underneath is 3 columns linking to 3 posts.

A good layout to break up the monotony of a list of boxes.

Combination blog layout design hellosign

Slider layout

A list of blog posts in a slideshow layout isn’t very common but ideal for those website that have a lot blog of content.

slider blog list layout design by gridlove wordpress theme

Masonry layout

A masonry layout shows a list of blog posts in different widths and heights.

Sort of like uneven tiles on a floor.

You don’t have much control over the layout; wise choice if you like design left to random.

masonry blog list layout design by gridlove mekshq wordpress theme

Right sidebar

Shopify would appear to include a combination layout with the large featured blog post at the top.

However this is essentially a 3 column layout with the furthest right column used as a sidebar to display text list to relevant posts and a search box.

right sidebar blog list design layout by shopify
Download: Guide to Blog Layouts & Design

Back To Top

Blog post layout designs

There are 4 blog post layout designs; one column full width, 2 column right hand bar, 2 column left hand bar and 2 column sticky bar.

Here are some examples designs of each.

One column full width

Glen at Detailed.com uses the full width of one column to display the detailed blog post.

There are large left and right margins so that reading on a 27 inc Mac screen is good as well as a mobile read.

One column full width blog post design layout

From The Future Agency website also uses a full width one column blog detail layout.

Although if you’re viewing on a large screen the column left aligns to show the social share buttons.

One column full width blog post design from FTF Agency

2 column right hand bar

This is a blog post from Shopify where the main content is in the 2/3rds left column and the search, subscribe and featured blog posts in the 1/3rd right hand column.

2 column right hand bar blog post design by shopify

2 column left hand bar

2 column left hand bars are typically used for online shop layouts and you don’t see them utilised very much for blog posts.

2 column left hand bar blog post design

2 column sticky bar

I use a 2 column right sided sticky bar layout for my blog posts.

This enables me to display 2 call to action banner at all times when a visitor is reading a long form article.

2 column sticky bar blog post design layout
Download: Guide to Blog Layouts & Design

Back To Top

Blog featured image

The featured images on my blog posts take up 50% of the screen space on a mobile device.

Thankfully, users can still see the page title and a small call to action.

The featured image, when included and done well, can also express not just your article’s answer but it can also communicate your brand.

The featured image is used extensively in sharing content socially so it would be a big miss not to use featured blog images.

Back To Top

Zoom in part of image

I’ve tried really hard to zoom into details parts of images when adding them to a blog post.

My single blog post layout is 770 pixels wide when viewed on a desktop device.

Then there’s a left and right margin.

So that means my images only need to be around 620 pixels wide.

In the past I’d take screenshot that were poor to read on desktop devices because I didn’t crop or focus on an area of an image.

And a full page screenshot image displayed on a mobile device was just a waste of space.

Below I’ve zoomed in one aspect of a screenshot with an arrow pointing to it to illustrate my point.

Download: Guide to Blog Layouts & Design

Back To Top

Best content

Give your website a spring clean and get rid of those blog posts that don’t generate any value.

4 ways to spring clean your blog posts

  1. Remove posts with no traffic or no links
  2. Combine a post with a similar post and 301 redirect one to the other
  3. Improve the content of existing posts
  4. Add a newly researched blog post

No sense in trying to maintain hundreds of blog posts when only 20% generate traffic from the search engines.

Back To Top

Evergreen content

Content that stands the test of time is evergreen.

Whilst I’m no accountant I’ll harbour a guess that doing annual accounts or a profit and loss accounts haven’t changed much in 30 years.

In marketing, a SWOT analysis is done the same way we did it at university in 1988.

So you should have researched and created evergreen content.

Back To Top

Relevant content

If you have content that references last year or the year before is it really relevant any more ?

I made a cheeky tweet reply to a web agency who kept tweeting what is SEO and referenced their guide to SEO in 2015.

They replied asking me if the fundamentals have changed.

Many aspects of the topic have changed; I pointed out the areas of their blog post that could be updated and made relevant for this year.

Download: Guide to Blog Layouts & Design

Back To Top

Post title

Your blog post title, the top line that appears in the search results, should be persuasively written to encourage searchers to click and read your article or post.

Post title screenshot

The title is also used to communicate the page when it’s shared on social channels such as Facebook and Twitter.

Post title shared on facebook screenshot

Back To Top

Header

The header, normally the first line on a post, is usually the same sentence as the page title marked up in an H1 format.

The header reinforces to the visitor it is the page they expected when they clicked your page title link.

blog post header screenshot

Back To Top

First sentence

Always include your main keyword or phrase in the first sentence or paragraph of your post.

Back To Top

Table of content

With Google favouring longer in depth formatted blog posts it’s good practice to include a table of contents at the top of your post.

table of contents wordpress screenshot

Back To Top

Jump to links

There’s great seo value using a table of content and jump to links on a post.

These links tend to get indexed allowing Google to take the user to the exact section of your post.

jump to links in serps screenshot
Download: Guide to Blog Layouts & Design

Back To Top

Legible fonts and typology

A huge mistake I see is people writing blog posts as if they were writing a book.

You need large fonts, short sentences and paragraphs, good line spacing and use of subheadings.

Use subheadings

If you use Google Docs or Word you can format an article any H1 to H6 heading styles.

In my blog posts I typically lay out sections using h2 headers for the main sections.

Then within each section I break those up with h3 sub headers, images, gifs and bullet and number lists.

how to use subheaders h2 and h3 screenshot

Back To Top

Bullets, numbers and tables

Rather than writing a paragraph with 6 or 7 squashed up sentences simply break it up with bullets or numbered lists.

Much easier for the user to read.

  • Bullet 1
  • Bullet 2
  • Bullet 3
BrandTrafficFollowers
WordPress100m10m
Shopify50m5m
  1. One
  2. Two
  3. Three

There’s also an seo benefits to using these lists when google scrape web pages and display that content in their featured content.

Back To Top

Make it shareable

I only recently added Facebook, Twitter and LinkedIn share buttons to my blog posts.

Share buttons are not for the user but for me to promote my posts easily.

But if users elect to share that’s a bonus.

Back To Top

Video

Where possible add a relevant video to a blog post to keep the user engaged on your post for longer.

Back To Top

Gif

Recently I’ve added GIFs, short animated images, to some blog post to demonstrate a point faster than using a series of images.

Snagit is a great tool for creating GIFs.

Download: Guide to Blog Layouts & Design

Back To Top

Make an offer with lead magnet

I write blog posts to attract and convert readers into email list subscribers.

To encourage readers to subscribe I use a lead magnet making an offer like this one below.

When you click “click here” there’s a form asking you to “enter your email address to download this guide”.

Really simple but it works well.

Back To Top

Add author profile

Ideally you should include the author of each post in your blog posts.

Good to put a face to a name by including a photograph.

In the last major Google update many seo experts believing that medical or professional service websites were affected by the author’s qualifications.

So if your medical articles weren’t written by a proven medical expert you’d see your pages and rankings decline in Google.

Back To Top

Right hand column for desktop

I use the popular 2 column blog post layout design.

The right hand column shows category related and recent posts.

This helps to direct the reader to other useful content.

It’s also great functionality for reducing bounce rates.

I have a sticky sidebar box that promotes my products and services.

Right hand column blog post design for desktop screenshot

Back To Top

Related posts

At the foot and end of each blog post it’s generally best practice to show related posts.

Again this serves to keep the reader engaged on your websites.

wordpress related posts screenshot
Download: Guide to Blog Layouts & Design

Back To Top

WordPress blog themes

I’m only going to recommend the themes I’ve personally used.

Elementor single post templates

The great thing about Elementor is that you can custom design your blog from scratch or using some of their pre built templates.

Although you should have some design or front end experience.

I’ll stick to the built in blog theme from my WordPress theme; it offers a variety of options.

Webflow blog examples

My front end designer and I work on 3 Webflow designed websites.

Here’s an example of the blog layouts we designed.

webflow blog post design example

Webflow is an ideal CMS for a web designer or developer as you don’t need to invest too heavily in hand coding.

However, for us non designers, I’d stay clear of Webflow as you’ll sacrifice pretty pictures over the speed of content creation using WordPress blog CMS.

webflow blog list design example
Download: Guide to Blog Layouts & Design

Don’ts

There are some features you don’t want to include on your blog posts.

Don’t make me accept your privacy every time

Who is  running your website now ?

The legal department or the marketing department?

I’m sick of experiencing huge banners asking me to accept privacy terms.

A simple message and accept button across the bottom fold of the screen is suffice.

Don’t interrupt me before I start reading

Respect the user and let her read your post for a few minutes before slapping a welcome matt or banner over the page.

Don’t interrupt me when I’m reading

I’m reading up and down an article and get this bloody message interrupting me.

OK maybe I’m a hypocrite here as I have exit intent messages that appear when you’re going to leave one of my pages.

Messengers and chatbot

Just because you can stick a button in the bottom right corner to chat with you doesn’t mean it’s useful.

By all means adds chatbox on my second or subsequent visit but don’t scare me away on my first visit.

Remove your push notifications

Push notifications are alert buttons that appear on the bar of your browser.

Again they annoy users and denigrate the website experience.

Remove push notifications from your website.

Download: Guide to Blog Layouts & Design

Back To Top

Blog layout and design infographic

Blog layout and design infographic

Back To Top

Add comment

Learn about SEO Box