Design tips for B2B blogs

Blogging is a great way for businesses to attract potential customers to their sites. However, once you’ve got them there, how do you design your blog so that the visitor wants to stay, download some content, view the rest of your site, and hopefully convert into a customer?

To sidebar or not to sidebar?

A stalwart of traditional blog design, the side bar normally sits to the right of the content and contains calls-to-action, links to other blog posts, and a subscribe button.

Why getting rid of the sidebar might be a good idea:

• Having a side bar can be distracting - once you have one, the temptation is to fill it with links that direct people away from reading your content.
• People ignore them anyway - moving the side bar CTAs that almost never get clicked into the main body of the blog increases conversion rate.
• It may interfere with the user’s journey and clutter up the page.

Potential hazards to watch out for:

One of the main issues in removing the side bar from a blog design is the space it leaves. Filling the full width with text creates a much longer line length which can affect readability. The optimum line length is generally considered to be between 50-75 characters.

Ok, so what if you simply remove the side bar and keep the text constrained to the same width as before? Although designers tend to be quite comfortable with white space, it can make some people uneasy, and your client may be anxious to find a way to fill it.

Some of the content traditionally found in a sidebar may still need to be on the page (eg: subscribe button, other CTAs, topic tags). The key is to anticipate which these are and find better places for them to go.

Photography/Imagery

The visual elements are key to the user’s impression of your brand, however try not to get to bogged down. Remember that when designing for a blog you are designing a framework for the images rather than selecting specific images. Often you will have to account for existing blog content, which may restrict your image size. Best thing is to keep it clean and simple, so that the images don’t become a hassle for someone updating the blog.

It can be a good idea to apply a filter to give the images a uniform appearance. If this is a single colour overlay it can be coded into the blog - if it’s more complex it’s advisable to set up a template using an online tool like Canva. If you (and the people updating the blog) have access to Adobe Creative Cloud consider creating a PSD template. Be restrained when designing for B2B - remember to keep any effects to a minimum. The blog needs to be a good and professional reflection of the company. 

Text CTAs vs Image CTAs

We have been testing out the theory that anchor text CTAs convert better than bigger image CTAs. Although we still use images with our bottom of the funnel conversion offer, we have found that the anchor text CTAs are actually getting the most clicks.

Here are some tips to help your CTAs convert into leads:

• Describe to the user exactly what it is they will get by clicking on the CTA - this encourages consumer confidence and also means that the user is more likely to complete the conversion once they have clicked.
• Keep it concise.
• If you go for images keep them simple. Don’t over complicate with lots of effects and match it with the style of your blog; you don’t want people thinking it’s an ad.

Typography

Typography is the design equivalent of a bazooka in the arsenal of weapons at your disposal. It’s the make or break on readability and user-friendly design. The key to developing a good typography for a blog is to make sure you create a clear hierarchy. This can be different from the CSS on the rest of the site, and may have to be. When designing, make sure to consider all the different levels of heading and types of text that will be needed. Don’t forget to think about how to style links and text CTAs.

Once you’ve made sure that you’ve defined a hierarchy, here are a few tips and tricks that will help take your typography (and legibility) to the next level:

• Letter-spacing: this is the space between letters, called tracking in Photoshop. Don’t be afraid to tweak this – adding more spacing can help improve legibility.
• Font weight: think outside the box – headers don’t have to be bold, using a lightweight style can help lighten the appearance of a blog post. Just remember, if you’re not using weight to establish a hierarchy, then exaggerate other factors like size difference.
• Line-height: the distance between lines of text, this has the most influence on how dense or sparse your text appears on the page. Increasing line height is one of the easiest ways to make your blog post easier to read.
• Colour: keep this restrained, bright, or light coloured text is hard to read. Too dark is not great either; if you want black text, better to choose a very dark grey.

Conclusion

The key to effective B2B blog design, is to think of the user at every stage of the process. How will they travel through the blog, and how will your design influence the journey they take?

In my opinion the three core principals of effective blog design are:

1. Readablity: the text needs to be as readable and accessible as possible.
2. Variety: implement a good hierarchy in the text, with a range of font sizes. Allow for lots of different types of content. 
3. Consistency: as with all good design, establish your style and stick with it

If you found this post interesting you might enjoy reading my last blog post on SaaS website design.