REQUEST A FREE 30 MINUTE MARKETING AUDIT

Call us now on 0161 7110 110

12 Dec 2018

8 Best Examples of B2B Blog Designs

Read about the best B2B blog design examples from Axon Garside

Often, during a B2B website redesign, the blog design tends to fall by the wayside, but it’s actually one of the most important aspects of your website that people will visit. That’s why we’ve put together a list of the best B2B blog design examples to give you some inspiration for when you decide to give your website a refresh:

  1. Plan-Net
  2. HubSpot
  3. Think with Google
  4. Canva
  5. Vistair
  6. Moz
  7. Optimizely
  8. Econsultancy

Companies that published 16+ blogs a month see almost 4x more traffic than companies who only published 0-4 a month. Clearly, keeping on top of your B2B blog is a top priority if you want to be attracting new visitors and nurturing them into leads. However, it’s not just about churning out content and hoping for the best. Your blog design needs to be able to catch a prospect’s eye if you want them to stick around long enough to engage with your content.

1. Plan-Net

Plan-Net’s blog is a great first example which includes many different elements to their design that we love. Their design is clear, with readable fonts and digestible structure. You’ll also notice that the introduction is slightly larger in font size to draw you into the rest of the content. The social sharing element is fixed on the page as you scroll down the blog, making them accessible to readers at any point and encourages engagement. There’s also links to additional reading to keep a user on the site for longer.

Plan-Net blog

2. HubSpot

HubSpot’s blog design is always evolving based on how people engage with content. For instance, you can see at the top that they’ve included the average time it will take you to read the blog - helping users determine whether they have the time to invest in the content. Additionally, nice touches such as including the author’s Twitter handle and fixed social sharing create a sense of encouragement around engagement. One aspect we really like is how the blog begins, by answering the question of the blog with the five top-rated handsets. Answering the question of the blog at the beginning is a handy way to try to gain a Google Snippet. For readers who are time-poor, they now have the information they were looking for and can be on their way. For other readers, they can scroll down to read more information about each handset type.

HubSpot blog

3. Think with Google

What can we say? Think with Google’s blog is clean, readable and utilises lots of white space. What we love about this design is that it’s fuss-free and fits with Google’s branding and only gives you the information you need.

Think with Google blog

4. Canva

Canva is a handy free tool to use if you want to create anything from logos to social media images and presentations using a range of templates, stock imagery and more. When it comes to their blog, Canva certainly keeps their colourful, whimsical branding on point, but one really cool aspect to their blogs is that they include embed codes for images they use so that you can then share it on your own website.

Canva blog

5. Vistair

In this example, we take a look at Vistair’s blog overview page. What’s really nice about their design is the interesting way they’ve displayed their topic filter - with a little plane that you can use to navigate to the different topics. Additionally, the blogs themselves are neatly displayed with eye-catching featured images to draw you into clicking.

Vistair blog

6. Moz

What we love about Moz’s blog overview page is the great use of white space and the ability to filter the blogs according to numerous categories. One other element is adding in the “like” and “comment” buttons so that you get an idea of the popularity of the topics being discussed, but also which prompt you to want to contribute to the engagement.

Moz blog

7. Optimizely

Optimizely’s blog design includes a fixed recommendations section which appears to follow you down the page and also promoting their latest offer (in this case, the webinar). In addition to this, they’ve also included the author’s bio, whereas you would usually just see a name and would need to click to learn more about them. This gives the blog a nice, personal feel but you also get a sense of credibility about the author and their industry expertise.

Optimizely blog

8. Econsultancy

Econsultancy’s blog using striking design in-keeping with their branding and cleverly uses the red the colour to highlight important elements within the blog. For instance, the social sharing buttons, the newsletter subscription, hyperlinks and pull-out quotes.

Econsultancy blog

We hope our blog has given you some good tips to keep in mind for your own website redesign. Do you have anymore B2B blog designs to add to our list? Let us know in the comments.

Want more inspiration for your B2B website? Download our free eBook ‘6 Steps to Designing a B2B Website for Lead Generation’.

Download 6 Steps to Designing a B2B Website for Lead Generation

This is an inline guide purely for the editor, it will not show in the final blog, designed to assist you with setting the options below in the 'Gate Trigger' section.

You will not be able to use the WYSIWYG editor for this it's code only so follow these instructions carefully.


Button
We cannot use a standard call to action to open the rest of the content, but we do want to track when someone clicks on the button to read the rest of the blog. Here's what the code should look like:
<a class="gate-trigger-button" href="#" id="8 Best Examples of B2B Blog Designs - Read the rest of the post" title="Read the rest of the post">Read the rest of the post</a>


Survey
Instead of using a button, you can ask people a what their intent of being on the blog is. Here's an example.
<h3 style="text-align:center;">Ready to read the post?</h3>
<p style="text-align:center;">Great, just let us know why you're here today</p>
<ul id="survey">
<li><a href="#" id="8 Best Examples of B2B Blog Designs">Answer One</a></li>
<li><a href="#" id="8 Best Examples of B2B Blog Designs">Answer Two</a></li>
<li><a href="#" id="8 Best Examples of B2B Blog Designs">Answer Three</a></li>
<li><a href="#" id="8 Best Examples of B2B Blog Designs">Answer Four</a></li>
<li><a href="#" id="8 Best Examples of B2B Blog Designs">Answer Five</a></li>
<li><a href="#" id="8 Best Examples of B2B Blog Designs">Other</a></li>
</ul>

If you want to connect what the user selects in the survey with the call to action at the bottom, use the following:
<ul id="cta-list">
<li><a href="#">CTA One</a></li>
<li><a href="#">CTA Two</a></li>
<li><a href="#">CTA Three</a></li>
<li><a href="#">CTA Four</a></li>
<li><a href="#">CTA Five</a></li>
<li><a href="#">Default</a></li>
</ul>


Form
We need to add the same form for each blog, you can if you want to make your own form but you'll need to change the formId which will be in the URL for the form e.g. https://app.hubspot.com/forms/145288/ee2dd282-1afb-4040-b67a-6ea2fe6e32cc/edit:
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
portalId: '145288',
formId: 'ee2dd282-1afb-4040-b67a-6ea2fe6e32cc',
css: '',
onFormSubmit: function($form) {
gateTriggerForm('8 Best Examples of B2B Blog Designs');
}
});
</script>


CTA Form
If people are clicking the CTA but then not filling in the form on the landing page they're being taken to, it may be worth loading the form on the same page to see if that helps the submission rate:
<div class="cta-form-image">
<a class="cta-form-image-button" href="#" id="CTA Click - 8 Best Examples of B2B Blog Designs"><img alt="Title of the CTA" src="https://cdn2.hubspot.net/hubfs/145288/hub_generated/resized/21421668-c868-457c-8f68-142438f1e246.png" title="Title of the CTA"></a>
</div>
<div class="cta-form-inputs">
<a href="#" class="cta-form-inputs-close"><i class="fa fa-times" aria-hidden="true"></i></a>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
portalId: '145288',
formId: '80edeb18-6298-4325-9d45-eb64c02b2d1c',
css: '',
onFormSubmit: function($form) {
gateTriggerCTAForm('8 Best Examples of B2B Blog Designs');
}
});
</script>
</div>

Topics: Website Design

Blog Comments