Transform Your B2B Website: Unleash the Power of Conversion with Our Ultimate CRO Checklist!
Learn More
background image

7 Blog Design Best Practices with Examples in 2023

Ignorance of blog design best practices can negatively impact the overall health of a website.

As per HubSpot, B2B marketers consider blogs the third most crucial content asset. It attracts new traffic to the brand, educates all types of personas, and nurtures prospects into loyal customers. Blogging helps companies connect with their target audience and establish themselves as thought leaders in a niche.

But sharing tons of information in written format is not an easy task, especially when it comes to explaining step-by-step processes or complicated tips.

To create popular blog posts that inspire decisions, mere words are not enough. Brands should deliver a reading experience that gives the blog readers clarity of thought. Blog posts with great content can also fail to deliver if their overall layout is clumsy and riddled with inconsistent design.

Though it is hard to pinpoint the exact design strands that make blogging work for a brand, there are some common factors used by most successful blogs by brands. In this blog, I will discuss blog design best practices that add the needed texture to a blog post that enhances its impact.

Importance of Following Blog Design Best Practices

According to research, 94% of a site’s first impressions are design-related. Blog posts possessing great potential might go to waste if the user is not impressed by the content above the fold and leaves immediately.

That’s why implementing blog design best practices is essential.

Visuals help break the ice between readers and content by presenting a layout that is easy to navigate and understand. It entices readers into reading the blog and shows signs that the content matches what prospects’ were searching for.

Implementing blog design best practices helps marketers tackle three major problems:

  • High Bounce Rate
    It signifies that a reader enters the blog but leaves immediately without interacting with the page’s elements. The most common reasons behind a high bounce rate are poor SEO or inefficient blog post design.
  • Scarce Return Visitors
    The main aim of a blog is to build brand credibility that readers return to when in need. But a low rate of return visitors showcases that blogs are missing the point.
  • Standing out from Competitors
    Creating unique content is hard. With search results filled with information claiming to solve the same problem, it can become hard for the readers to filter out the best content. Standing out from the competition becomes tough with just a good content copy.

Brands can minimise all such issues on their blog posts through apt designing. Let’s understand how to do it in-depth.

What Should Consider to Make a Good Blog Layout?

To create a good blog layout, consider the following elements:

  1. Choose a clean and simple design
  2. Use a responsive design
  3. Have a clear navigation menu
  4. Utilize whitespace effectively
  5. Use headings and subheadings
  6. Make use of images and multimedia
  7. Optimize your blog for speed
  8. Use a font that is easy to read

By following these elements, blog designers can create a successful blog layout that is visually appealing, easy to navigate, and optimized for both your readers and search engines. Remember, implementing blog layout best practices can improve the overall user experience and help to increase your blog's visibility online.

7 Blog Design Best Practices

Blogging is an essential aspect of scaling a business as it is a free way to share knowledge with prospects and spread brand awareness. Here are the seven blog design best practices to take a brand’s blogging to the next level.

1. Width of the Blog Post

A blog post is already a content-heavy web page. It becomes essential to create appropriate breathing space for the page's elements by incorporating white space. Leaving empty spaces on the side of the blogs gives it a clean and simple look.

But how much should be the width of the text?

Brands use various text widths, but they all lie in the range of 600-700px wide. By utilising white space effectively, the text can be made more readable and easier to digest for the reader.

Here is an example of an Orbit Media blog post with a width of 635px with a lot of whitespace to spear. Another thing to notice is how the blog's images align with the text's width. Together, it gives the blog a uniform look and keeps the reader focused.

Width of the Blog Post - Blog design best practices

The presence of whitespace in the blog post also allows marketers to insert helpful navigational elements at the side. For example, Mailchimp has integrated a small feedback form with its blog pages without disturbing the reading experience. While Orbit Media includes sticky social media share buttons on the side of the post to prompt a quick share on social media by the blog readers.

Mailchimp homepage screenshot

social media share buttons on the side of the post to prompt a quick share on social media by the blog readers.

MailChimp small feedback
Orbit Media sticky social buttons

2. All About Fonts

The main focus while choosing a font should be its legibility. No matter how fancy a font looks, if it disturbs the flow of content or highlights anything unwanted, it’s a no-go.

Two things to remember while deciding on fonts are

  • Font Size
    Though 10 or 11 px is the resorted font size, whether it’s on docs or spreadsheets, it should not be the same for a blog post. The font size on blog posts must create a visual hierarchy and support the page’s structure. When a visitor enters the page, the heading, subheading, paragraphs, bullet points, etc., must have font sizes that complement each other without overpowering or making the space look crowded.

    Here is a table that can help you decide the font size of blog posts. I have mentioned the preferred font size for big-screen gadgets like laptops, tablets, etc., and small screens like mobile phones.
