Functional Blog Design | Analyzing Blog Layouts, Sidebars, Content Tables

Modern Marketing

By:

When you are deciding which brand deserves your money, what is the most important factor you look at? 

While you might focus on product quality or fast customer service, the data shows how for an increasing number of buyers, trust is becoming the #1 factor.

But what does it mean to ‘trust a brand’? It’s a hard question to answer because trust means different to different people. 

Some like to know that you have a good track record and that you are protecting their personal data. Some want to know that you are involved in the social cause they care about. Some want to see what other people have to say about your product or service. And some just might care if you have a flexible return policy.

This is where your blog and content climb to the stage to take the central role of building customer trust. Every blog post they read, every infographic they scroll through, and every video they watch is moving them one step closer towards conversion. So your goal should be to design a blog that will keep them around for as long as possible.

Whether you are starting a brand new blog, giving new life to an old one, or just looking for ways to reduce your nasty bounce rate percentage – reading the rest of this guide should be on top of your to-do list since it lists all the necessary steps needed to build a functional blog design.

Designing a welcoming blog homepage

You have probably come across this study that shows how people need only 50 milliseconds to form an opinion about the visual appeal of the website they are visiting. 

While this gets cited a lot because it is a flashy number, in the grand scheme of things, it is irrelevant. If your blog is designed well, it will look good whether you look at it for 10 milliseconds or 20 minutes. 

The same is true the other way around. The only thing that really changes is the hope that, if people stay long enough to look past the visual mess, they might get pulled in by the quality of your content. 

There are hundreds of superbly designed blogs you can use to boost your creative spark. However, don’t fall into the trap of clinging to designs that look the best. There is something to be said about functionality too.

To get the best of both worlds, before you start any work on your blog, you need to answer 2 questions:

  1. What kind of feature images do you plan to use (if any)?
  2. Does your content stretch across multiple distinct categories?    

Let’s explore why these things matter by looking at some examples.

Let’s talk about blog layouts

There are some creative blog designs out there, but we will concentrate on the 5 most common ones.

1. Standard grid

Probably the most used approach to designing the main blog page. Here are a couple of great examples from HelpScout and Marketo.

functional-blog-designfunctional-blog-design

While you can find blogs that use 2, 4 or even 5-column layouts, 3 seems to be the sweet spot. That is probably because the 3-column layout gives you just enough room to show of your featured image, title, and post description, all while giving desktop users the ability to reach 10+ different content recommendations with just a single mouse scroll.

2. Uneven grid

This approach gives the page a little bit more dynamic and enables you to put more focus on the content you want to highlight by giving it more space on the grid. It can be a neat way to throw in some lead magnets into the mix as well.

3. Single column layout

Another very common approach to blog design. On the pictures below, you can see how Limble CMMS and WiseStamp use this same approach, but with different results.

functional-blog-design

Limble CMMS created custom images so they let them shine and catch the reader’s attention. However, because of this, with a single mouse scroll, visitors don’t see more than 2 content suggestions.

functional-blog-design

On the other hand, WiseStamp decided to sacrifice their featured images in a way, but in return, they are able to fit multiple content suggestions into a single screen. 

Additionally, if you go and open their blog, the first thing you will see is actually a slider that sits on top. This is a nice way to add some interactivity to your blog if that’s something you’re a fan of.

4. Grid split into categories

Not much different from your standard layout with multiple columns. Here’s how Alexa implemented it.

This is an approach you should consider if you plan to feature distinct categories (like in the example above) or if you have content aimed at specific groups (like entrepreneurs/ marketers/ designers). An alternative to this is to feature a drop-down category filter or to include the categories into your website navigation. 

If you have trouble deciding how to define your categories, one possible solution is to look at your buyer (or reader if you are not selling anything) persona profile. In essence, if you have X fairly different buyer personas, you might want to define one category for each persona.

If that doesn’t work for you, I recommend reading this post on choosing blog categories from CoSchedule.

5. Minimalistic approach 

By minimalistic, I basically mean without a featured image and post descriptions. This is perfectly Illustrated by Ahfrefs’s blog

This might be a smart choice for blogs that are not consistent with their featured images. Not something I would recommend because, without featured images and post descriptions, you only have your title to generate interest. 

This works for Ahrefs because they have already built up a lot of brand trust and people can be sure that every title they click on will feature valuable advice.

One flipside of this design approach is that you can fit a lot of content suggestions on the screen, especially if you split it into more columns. This can be seen at A List Apart homepage.

Polishing user experience

