Quantcast

Blogging 101: Choosing a Layout – Part 2

by Jamie on September 14, 2011

If you are following this Blogging 101 Series, you may have caught yesterday’s post, Choosing a Layout – Part 1. Well, we are back today as promised for the second installment on this topic. Today, Katie and I are going to be discussing our Do’s and Don’ts of headers, footers and sidebars.

Header Do’s

Keep the size minimal. Readers don’t want to scroll and scroll past the huge image of your blog name just to get to your actual content. Ideally, the header should be around 200 pixels in height.

Include useful information in the header area. Links to pages such as: home, recipe index, about, frequently asked questions, contact, etc. are usually found in the header area. These subareas are typically found within a navigation bar, often referred to by design and web folks as a “nav bar”. Keep in mind that your ultimate goal should be to make navigating your site as simple and straightforward as possible. MBA has two different nav bars, one for the items mentioned above, and one below my header for the different sections that I write about.

Header Don’ts

 
Don’t go crazy with fonts. Print design recommends no more than 3 different fonts on a particular page, but we can get away with a 4-5 on a webpage if necessary. Keep the text clean. For example, Katie didn’t want GoodLife Eats to be in all cursive because that may be a little difficult to read and may have also been a little too busy. It’s fine to emphasize a word or two through use of decorative fonts, as Katie does with the word “eats” but going crazy with fonts can make your header appear disconnected and messy. It’s also best to not take up a huge portion of your reader’s entire screen just with your header (see: Header Do’s).

How Should I Arrange My Columns and What Should I Display There?

 
Most blogs have a two or three column layout. The largest column is where your blog entries will post. Then you can decide between one or two more additional columns which can be placed side by side (like here on MBA), flanking the main column on the right. Some blogs chose to have two columns flanking their main column on the left, and still others go for a main column in the center, with one narrower column on each side. Really, the choice is completely up to you. Personally, I liked the look of columns side by side on the right of my blog, so I went with it.

Typically sidebars can house items like drop-down menus (archives, tag clouds, blogrolls categories), a search field, any badges or buttons you care to display and of course advertisements. But sometimes bloggers use the sidebar area as a “junk drawer,” and we’ve definitely been there. But, it doesn’t have to be that way. With a little organization you can remind your readers of useful content from your blog that is no longer on the front page. Many bloggers like to use part of this area to feature a popular series or ongoing topics on their blogs as Katie did by placing a link to the Eat Well, Spend Less series.

Katie also uses the area to display her popular Kitchen Tips Series and has a nice little design on the sidebar to include a thumbnail image of the most recent tip, plus it’s title and link. Below that are the links to previous kitchen tip posts.

sidebar feature imageMBA uses the sidebars for items such as search, archives, and advertisements – which also be a topic down the road. You can also add images to link to sections of blog that you’d like to highlight – for example, your Amazon store.

Katie also features a tabbed menu at the top of the sidebar to include information such as her weekly menu, search, subscription information, and tags. You don’t have to organize it in a tabbed menu, but that’s one way to do it – Katie simply wanted a streamlined way to consolidate some information.

Up next design elements such as color scheme, fonts, spacing, etc. If you questions regarding this topic or would like to request a topic, send us an email at questions@mybakingaddiction.com.


{ 9 comments… read them below or add one }

Jessica September 14, 2011 at 8:16 pm

Very cool! Thanks for the help! As someone who is fairly new to the blogging scene this is very helpful :) you totally inspire me!

Reply

The Sweet Cupcaker September 15, 2011 at 10:44 am

this is so helpful! When I first started out I have to admit that I had quite the vivid and crazy design but now that I have toned it down to only a few fonts and an easy to read page, I love it ten million times more!

Thanks!

Reply

Clarissa September 15, 2011 at 12:30 pm

Thanks for this series! I just recently started myself and started with lots of flowers and colors and curvy fonts, before I realized I wanted the food and posts to be the focus, not others peoples’ graphics!

Reply

Frostine September 27, 2011 at 9:57 am

This is a great series! Thanks so much for sharing your blogging expertise with all of us out here in blog land. I’ve been blogging for just over a year now and still have so many unanswered questions. I’ll be watching this series for sure!

Reply

New Baker on a Journey November 13, 2011 at 9:26 pm

Love… Love… Love it! I am new to blogging and your post was extremely informative. Thanks!

Reply

TRACY14 April 5, 2012 at 12:37 pm

i love this website its super super kool !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!lol

Reply

Heather May 16, 2013 at 3:41 pm

What is the difference between tags and categories? How are they used differently? Setting these up make it easier for someone to search your blog?

Reply

Karen @ Practical MOMents July 11, 2013 at 10:50 pm

Thanks for these tips. I’ve been working on designing my own website. I’m learning a little bit at a time. I really appreciate when other bloggers take the time to share :-)

Reply

Ibrahim May 17, 2014 at 1:56 pm

I really like your overall ease of navigation. I really love your passion for chocolates. Equally impressive are your photographs. They are stunning. Literally.

Thanks

Reply

Leave a Comment

Previous post:

Next post: