5 Easy Steps to a Simpler Blog Design

Do 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.

0 shares
  • http://twitter.com/vincentveri Vincent

    Thanks for sharing. I’m going to start a new blog, and I really need this kind of article.

  • pesho

    Awesome
    Thanks a lot

  • http://coxy.me.uk coxy

    This blog clearly doesn’t take its own advice.

    • http://lifeinbeta.drewbeta.com drew

      Thanks for pointing that out, I didn’t want to be the only jerk! I love WDD’s articles, but the site takes an inordinate time to load. I usually only read it in Google Reader.

      • Remka

        Strange how I never have any loading problems..?

      • Nick

        i have comcast…
        what is loading?

    • Matth

      I clicked through to the comments section just to point out this glaringly obvious point. Thanks.

      This site treats us to two adverts before the so called ‘fold’ and that’s before we get a single word of useful content. (I too read in google reader so I don’t really care. I just had to check if it was april 1st before posting.)

  • SaturnPolly

    *Never* put any animated elements on your page if you expect me to read more than one sentence. No tickers, no latest tweets, no box that cycles through the (latest|most popular|…) articles. No animated ads.

  • http://www.psdfan.com Tom Ross

    I fully agree with all of these steps. Simplicity is something that I’ve taken years to realize, and is a lot harder to properly achieve than most people think. I’m relaunching my website soon and had literally just enforced all of these steps in the redesign. It’s great to see simplicity so thoroughly discussed :).

  • http://www.ryanspilhaus.com Ryan Spilhaus

    Good tips…although it appears WDD doesn’t follow #4 ;)

  • http://www.eriktdesign.com Erik Teichmann

    The fold does not exist.

    At least, it doesn’t as described in #4 in this article. Users of the internet are trained to scroll. They know to scroll. Research supports it! In this article from analytics provider ClickTale, their research shows that 91% of pages surveyed had a scroll bar, and 76% of those pages were scrolled to some extent. And this doesn’t change based on how long the page is; users are equally likely to scroll a super long page as a short one.

    For example, on TMZ.com, the most used link on the entire site is the “More Stories” link at the bottom of the (very) long homepage.

    Don’t ruin the balance of your blog design by removing element padding, or shortening the header, or removing whitespace. These are key elements to a design to help it breathe. It is my opinion that you will lose more readers to a stifling layout that is hard to read than to a header that pushes 4 lines “below the fold.”

    • http://kilianmuster.com Kilian Muster

      The fold does exist. Nobody says that people don’t scroll below the fold, fact is that in all the years I’ve been involved in ecommerce where about everything is monitored and you get excellent Web metrics, you just see a glaring difference of click through rate between links and clickable items above the “fold” and below.

      I still think with proper design one can improve on that, too. Just don’t say it’s irrelevant, it is still highly relevant, but one has to deal with it more intelligently. The fold does mainly exist, because it isn’t being handled properly with content that invites scrolling in the right way.

  • http://gkldesign.com/ gkl

    Good points, thanks for sharing!

  • http://www.mikesh.ch Mikesh Vulco

    step 1 + 2 + 3 + 4 + 5 = not much off an user experience

    just a thought…

  • http://twitter.com/ossamaweb ossama

    I like this kind of articles; good and well organized content.

  • http://aharmonyofhues.blogspot.com/ Ayush Kumar

    Great tips! Thats where minimalism comes into play many times. The less the number of things, less the confusion. Thanks!

  • http://www.sametomorrow.com/blog adam

    Good helpful post.

  • http://www.childmonster.com/ Childmonster

    interesting article. Thanks for posting :)

  • http://webdesigners.ca/ Web Designers

    great article, very useful info!

  • http://www.webdesignerdepot.com Walter

    Simple blog design can be extremely effective however, it’s not suitable for every blog.

    At WDD, we do things differently as you can tell and we’re very successful with it.

    In general, a simple blog design is a great advice to follow and the reason we posted this article.

    That being said, feel free to break the rules as needed, nothing is meant to be taken literally, do what works best for you and your blog… we did :)

    • http://kilianmuster.com Kilian Muster

      Just because you’re successful doesn’t mean you’re doing everything right. I often hear people say “look at Rakuten or Amazon, their sites are a mess, but they sell like there’s no tomorrow, they must be doing something right!”. Yes something, but not everything, so not all they do is correct.

      The thing they’re doing right is definitely not the UI. They are selling despite an rather bad interface. So maybe WDD could do better by leaps and bounds by simplifying the design interface and making it more easy to look at?

      I personally feel that your content is good enough to keep people coming back, but the design is lacking to be honest. I’d much more enjoy visiting your site if you would overhaul and streamline the design of the site itself.

      Just my two Yen.

      • http://coxy.me.uk coxy

        I agree with this. My main problem is the ‘cluttered’ image of the site do to the amount of advertising on there.

        I understand that advertising is a great form of revenue which will essentially ensure the site runs itself (at least financially), but to look at the site – its a visual nightmare considering this site is a web design blog.

        For me, you need to get rid of the adverts at the top, middle and end of each article. Neaten up the advertising in the right hand column and make the social sharing icons consistent.

        If you want an advertising revenue from the RSS feed (which would make sense, since you have such a large number of visitors), maybe stick to one advert mid-way through the article or at the end – definitely not a the start. Alternatively, use Feedburner’s Adsense.

        Don’t take this the wrong way – I’m not just out to criticize and ‘rubbish’ the site, I’m just throwing in my 2 cents. I’m more likely to visit the site (rather than just read the RSS feed) if it’s visually appealing – which gives you more ammo when it comes to advertising opportunities if others feel the same way – because, with any luck, actual visitor numbers to the site will increase.

  • http://ByATool.com RockCityGhost

    Nice article, with good, relevent examples. My only counter thought is in regards to step 3. Having tinkered with our blog many times, we have found that because alot of our readers come via Google searches, we need extra elements on the sidebar. The tag cloud, related posts, and recent posts all help new readers see what else they can readabout on our blog.

  • http://rt-now.com/ Rob T

    I recently made my blogs header much thinner as well. I focused more on delivering the content clearly then making a flashy design. Content is king!!

  • http://blog.vinhkhoa.com/ Vinh Khoa Nguyen

    Thanks for the great post. Time to go back and clean up my blog :-)

  • http://www.altwebmedia.com Alt web design

    This is really some new and useful tips. Thanks you very much.

  • http://superdit.com aditia

    thanks for the tips, it will saving me more time when designing the web

  • http://www.psyched.be/wordpress Darkened Soul

    Thanks for this article and indeed, the more choice, the harde it is to choose… However, if we do need extra elements as a way to welcome the repeat-visitors, I’ld suggest to not let the footer linger around doing nothing, just bring alot of what u have discarded and put it in the footer (not everything, useless features are… useless, but just to give that bit of extra to visitors who DO like to see more after reading an article.)

    but of course, it all depends on what sort of site it is, what message u want to convey and who your visitors are…

  • http://adlankhalidi.com Adlan

    Thanks for sharing these points. I’ll try to come up with new layout soon, based on your ideas.

  • http://www.shermanunkefer.org/ Sherman Unkefer

    Simplicity is key when running a blog. Too much stuff makes the blog overbearing for the readers. This blog has been helpful.

  • http://www.perfilgeek.com Edwin Sandoval

    Like are missing more steps in this post : )

  • http://www.psdstyle.net chuckles

    Wow – could these samples be any more boring? No offense guys I love the site but blah……………….

  • http://www.iamautocomplete.com Angelee

    Speaking of simplicity, Zen Habits is what I like most. The author shows real passion in blogging. He is not even accepting advertisements, so it just shows how passionate he is with his blogs.

  • http://www.webdesignerdepot.com Walter

    @Kilian and Coxy: These are valid points. We’re long overdue for a redesign/realign, and it’s coming soon. I’m aware that we can improve things and I appreciate the genuine feedback very much!

  • IPHONE KILLER

    Nice article very useful. Perfect Timing because I’m planning to create my own blog ^^.

  • http://www.benstokesmarketing.co.uk Ben Stokes

    Nice . . . I am a firm believer in keeping things simple and totaly agree with keeping colours to a minimum. Great article guys :)

  • http://www.design-technology-media.co.uk/ Steven

    Already do it when I can.

  • http://www.pisyek.com Pisyek

    nice tips~ xD

  • http://www.alexdixondesign.co.uk Alex Dixon

    Interesting post, although I think slightly opinionated.

  • http://www.ejbdesign.com eric

    Totally agree with these 5 points. For a mobile blog. These suggestions feel more fitting for optimizing a blog, than making it more effective. But I guess the title is “simpler” not “effective”.