Blog

Useful Weblog Design | Analyzing Weblog Layouts, Sidebars, Content material Tables

functional blog design

What is the most important factor that you consider when deciding which brand makes your money?

While you may be focusing on product quality or quick customer service, the data shows how for an increasing number of buyers Trust becomes the most important factor.

But what does it mean to trust a brand? The question is difficult to answer because trust is different for different people.

Some would like to know that you have a good track record and that you protect your personal information. Some want to know that you are committed to the social cause that is important to them. Some want to see what others have to say about your product or service. And some may be interested in whether you have a flexible return policy.

This is where your blog and content go on stage to take on the central role in building customer trust. Every blog post you read, every infographic you scroll through, and every video you see brings you one step closer to conversion. So your goal should be to design a blog that will keep you as long as possible.

If you are Start a brand new blog, give an old new lifeor just look for ways to reduce your percentage of uncomfortable bounce rates. Reading the rest of the manual should be at the top of your to-do list as it lists all of the steps necessary to create a working blog design.

Design an inviting blog homepage

You have probably encountered this study This shows that it only takes people 50 milliseconds to form an opinion about the visual appeal of the website they are visiting.

While this is often quoted because it is a striking number, it is irrelevant in the grand scheme of things. If your blog is well designed, it looks good whether you look at it for 10 milliseconds or 20 minutes.

The same applies in reverse. The only thing that really changes is the hope that people who stay long enough to look beyond the visual confusion will be affected by the quality of your content.

There are hundreds of superbly designed blogs that can help you increase your creative spark. However, don't fall into the trap of clinging to designs that look best. There is also something to say about functionality.

To get the best of both worlds, you need to answer two questions before you start working on your blog:

  1. What type of feature images do you want to use (if any)?
  2. Does your content span several different categories?

Let us examine a few examples of why these things are important.

Let's talk about blog layouts

There are some creative blog designs, but we'll focus on the 5 most common ones.

1. Standard grid

Probably the most common approach to designing the main blog page. Here are some great examples HelpScout and Marketo.

functional blog design

While you can find blogs that use 2, 4, or even 5 column layouts, 3 seems to be the sweet spot. This is probably because the three-column layout gives you just enough space to display your picture, title and post description. At the same time, desktop users can reach more than 10 different content recommendations with just one mouse pointer.

2. Uneven grid

This approach gives the page a little more dynamism and allows you to focus more on the content you want to highlight by giving it more grid space. It can also be a good way to throw some lead magnets into the mix.

3. Single column layout

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

functional blog design

Limble CMMS has created custom images to make them glow and grab the reader's attention. For this reason, visitors can see no more than 2 content suggestions with a single mouse roll.

functional blog design

On the other hand, WiseStamp has decided to sacrifice the presented images in a way. In return, however, they can summarize multiple content suggestions on a single screen.

When you open the blog, the first thing you see is a slider located at the top. This is a great way to add interactivity to your blog if you're a fan of it.

4. Grid divided into categories

Not much different than your standard multi-column layout. Here's how Alexa implement it.

This is an approach that you should consider when You plan to label different categories (as in the example above) or if you have content for specific groups (such as entrepreneurs / marketers / designers). An alternative is to use a drop-down category filter or to include the categories in your website navigation.

If you're having trouble deciding how to define your categories, you can take a look at your buyer (or reader if you don't sell anything) persona profile. If you have X quite different buyer personalities, you may want to define a category for each person.

If that doesn't work for you, I recommend reading This post on choosing blog categories by CoSchedule.

5. Minimalist approach

By minimalist I mean without the descriptions of the pictures and contributions. This is perfectly illustrated by Ahfref's blog.

This may be a good choice for blogs that don't match the featured images. I would not recommend it, because without the pictures and post descriptions presented, you only have your title to arouse interest.

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

A downside to this design approach is that you can bring a lot of content suggestions to the screen, especially if you split it into multiple columns. This can be seen at A List Apart homepage.

Polishing user experience

