Close
Close

Important Elements of Blog Design & Layout

Hello everyone, I’m Matt from NetBusinessBlog.com. I’ve been doing web design and development for the last 7 years but have just recently started blogging. Hope you find my content on par with the rest of the articles here, and don’t be afraid to let me know what you think.

The eruption of popularity for blogs came on the heels of the Web 2.0 “revolution”. With this in mind it’s easy to see how blogging has adopted most of the ideas of design which focus on minimalism, the focus on content, user experience, and compatibility. It is something that has been built into blogging from the beginning whether you realize it or not. It is important that you keep these aspects of the new web in the front of your mind when you’re designing your blog.

Focus on Content

Ever heard the saying “content is king”? Well if you haven’t, keep it in mind. Just about every website relies heavily on its content to attract and retain new visitors, but it is even more vital when dealing with blog design. Blogging is centered almost entirely around the content, and you have to make sure that your design does not take away from that.

Your design may take focus off of your content if your header, for example, takes up the entire area above the fold. One of the first things you want visitors to see when they wander into your blog is your delicious content, not a page full of graphics.

If you look at how Darren has setup his header, you’ll see that one of the first things his readers see is links to some of his most read articles. That is a great way to get users engaging in your blog rather than just browsing the main page and leaving. At my blog I like to have a couple of my best recent articles as well as some introduction text up at the top to entice users to dig more through my site.

User Experience

Many bloggers work so hard getting people to visit their blog that they forget how they’re supposed to treat them when they’re there. Despite the fact that there is usually one author and multiple readers, blogging is not a one-way relationship. You have to engage your readers and get them involved in your blog in order for it to grow. How does this fit into design? Well if your design makes it hard for your readers to interact with you, there is a definite problem. Here are a couple things I’ve found useful:

1) Make your comment link prominent – Many users will know that if they click on a blog post’s header they’ll most likely be taken to a page where they can comment, but believe me when I say not everyone knows this. What people do know, however, is that when they see a big “Comment Here!” box they know where to go and what to do. It also never hurts to include a dialog box icon next to your comments link.

2) Make it easy to contact you – As a blogger, much of your content will be user contributed or at least inspired by your users. You want them to be able to contact you with as little hassle as possible. Not to pick at Darren too much here, but when I tried to contact him for the first time, I admit it took me a good 10 minutes to figure out where his contact page was! I completely glazed over the little link in the sidebar. Luckily for Darren, I’m tenacious.

Overall you want to make it as easy as possible to interact with your users, so always keep user experience in mind when laying out and designing your blog.

Compatibility

There isn’t a whole lot to say about compatibility aside from simply stressing that you need to make sure that your blog is accessible to as many people across as many platforms and browsers as possible. Much of that will fall on the programmer’s end, but the designer can help improve compatibility by using text over graphics as much as possible and laying out the navigation and content so that it is easy to display.

Blogging is part of the Web 2.0 craze, so always be sure to keep the foundations of the new web in mind when designing and laying out your blog!

Read more of Matt’s work at NetBusinessBlog.com

About Darren Rowse

Darren Rowse is the founder and editor of ProBlogger Blog Tips and Digital Photography School. Learn more about him here and connect with him on Twitter, Facebook, Google+ and LinkedIn.

Problogger.net runs on the Genesis Framework

Genesis Framework

The Genesis Framework empowers you to quickly and easily build incredible websites with WordPress. Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.

Check out the incredible features and the selection of designs. It's that simple - start using Genesis now!

