Blog design that sells!

Read time: 5 minutes

Good blog design gets visitors.

Great blog design converts them.

By conversion, I am not referring to sales or leads only.

By conversion I also mean visitor dropping their email ID, subscribing to your notification, creating an account on your website, and downloading your app.

Great blog design also gets- a higher average time spent on the website, lower bounce rate, and higher page value.

What Is Blog Design?

Blog Design is the practice of optimizing a blog’s look, feel, branding, readability and functionality in order to maximize visitors, readership and conversions.

Why Is Blog Design Important?

According to the latest numbers from WordPress, 70 million blog posts are published every month.

So for your content to get noticed, yes, you need to publish high-quality content.

But that content also needs to LOOK really good.

Best Practices for designing a blog page:

Make navigation super easy:

Having a breadcrumb navigation helps both search engines and users to understand where they exactly are on your blog map

Set the time expectation to read the entire blog:

Google is already testing this feature where blogs explicitly mention the time it would take for an average user to read your blog.

Hence mentioning the time just below your blog headline could be an advantage considering not many blog websites are using this feature yet.

How to calculate the time to read a blog?

On average, a human reads 238 words/minute. So you can divide the total words in your blog by 238 to get approximate time to read a blog.

Make user’s life easy- Table of contents:

Adding a table of contents has a dual advantage:

First, it makes the life of your user easy to find the information that they are really looking for.

Remember, we live in a zero-click world today, which means people want information at minimal to zero clicks and blogs not adjusting to this trend will struggle to create a delightful user experience.

Secondly, a table of contents increases your chances to rank for featured snippet results.

Bullet points is one of the preferred section by google to rank featured snippet, giving you more real estate and search result page and hence more clicks.

To refresh your memory, featured snippet results look like this on the Google search result page:

Contextual banners for leads/sales

Mostly, people who come to your blog are seeking a piece of information, so their probability to buy your product or service from your blog is relatively less.

But that doesn’t mean you should not tell them about your product or services.

In between your blog text, add action-oriented contextual banners.

Ensure you are tracking clicks on these banners with the help of tools like, webegnage, clevertap, netcore, moengage etc.

Once a user clicks on this banner and leaves a digital footprint in the form of a notification subscription or email or phone no. you should be able to start your recommendation of products on different user touchpoints.

For ex., Livlong ranks in 2nd position for the ‘juices for periods’ keyword and you will find a gynaecologist consultation banner running on this blog page:

Remember, try to run a contextual banner here with respect to the blog content. Not a generic one.

Internal linking to discover:

Internally linking your blogs to each other or your blog to a product page has dual advantages;

Firstly, it helps in the discovery of more content.

Secondly, It acts as a strong signal for search engines from ranking perspective.

As per Google, if a page of your website is ranking well on Google, the other internally linked pages will also see a ranking boost as SEO equity is passed from one page to the other with the help of internal links.

Something like this:

Focus On High Readability

When most people hear “blog design”, they think about things like colors, illustrations, branding and UX.

And yes, those things are important for a blog’s design.

But they’re not nearly as important as your typography.

After all, a blog is where people read text content. And if that text content is hard to read, the blog won’t succeed.

(No matter how amazing that content happens to be.)

Fortunately, making your blog content easy to read isn’t rocket science.

The most important thing is that you use a font that’s between 15px-18px.

In fact, a study out of Carnegie Mellon University found that larger font is easier to read and understand.

This is something I’ve noticed from my own experience. If I land on a blog with a small font, I usually click away.

But if I wind up on a blog with a highly readable font I’ll usually give the content a chance.

Medium.com is the king of the readable font.

They use 21px font. And it’s big, bold and insanely easy to consume.

Other than font size, you also want your blog’s design to include plenty of white space around the text.

For example, here’s a blog with text that’s all squished together.

That’s super hard to read.

On the other hand, in the below blog, there is a sensible use of white space around the content.

Also, use a blog layout that’s easy to read… and skim.

This means using wide margins, like this:

Use a Consistent Design

Like any website design, consistency for your blog’s design is HUGE.

A consistent design makes it easier for people to remember your blog. Which, considering how many blogs are out there, is super important.

AngelList.com, use custom-illustrated blog post banners that all have the same look and feel.

If they used a stock photo for one post and an illustration for another, their blog design would look all over the place.

But this consistency helps their blog look super professional.

Design to Stand Out

Your blog should be easy to read. And use consistent design elements.

But if your blog looks like every other blog in your niche, it’s going to blend in.

This is why at least some of your blog design should be dedicated to standing out.

That’s not to say that you need to reinvent the wheel. But your blog should do something that makes it look different than competing blogs.

Here are a few examples of things you can tweak to make your blog design look unique:

• Your blog feed

• Your banner images

• Your WordPress theme

• Font and typography

• Illustrations

• Comments section

• Site navigation

• Footer

To give you some design inspiration, let’s look at a few examples of blog that do a great job of standing out.

Intercom has a really unique layout for their blog feed.

Most blog feeds are vertical with a single column. But Intercom features their latest post at the top of the feed…

…and has a list of their older content in a 3×3 grid.

Feature Your Best Content

Most blog feeds look something like this:

You have your latest post at the top. And older posts underneath.

Now:

There’s nothing WRONG with this layout.

But there is one big downside with using the chronological approach: finding your blog’s best stuff is hard.

For example, let’s say you published an amazing guide 2 years ago. Well, someone that lands on your blog for the first time has no way of easily finding that guide. It’s probably buried on page 10 of your feed.

That’s why more and more blogs are using a “library approach” to their blog feed.

With this approach, you highlight your best stuff… not the content you published most recently.

Create Custom Pages for “Big Content”

For list posts, case studies and other run-of-the-mill posts, your standard blog layout will work just fine.

But what about when you publish something HUGE?

Well, that’s where you might want to consider a custom page design to break the monotonicity and highlight the importance of the blog.

Create a Blog “Homepage”

For most people, their blog’s “homepage” is their blog feed.

The upside is that this layout makes it really easy to find your content.

But it’s bad for conversions.

Instead, I recommend testing out a blog homepage that’s designed solely to build your email list.

Then, put your blog feed on a /blog URL.

For example, Livlong’s blog homepage shows the most important article first and then builds on credibility with ‘clinically verified’ content.

In the process, our blog homepage also asks users to subscribe to the newsletters by entering their email ID.

And because that homepage was designed to collect emails, it converted 8x better than our previous blog homepage.

Add author details:

Ever land on a blog and wonder: “Who the heck wrote this?”.

It’s human nature: we want to know who’s behind the content we’re consuming.

This is why you want to use a clear byline at the top of every post. Preferably with a headshot of the person that wrote it.

For example, the Buffer Blog features the blog post author right underneath the blog post title.

Add Social Sharing Buttons

If you want more people to share your content on social media, you need to make it SUPER easy for them.

This is why I recommend incorporating social sharing buttons into your design.

You can also just add static buttons to the top or bottom of your post.

Pro Tip: Pick the 2-3 social media sites that your audience spends the most time on. And ONLY feature those networks there.

Not only does a long list of buttons look bad..

…but it makes it less likely that users will use ANY of your buttons.

That’s it for today, folks!

Hope today’s newsletter will motivate you to re-design your blog pages to make them more user-friendly leading to better macro (sales/leads) and micro goals (email ID collection, app downloads, notification subscriptions).

Also, last week I posted a reel on mamaearth SEO approach that has been watched by 1,00,000+ people so far. Care to check it out? Here it is.

Cheers,

Apurv

PS. want me to cover a topic in my newsletter? Reply to this email with an idea and I will add it to my growing list.