How to design blogs

Default avatar.
October 03, 2013
How to design blogs.

thumbnailAs designers, we each develop distinct styles, and usually gravitate towards different kinds of projects when we have a choice in the matter. For me, it’s content-driven websites and nothing is more content-driven than the good old-fashioned blog.

There is something that simply feels right about putting a whole bunch of meaningful, interesting text, pictures, and/​or video together in an aesthetically pleasing way. Blog content is all about ideas, and ideas are meant to be read, appreciated, and if everything goes well, discussed at length. Facilitating that process is personally fulfilling, and often challenging.

For people who own blogs, the advantages are clear: 

  1. The format is flexible. They are free to discuss a variety of topics. Even if a blog has a central theme, they can occasionally break away from it to explore other ideas that intrigue them.
  2. Posts can be as short or as long as you like.
  3. Posts don’t have to be text. Video and photo blogs can be engaging, and some are pretty popular.
  4. Blogs can be used to establish someone as an expert in their field, thereby increasing business opportunities.
  5. Blogs are incredibly easy to create and experiment with, thanks to services like WordPress​.com, Blogger, and so on.

Blogs haven’t changed much

No matter what blog you go to, you’ll see a variation on the following system: 

  1. a home page with the latest articles, either displayed in full, or as a list;
  2. a list of categories — probably in a sidebar;
  3. an archive, with links to listings of articles sorted by month or year;
  4. individual articles with an attached comment thread;
  5. usually, an About” page, and/​or a Contact” page.

This is not a bad set of defaults. By and large, this structure works and it’s familiar. This does not mean, however, that it’s right for you, or your content. 

As UX designers, our job isn’t just to make sure that text is big enough to read, that navigation is easily recognizable as such, or that buttons are big enough to tap on. We solve problems. We make sure that it’s easy for users to find what they’re looking for, and quickly. We have mere seconds to engage readers and keep them on our site, so we have to get creative.

In this article, I’m going to look at features which are common to the majority of blogs, and see how we might make them easier to use, more engaging, and/​or irrelevant. Let’s start with my absolute favorite pet peeve:

The sidebar

One problem that I have with the sidebar is that too often it distracts me from the content as I try to read. It might be a colorful animated ad, or worse, one that comes with sound and no mute button, or the sidebar itself just clashes too harshly with the rest of the site.

Sometimes, sidebars are rendered next to unusable by people who try to cram far too much information into them, making the text smaller and smaller all the time. Sometimes, sidebars are much much longer than an individual article.

Here’s a hint: putting five years of archives, sorted by month, in one sidebar is not a good idea. This might sound like it’s just a personal irritation to some people, but there is no reason why a sidebar should be twice the height of my 1600×900 screen.

Many blogs have solved this problem in one of a few ways, the most notable of which being that they often drop the sidebar altogether. Navigational lists such as categories and archives are moved to their own section, usually under the main content.

Now let me be perfectly clear. I am not saying that sidebars should go altogether. In fact, when I move my personal blog from my main domain to its own, I actually intend to use a sidebar for some rather important things.

What I am saying is that sidebars should not be stuffed with more information and widgets than is reasonable, and they should not dominate the page. They are meant to be navigational aids only. Let’s treat them that way.

If you want to display more information than can comfortably fit in a sidebar, display it elsewhere.

Individual articles

I’d like to talk about individual articles before the home page because if you’re doing well as a writer, the home page will rarely be the first thing that people see. People will be sent directly to individual articles by search results, links provided by friends, and services such as Stumbleupon.

For this reason, make sure that navigation options like categories and search are available on every page of your blog. The article that your users find may not be the one they’re looking for, so you’ve got to make it easy for them to find your other content.

A lot of self-styled blog gurus” will talk about the importance of having related articles” listed for each individual post. As much as I hate to agree with anyone who calls himself a guru”, they have a point. Reading through a blog is all about discovery, and that discovery process should happen quickly. Users are more likely to click on an eye-catching related headline than look for the category link to see similar articles on your site.

Make sure that there’s a bit of descriptive About” text on every page. If it’s a really short paragraph, it could go in the sidebar. If it’s longer, you could put it in the page footer, where users are likely to see it after they’ve finished reading/​skimming the article.

Finally, if there’s one thing you learn from this part of the article, remember this: on a blog, you should spend more time designing your post content than your home page. Your content is what people will see first, in all likelihood.

The home page