Here are a few simple improvements you can implement on your blog Improve user experience Regardless of the grid / layout you choose:

  • Implement a search function
  • Add the ability to filter content by category / tags / author / release date / popularity
  • Enter the stamp "Time to read"
  • Implement the progress bar to make it easier for readers to see where they are
  • Add the "Back to Top" button at the end of longer content items
  • Show engagement rates for each piece (views / comments / number of shares / number of likes).
  • Make sure hyperlinks are clearly visible using a contrasting color
  • Add a table of contents for longer blog posts

Do not implement everything from this list now. Choose the things that work for you. For example, if your content receives many approvals but very few comments, only the metric that shows it in a better light is displayed.

What is the purpose of your sidebar?

If there's one thing we often overlook when it comes to blog layout, it's the sidebar. That doesn't mean blogs don't use it. I try to say that they are not making full use of it.

In addition to the usual things like search, tags, and the most popular content, you should also consider other things that keep readers busy.

A good example is again WiseStamp, which contains short tutorials in which the product is presented.

The sidebar elements are designed to “stick” so that they are always visible on the screen when scrolling through the content.

I can't be sure, but this is probably an attempt to balance the general Disinterest in sidebars. Our attention will always be focused on the content that we have read or seen. If you have a really important message that you want to bring up via the sidebar, you want to keep an eye on it at all times.

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

Still, they're some arguments against the sidebar. For example, a case study from ImpactBND shows that removing the sidebar and hitting a CTA at the bottom of the post actually improved conversion rates.

What should you do with it? Should you use the sidebar or not?

Since there are many contradictory recommendations, it is obvious that there is no general correct answer that works for everyone. Personally, I prefer a sidebar because I believe that when used correctly, it does more good than bad.

If you plan to use one, choose 2 or 3 items you want to use and stick to it. Putting a few things in the sidebar can draw too much attention from the content itself. Not respecting the empty space is a common web design error this also applies to blog design.

Optimize blog content

The content has to be legible, large sections have to be clearly separated and the whole structure just has to make sense.

As the saying goes, the devil is in the details.

As someone who reads and writes a lot of long-form articles, here are some additional tips for designing quality of life that are helpful in a functional blog design and make it easier to use your content:

1) Open links in a new tab

This is a great way to Avoid fatigue of the rear buttons.

All external links should be opened in a new tab so that users can quickly return to your site at any time. There are some debates about internal links and should be opened in a new tab. Both approaches have their own (un) advantages. So use what seems best to you.

2) Add a navigation bar / table of contents for longer content items

As more and more Companies take on content marketingWe are already experiencing a shift towards video and long form content as the leading content formats. This ultimate guide presents a perfect example of good design considering UX with a table of contents and a clear distinction between different sections.

For those who want to go a step further, I've seen some blogs with a clickable content table in the left sidebar (with H2 and H3) that made navigating through important content really easy.

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

3) Think about the link

Internal links are another way to get people to explore your blog. However, do not link to other posts only for the purpose of linking. Make sure the posts you link to are relevant and add value to this post.

Use the relevant anchor text for all of us, so that we know what to expect when we click the link.

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

It would be a shame to put all of this effort into your content and blog design so that your page loads so long that people leave before reading a single word. This probably shouldn't even be mentioned at this point, but designing your blog for mobile device users is paramount.

5) Don't forget the search intent

Since this is about engaging visitors with your content, it's important to understand the importance of search intent.

When people enter a search query in search engines, they essentially have a specific need that they are trying to solve. If your content doesn't match your search intent, it will be gone in a second. This will definitely affect your SEO efforts.

As Joshua Hardwick of Ahrefs sums it up well his piece about intent to search: "Relevance is the basis for the success of SEO."

There is no way around good content

The content is k… I hate this overused sentence, so I won't end it.

We all know that, but it has to be said. Without good content, all of these efforts mean nothing. Glances can only take you so far. If your blog has no personality, people are simply not interested in getting to know your brand. And it is naive to think that this will not affect your bottom line.

To Create a first class content resource centerMake sure that you care about both looks and personality.