Content-Type Font Size For Big Screens Font Size For Small Screens
Headings (H2) Between 54 to 30 px Between 18 to 10 px
Sub-Headings (H3) Between 39 to 30 px Between 13 to 10 px
Paragraphs Between 24 to 18 px Between 8 to 6 px
  • Font Type
    Font type is crucial for first impressions. Every word should be easily legible to the visitor. Basic fonts like Arial, Time New Roman, Sans, etc., will be better than using fonts like Comic Sans, which look fun only on greeting cards.

    There is no standard font type, but brands can always analyse top-performing domains in their industry to know which font will suit them better. Just follow the rule of keeping it simple. Marketers can use tools like WhatFont to conduct such font analysis easily.

3. Does Formatting Matter?

An organized blog post attracts bold visitors. It makes it easier for prospects to search for the right information without much effort. Blog layout comprises creating visual typography from the blog post's content, which is easy to navigate. It not only helps readers but comes under one of the best SEO practices, as good blog layout allows search engine crawlers to go through the content quickly and rank it.

But how to correctly format a blog?

Let’s divide the copy of a blog post into four parts: title, headings, subheadings, and paragraphs. Here’s the formatting:

  • Main blog title: H1
  • Headings: H2
  • Subheading: H3 and so on.

For example, this is how I format Waseem Bashir’s blogs:

Blog design best practices

Try to keep the paragraphs limited to four lines as it becomes easier for the visitors to read and outline the images to make them stand out.

Correct blog format - Blog design best practices

4. Show Table of Contents

The best navigational element to add to a blog post is a table of content that lets users jump to the relevant parts of the blog. It is not compulsory for short blogs, but for long-form content like pillar pages or guides, a table of content enhances user experience and encourages visitor interactions with the page.

Table of Contents - Blog design best practices

Marketers can take it to the next level by having a sticky table of content that moves as the visitor reads the blog. Mailchimp utilises something similar.

MailChimp utilises blog

5. What To Put At the End

The end of a blog post is a great space to give actionable cues to visitors. Brands have a lot of options when it comes to deciding what they want their prospects to do next.

Here, marketers have four options:

  • Send visitors to other related blog posts
  • Offer them a relevant lead magnet
  • Redirect visitors to a service page
  • Form to sign up for the newsletter
End of a blog post
Redirect visitor to a service page

Lead magnet form
Form to sign up for the newsletter

The right end depends on a blog post’s position in the sales funnel. For example, if the blog post is present at the top of the funnel, then a related blog post or newsletter sign-up is an appropriate ending for it. Similarly, lead magnets work well with a middle of the funnel blog post but can also be used with ToFu blogs. Services pages are best for bottom of the funnel blogs.

Consider using our Blog Catalog Sheet to streamline content management and enhance your blog strategy. This tool simplifies tracking Calls to Action (CTAs) and helps identify the perfect stage in the buyer's journey for each post, whether it's at the ToFu, MoFu, or BoFu. It's a valuable resource for optimizing your content approach.

6. Write about the Author

Adding the author’s name to the blog post increases its credibility. It provides little insight into the writer’s field of expertise and makes the content more dependable. A short bio of the author can consist of their qualifications and experience along with their social links, so readers can connect with them if they have any queries regarding the blog content.

About the author

Most of the author’s bio is present at the bottom of the blog. If a brand wants, it can specify the writer at the start of the blog, but should not disturb the flow of the content.

Author's bio

7. The Blog Featured Image

A blog-featured image is an important visual element that can enhance the overall appeal of your blog post. It is the first thing that readers will see, so it should be relevant to the content and visually attractive. Choosing a high-quality featured image can increase the chances of your blog post being read and shared.

8. Include social sharing buttons

Social sharing buttons are essential for any blog that wants to expand its reach and engage with more readers. You can increase your blog's visibility and attract new visitors by making it easy for readers to share your content on their social media accounts.

These buttons should be prominently displayed on each blog post and placed in a location that is easy to find. Popular social media platforms like Facebook, Twitter, LinkedIn, Pinterest, and Instagram should be included in your social sharing options.

By allowing readers to share your content with their friends and followers, you can also increase the likelihood of your content going viral and becoming more widely known. This can help you establish your blog as a reputable source of information and attract even more readers in the long run.

9. The Takeaway Image

A takeaway image is the blog summary that contains all the crucial information shared within the content. It is a great way of providing blog visitors something to keep they can use to remember whatever they have read. Readers can take screenshots or download the takeaway image (don't forget to put your logo on it).

A takeaway image

The Next Step Forward…

All the blog design best practices shared in this blog post will help any brand inch closer to better search result rankings and traffic. After implementing appropriate formatting, font size and type, and integrating the right offer at the end, ensure that the blog post follows best SEO practices.

If you aim to build a learning centre or a blogging hub where you share relevant content related to a niche, you would also need a blog category page. You can check out this blog to learn how to design your main blog page efficiently: Blog Page Design Ideas That Work for Everyone

Related Article:

The B2B Blogging Strategy Every Beginner Must Know

Is Content Marketing Dead? Separating Fact From Fiction

How to Create Original Content That Drives Engagement

Content Marketing Best Practices

Ready to step up your content marketing strategy?

Reach out to us today and initiate a content marketing revolution.
Explore Now
Arrow image