Many people design the home page of their website as though it will be the first thing that every user sees. This is a mistake. The users most likely to view a home page are regular readers who don’t use RSS feeds (which should always be available), and those first-time visitors who’ve just read an article, then clicked Home” because they felt like it.

So yes, the home page of most blogs is essentially a glorified RSS feed. This is where users come for updates.

Unless you’re running a tumblelog — a blog made up of very short posts, images, and videos — I would recommend displaying no more than a headline, an excerpt, and an optional image thumbnail. Blogs that display entire posts on the home page force readers to scroll down and down to make sure they haven’t missed anything.

Some people get around this by displaying a list of the most recent headlines in their sidebar, but I see this as redundant. Such a list can be useful on every page of the blog except the home page.

This is not the only way to make a home page for a blog, of course. There are other ways to present your content, but I believe that this approach makes the most sense from the perspective of a reader.

Need more proof? Look up a newspaper or magazine site. All they do is display the links to the most recent articles in every major category.

Chronological navigation

It’s typical to put a date on every post published, and to allow users to navigate the site’s content by month or year. For some writers, this makes sense. If you’re writing about design trends, reviewing technology, addressing political issues, or doing anything else that’s time-sensitive in any way, use it.

However, is chronological navigation always necessary? Probably not. Examine your content. If you’re writing about things that aren’t going to change in a hurry, like history, human nature, or less-than-contemporary art, you may want to leave date-based navigation options out altogether.

Look for other ways to organize your content based on your subject matter. Categories will never go out of style, but let’s take art, for example. You could design the site in such a way that people can browse your posts by which artists are mentioned, or by the art styles and mediums you discuss.

You know your audience. How would you like to be able to find the things that interest you?

Comments

Ah, comments. The place where everyone can virtually gather round and discuss the post at hand without getting off-topic, starting pointless debates, or insulting each other. And just as we’re all about to indulge in a quick drink before we peacefully disperse to go about our lives, I wake up.

All jokes aside, having a comments section can provide invaluable feedback, and the interaction and user engagement can help bring your readers back for more.

One thing I’ve seen many blog designs and themes do is make their comment areas too small. This is especially a problem when you consider two things:

  1. Threaded comments are a standard these days. As people reply to comments, and then to other replies, the content area of these sub-comments tends to get smaller and smaller.
  2. The problem above can be exacerbated when the website’s design is fluidly responsive.

My solution? A comment section should be as wide as the article above it. At least.

What do you like least about blogs? What features are essential for you? Let us know in the comments.

Featured image/​thumbnail, blogging image via Paolo Valdemarin.

Ezequiel Bruni

Ezequiel Bruni is a web/​UX designer, blogger, and aspiring photographer living in Mexico. When he\‘s not up to his finely-chiselled ears in wire-frames and front-end code, or ranting about the same, he indulges in beer, pizza, fantasy novels, and stand-up comedy.

Read Next

Are Simple Websites Better For Business?

As web design technologies raise the bar on what it is possible to achieve on a realistic budget, there’s a rising deba…

Apple Opts for AR over VR at WWDC

An Apple VR headset has been one of the most widely-rumored devices of the last few years, and it was finally settled a…

Exciting New Tools for Designers, June 2023

We’re halfway through 2023 already, and the number of incredible apps, tools, and resources for designers is mounting.

3 Essential Design Trends, June 2023

This month we are focusing on three trends within a bigger website design trend – different navigation menu styles and …

15 Best New Fonts, May 2023

The choices you make when selecting a typeface have more impact on your design than almost any other decision, so it’s …

10+ Best Tools & Resources for Web Designers and Agencies (2023 updated)

Having the ability to envision a tastefully designed website (i.e., the role creativity plays) is important. But being …

20 Best New Websites, May 2023

This month, there are tons of great new agency websites to get excited about. 3D animated prisms are a popular theme, a…

How to Find the Right White Label Website Builder for Your Agency

Web design agencies face a lot of obstacles in closing the deal with new clients. One of the most common ones is the ar…

Exciting New Tools For Designers, May 2023

There are hundreds of new tools for designers and developers released each month. We sift through them all to bring you…

3 Essential Design Trends, May 2023

All three of the website design trends here mimic something bigger going on in the tech space, from a desire to have mo…

10 Best AI Tools for Web Designers (2023)

It’s time to stop worrying if AI is going to take your job and instead start using AI to expand the services you can of…

10 Best Marketing Agency Websites (Examples, Inspo, and Templates!)

Marketers are skilled in developing strategies, producing visual assets, writing text with high impact, and optimizing …