5 Easy Steps to a Simpler Blog Design

Wdd Logo.
September 20, 2010

Simpler Blog DesignDo you want a simpler design for your blog? One that’s lean, elegant and attractive?

Well, there are five easy steps to making your blog look better and to attracting more subscribers, customers and members.

And you don’t have to be a design ninja or have worked at Apple to pull it off!

These steps are simpler than you might think. Those who aren’t sold on simplicity might ask: why would I want it?

Here are three convincing reasons that may work for many blogs:

  1. Your blog will be easier to read and navigate, and visitors will stick with it.
  2. Simplicity translates into strong branding. Like a clean office, a simple blog gives visitors a good impression of you and could lead to new subscribers, customers or members.
  3. You’ll just plain look cooler.

Convinced that a simpler design is better for your blog? Great. Enough jibber jabber, then. Let’s get started.


1. Put Content Front and Center

Copyblogger

Prioritize content and call-to-action elements over everything else.

Follow the 80/20 rule: 20% of what’s on the page delivers 80% of the value. What content do visitors come to your blog for? What do you want to achieve? Do you want visitors to read and subscribe to a blog, buy a product or sign up for a service?

The call-to-action elements are the 20%, and everything else is the 80%. Put that 20% front and center; give it priority placement, and make it visible on each page, because it’s what matters most.

So, how do you make your content important? You do it in any number of ways, depending on what’s appropriate for your blog. Here are just a few:

  • Make the sidebar smaller.
  • Enlarge the font in the main content area so that it’s larger than the font in surrounding areas.
  • Thicken or darken the font.
  • Put graphics and eye-catching elements in the main content area rather than in the sidebar or header.

Next, remove as much of the 80% (i.e. the unessential elements) as possible.

How? The next four steps will guide you.


2. Get Rid of Unnecessary Elements

Zen Habits

Leave only elements in and around your posts that directly contribute to the experience you want visitors to have, and get rid of the rest.

  • Is your content timeless? Then remove the date stamp.
  • Are you the blog’s only author? Then remove the byline.
  • Does most of your social media traffic come from one or two sources (e.g. Twitter and Facebook)? Then keep those icons and ditch the others.
  • Not getting any comments? Then there’s no need for a section saying “Comments closed.”

For visitors with short attention spans, your blog will be easier to read; and with fewer choices (i.e. buttons), more people are likely to click and share.

Think about it: when was the last time you clicked on one of those social media badges in a row of ten or more? Isn’t it easier when there’s just a “Retweet” button?


3. Get Rid of Unnecessary Sidebar Elements

IttyBiz

The more stuff that is in the sidebar, the greater the chance that visitors will click away from the main content (that all-important 20%), so make the sidebar as lean and unobtrusive as possible.

Remove all non-critical widgets and elements, including:

  • Admin and meta features
  • Links
  • Recent posts
  • Top comments
  • Latest tweets

Here’s a simple way to determine whether a sidebar widget or element should stay: ask yourself whether it would be worth a visitor to stop reading and click on it. If not, get rid of it.


4. Shorten the Header’s Height

I Will Teach You to be Rich

Move more content above the fold by shortening the height of the header.

Why is this important? The more content that appears above the fold, the more likely new visitors will stay and read, because they’ll immediately see the content without having to scroll or scan down.

A few simple ways to shorten the header’s height:

  • Remove white space; your theme’s style sheet is your friend.
  • Make the logo smaller; again, it’s style sheet time.
  • Reduce wasted space by combining two rows. If your logo doesn’t need its own row, move the navigation menu to its left or right.


5. Reduce the Number of Colors

Chris Brogan

The fewer the colors in your design, the easier it will be for the visitor’s eyes (which are lazy by nature) to focus, meaning the visitor will stay on your blog longer. Try to use no more than three colors (that is, three in addition to your main text color, which is probably black or white): one for the background, one as your primary and a third as your secondary.

Here’s one possible three-color scheme:

  • Background: white
  • Primary (logo, links, call-to-action buttons): blue
  • Secondary (icons, graphic flourishes): green

When in doubt, use fewer colors.

The more colors you display, the more stimulated the visitor’s eye will be, and the greater the effort they will have to exert to focus, and thus the more inclined they will be to click that “Back” button.

Notice how Apple sticks with just white and silver. That might sound boring, but it’s stylish, simple and attractive to most people.


5 Steps Summarized

Daring Fireball

Simplicity is an art, and these five steps are just the beginning. These are the easy 20% of changes you can make to get 80% of the way to a simple blog design:

  1. Put content front and center.
  2. Get rid of unnecessary elements in your posts.
  3. Get rid of unnecessary sidebar elements.
  4. Shorten the header’s height.
  5. Reduce the number of colors.

Take these steps and you’ll be well on your way to a simpler blog design—one that will help you achieve your goals.


Written exclusively for Webdesigner Depot by Oleg Mokhov, the world’s most mobile electronic musician and co-founder of Soundtrackster, the premium royalty-free music store.

What other tips and tricks do you know to simplify a blog’s design? Share them in the comments section.

WDD Staff

WDD staff are proud to be able to bring you this daily blog about web design and development. If there's something you think we should be talking about let us know @DesignerDepot.

Read Next

15 Best New Fonts, July 2024

Welcome to our monthly roundup of the best fonts we’ve found online in the last four weeks. This month, there are fewer…

20 Best New Websites, July 2024

Welcome to July’s round up of websites to inspire you. This month’s collection ranges from the most stripped-back…

Top 7 WordPress Plugins for 2024: Enhance Your Site's Performance

WordPress is a hands-down favorite of website designers and developers. Renowned for its flexibility and ease of use,…

Exciting New Tools for Designers, July 2024

Welcome to this July’s collection of tools, gathered from around the web over the past month. We hope you’ll find…

3 Essential Design Trends, July 2024

Add some summer sizzle to your design projects with trendy website elements. Learn what's trending and how to use these…

15 Best New Fonts, June 2024

Welcome to our roundup of the best new fonts we’ve found online in the last month. This month, there are notably fewer…

20 Best New Websites, June 2024

Arranging content in an easily accessible way is the backbone of any user-friendly website. A good website will present…

Exciting New Tools for Designers, June 2024

In this month’s roundup of the best tools for web designers and developers, we’ll explore a range of new and noteworthy…

3 Essential Design Trends, June 2024

Summer is off to a fun start with some highly dramatic website design trends showing up in projects. Let's dive in!

15 Best New Fonts, May 2024

In this month’s edition, there are lots of historically-inspired typefaces, more of the growing trend for French…

How to Reduce The Carbon Footprint of Your Website

On average, a web page produces 4.61 grams of CO2 for every page view; for whole sites, that amounts to hundreds of KG…

20 Best New Websites, May 2024

Welcome to May’s compilation of the best sites on the web. This month we’re focused on color for younger humans,…