Comments

  1. Mat says:

    Good post Matt, nice and basic.

    “”I admit it took me a good 10 minutes to figure out where his contact page was! ”

    Given that Darren has so many visitors, he’d probably only want to be contacted by people who really want to get in touch.

    Imagine the amount of emails the man gets every day!

  2. Steve James says:

    Matt,

    Great job with your guest post. To piggyback off Chad’s guest post, how do you feel about ad placement on blogs? Where do you think the hot spots are in a blog’s design layout? I see that you touched a little bit on your blog about it in talking about your recent changes. What are your best performing ad zones? Sorry if I missed you talking about this before.

    Thanks,
    Steve

  3. eric hebert says:

    Welcome, Matt. Obviously a good point. I don’t know how many times I get an “About.com” result in Google that’s just swamped with ads. I’m at the point where, if I notice a plethora of ads within a few seconds of landing, I just hit the back button.

  4. Matt, great guest post man, makes a lot of sense to me. As an advertiser on your blog, it is my duty to support your work, haha. Have a great weekend everyone!

  5. OhCash says:

    Absolutely. User experience is a must that many people just forget or overlook. User experience is an important element of regulars along with a possibility of a means to traffic.
    Great post!

  6. Mike Panic says:

    Again, great article with information that should be common knowledge but isn’t to a lot of bloggers. I see so many 3 and 4 column WP blogs where the content is only 300 pixels wide and the rest is so filled with ads and crap that one can’t find navigation, previous blog posts or content.

    Last night I installed the Firefox extension Sage to help better manage my RSS feeds from my Google homepage. In doing so, I had to visit all the blogs I normally read to get the RSS feed again. You have no idea how troubling it can be to not be able to find an RSS feed on a site in the first 5 seconds. For a few of the blogs I had to view the source code just to snag the RSS.

    Some bloggers are great graphical designers in addition to their skillful writing, others have no clue about end user experience and just make things look pretty, so they think. If more bloggers put time into making their blog end user friendly, they’d get a lot more readers.

  7. Teresa says:

    I feel terrible. In the “make it easier for people to contact you” part, I’ve realized it’s quite easy for people to contact me. Which is great. But- I find it hard to contact them back. On blogspot, I have yet to find the “Reply” button!

  8. Raghu says:

    Good post Matt.

    My articles on blogging at http://www.raghucs.com/category/blogging/

  9. Gdog says:

    Excellent article Matt. Good to see you guest blogging on top blogs once again! Well done.

  10. Christa says:

    Good job Matt, WoW you have to get up pretty early to be the first commenter!

  11. Barsawda says:

    You have been a great teacher and advisor. I, way out here in a remote part of Yemen, have – for the past few months – used your tips and it has worked very well for both my blogs The other one is: http://binawadh.blogspot.com/

  12. Matt, you’re everywhere!

  13. Andrew says:

    Matt, Interesting article; however, I would have been interested to read your thoughts on the must haves.

    I recently read an article that quoted many of the conventional things (categories, search box, archives) as must-haves. I disagreed.

    Is the lack of a list of must-haves an indication that you think they are not must-haves at all?

  14. Harry L says:

    I’ve found that that first impression is very important in looking at a new blog.
    If I see some interesting content links right away, I will be inclined to stay a while and “browse”. If I get overwhelmed by ads right away, I may not bother to take a real look around.

  15. Very nice guest post Matt, and congrats on landing a spot at Darren’s famous blog, quite a feat!

    I agree with a lot of what you say here, especially what you mention about making it easy to contact you. I’ve been trying to get in touch with a few bloggers lately, and I’ve found that many bloggers don’t even have a contact page. It leaves me a bit dumbfounded, because what’s the point of not letting your readers get in touch with you?

  16. Hi Matt,

    Certainly, content is King. How about the visitor being a Queen.

    When both come together, the power of the Queen’s word-of-mouth-publicity brings in the fully loaded Traffic. Boom!

  17. Terry Ng says:

    Design should support the content.

  18. Joost says:

    I guess the most important thing when thinking about your design is who your audience is gonna be. If you’re writing a blog about art or design you can’t get away with a design that’s too simple.
    We’re all geeks here, we’re looking at the content and functionality and we think ads are evil (how do you guys make your money, by the way….?). I also always have discussions with our designer about the fact that he makes everything too heavy and he uses too many images, but if your audience expects elaborate designs you should give it to them.
    Besides this, it also has to do with credibility. If you want to say something about design you’d better be a good designer yourself and you need to show this. And a shoddy website is never something you want to advertise your company with.
    (NB: personally I think both Darren’s and Matt’s blog are too busy above the fold, but kudos for the rest)

  19. Edrei says:

    Content is definitely King. Thing is, so many people tend to emphasize on design so much that they forget that it’s what people read that makes it good. People tend to want the best looking designs with features that people won’t use.

    Worse yet are the people who demand code validation or they’ll write your blog off without even looking at the content. It’s just a bad circle.

    The most people that people need to do when designing a layout for their blog is to eat their own dogfood. To ask themselves, what would they want when they visit a site? Would they use what they put on their blog? If not, then it’s probably not needed. But people don’t usually do that and the result is a huge mess of pretty (useless) things.

    Things like this are much more obvious on personal blogs where it doesn’t rely on information or up to date news. Without a proper distribution of content, it’s hard for things to work.

  20. Hi Matt
    Nice article. I’m on a 12″ laptop with a widescreen format at the moment. On this format your site at http://www.netbusinessblog.com/ looks very ad heavy before I start scrolling down. This got me thinking about screen sizes and clickthrough rates. Do you track your visitors by screen size, and if so do you notice users with tiny screens like mine disappearing? On a larger screen the content is much more obvious and compelling at first glance.

  21. Razeen says:

    That is a good article Matt.
    Maybe i can give another tips:
    1. Add Rss Feed link near your header or it is in your header, so the reader can subscribe it easily.
    2. Latest entries or Popular entries post are put in your header.

    In my opinion it is good to attract your new visitors.

Trackbacks

  1. [...] Matt Coddington de NetBusinessBlog publicó en ProBlogger un excelente artículo que incluye estos elementos importantes en el diseño de un blog para que sea exitoso e incluso puedas ganar algun dinero con el. [...]

  2. [...] OK, if you look back at Part 1, you will find I listed choosing a Column Layout first on the To Do list. However, do you always do your To Do’s in order? Not me. Well, actually, it’s not my idea. In researching the whole column/page layout concept for today, it was pointed out there were some other considerations to consider first. In a recent guest post at ProBlogger, Matt Coddington from NetBusinessBlog shares the Important Elements of Blog Design & Layout. [...]