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.
Table of Contents
- What does the user wants from a blog post ?
- What your business needs from a blog
- Blog, resources, guides or articles ?
- Blog list layouts
- Blog post layout designs
- Blog featured image
- Zoom in part of image
- Best content
- Evergreen content
- Relevant content
- Post title
- First sentence
- Table of content
- Jump to links
- Legible fonts and typology
- Use subheadings
- Bullets, numbers and tables
- Make it shareable
- Make an offer with lead magnet
- Add author profile
- Right hand column for desktop
- Related posts
- WordPress blog themes
- Elementor single post templates
- Webflow blog examples
- Blog layout and design infographic
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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 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 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.
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.
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.
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
- Remove posts with no traffic or no links
- Combine a post with a similar post and 301 redirect one to the other
- Improve the content of existing posts
- 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.
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.
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.
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.
The title is also used to communicate the page when it’s shared on social channels such as Facebook and Twitter.
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.
Always include your main keyword or phrase in the first sentence or paragraph of your post.
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.
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.
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.
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.
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
There’s also an seo benefits to using these lists when google scrape web pages and display that content in their featured content.
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.
Where possible add a relevant video to a blog post to keep the user engaged on your post for longer.
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.
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.
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.
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.
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 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 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.
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.