Here are a few simple tweaks you can implement at your blog to improve user experience regardless of the grid/layout you decide to use:

  • implement a search function
  • add the ability to filter content based on category/tags/author/publish date/popularity 
  • include “time to read” stamp
  • implement the progress bar so readers have an easier time tracking where they are
  • add back to top button at the end of longer content pieces
  • show the engagement rates for every single piece (views/comments/number of shares/number of likes)
  • make sure hyperlinks are clearly visible by using a contrasting color
  • add a table of content for longer blog posts

Now, don’t go and implement everything from this list. Choose the things that work for you. For instance, if your content gets a lot of shares but very few comments then show only the metric that represents it in a better light.

What is the purpose of your sidebar?

If there is one thing we often overlook when it comes to blog layout, it is the sidebar. That is not to say that blogs aren’t using it, what I’m trying to say is that they are not using it to its full potential. 

Besides usual things like search, tags, and most popular content, you should consider other things that will keep readers engaged.

A good example again comes from WiseStamp that features short tutorials that showcase their product. 

The sidebar elements are made to “stick” so they are always visible on the screen while you scroll through content. 

While I can’t know for sure, this is probably an attempt to offset the general disinterest in sidebars. Our attention will always be on the content we came to read or watch. If you have a really important message you want to bring forth through the sidebar, you want to keep it in sight at all times. 

Make maximum use of your sidebar. Quizzes, calculators, rotating testimonials, social media feeds, comments, lead magnets…these are all elements that can build trust, increase engagement, and maybe even earn you some leads. 

All of that being said, they are some arguments against the sidebar. For instance, a case study from ImpactBND shows that removing the sidebar and slapping a CTA at the bottom of the post actually improved their conversion rates.

What to make of it? Should you use the sidebar or not?

Since there are a lot of contradicting recommendations out there, it is obvious that there is no universally right answer that works for everyone. Personally, I prefer having a sidebar, as I believe that when you use it in the right way, it brings way more good than bad.

If you do plan to use one, decide on 2 or 3 items you want to feature and stick with them. After all, cramming a bunch of stuff in the sidebar can steal too much attention from the content itself. Not respecting the white space is a common web design mistake that applies to blog design too. 

Optimizing blog content

The content needs to be readable, big sections need to have clear separations, and the whole structure just has to make sense.

The devil is, as they say, in the details.

As someone who both reads and writes a lot of long-form articles, here is some additional quality of life design tips that will assits in a functional blog design and make your content easier to consume:

1) Make links open in a new tab

This is a good way to avoid back button fatigue

All external links should be opened in a new tab so the users can quickly come back to your site whenever they want. There are some debate around internal links and should they be opened in a new tab. Both approaches have their own set of (dis)advantages so use what seems best to you. 

2) Include navigation bar/content table for longer content pieces

As more and more companies adopt content marketing, we’re already witnessing a shift towards video and long-form content as the leading content formats. This ultimate guide presents a perfect example of good design with UX in mind with a content table and a clear distinction of different sections.  

For those that want to take this a step further, I’ve seen some blogs that featured a clickable content table in the left sidebar (showing H2 and H3), which made it really easy to navigate through a major piece of content. 

On the picture below, you can see a similar implementation on our website.

3) Put some thought into interlinking 

Internal links are another way to keep people exploring your blog. However, do not link to other posts just for the sake of linking. Make sure the posts you link to are relevant and add value to the post at hand. 

And, for the sake of all of us, use relevant anchor text so we know what to expect when we click on the link.  

4) Don’t let technical difficulties get in your way

It would be a shame to put all this effort into your content and blog design just to have your page load so long that people leave before they read a single word. This probably shouldn’t even be mentioned at this point but designing your blog with mobile device users in mind is paramount. 

5) Do not forget about the search intent

Since we are talking here about keeping visitors engaged in your content, it is crucial to understand the importance of search intent. 

In essence, when people type in a query in search engines, they have a specific need they are trying to solve. If your content doesn’t match their search intent, they’ll be gone in a second, and this will definitely hurt your SEO efforts.

As Joshua Hardwick from Ahrefs sums it nicely in his piece on search intent: “Relevance is the foundation of SEO success.”

There’s no way to get around good content

The content is k… I hate that overused phrase so I’m not going to finish it.

We all know this, but it has to be said. Without good content, all of this effort means nothing. Looks can only get you so far. If your blog doesn’t have a personality, people simply won’t be interested in getting to know your brand. And it is naive to think this won’t affect your bottom line.

To build top of the line content resource center, make sure you put enough effort into both looks and personality.