Everybody loves discovering great content, but who likes stumbling around a clumsy design that makes it hard to access said content? I’ve seen it time and time again: talented bloggers who seem to go out of their way to make it difficult (or even impossible!) for readers to browse through their past articles and recipes. Good design is not rocket science: paying close attention to the layout and content of the most important elements of a blog can make readers stay on your blog for a long time and click from page to page to page. If that’s what you want for your blog (I hope it is!), here are a few pointers to help make your blog layout better.
Note: These tips are provided as general “best practice” rules. Of course, not all tips apply to all layouts. Take this information as inspiration and adapt it to make your own custom blog design better and be sure to also check out our very successful post on 7 Tips To Instantly My Your Blog More Reader Friendly.
1. The Blog Header
The header is the very first thing readers see on your blog, therefore, it may be the most important (but most underestimated) one. A header can be super simple and only display your blog’s logo or name, or it can be more elaborate and show graphics or photos. Whichever way you choose to go, make sure that it represents your blog well, whether it be by the colours you use, the photos you display, or the font your blog’s name is written in.
In addition, your header should display a short description that says what your blog is about to give readers an idea of what to expect. When crafting your description, carefully choose every word and make it meaningful. The fact that star bloggers, like David Lebovitz, Heidi Swanson, and Shauna Ahern, still bother to show a description in their headers should prove everyone needs one.
2. A Blog’s Menu
A well-edited navigation menu is essential to a blog. It’s the gateway to everything: the recipes you spent so much time creating simply won’t be seen if you don’t provide easy access to them. Your menu can be horizontal or vertical, but resist the urge to cram all your blog categories in it. Edit it so it neatly displays important pages and main categories. If necessary, use submenus to provide easier access to wide topics. For example, a “Recipes” main menu item could display a submenu on rollover, showing a few more categories like “Appetizers,” “Main Courses,” “Sides,” and “Desserts.”
Here are the links that should appear in your blog’s menu:
- Your most important or popular post categories (with submenus, if necessary);
- Your About page: This is one of the first pages readers want to see, but many bloggers still forget to craft a good one;
- Your Contact page: This is another too-often forgotten one. You may not want to display your e-mail address, but you should always provide an easy way to contact you;
- Optional: Pages you want to give quick access to, depending on your blog’s purpose. For example, “Advertise,” “FAQ,” etc.
Links to secondary pages or categories should be displayed in the footer, in a secondary menu, or in the “Quick Links” section of your sidebar (see below).
3. A Blog’s Content Column
Content is star on a blog, so it should breathe, that is, show a lot of whitespace around it to improve readability. Avoid clutter, make sure titles clearly contrast from the content, and use fonts that are legible. Script and decorative fonts look pretty but they are unreadable in small sizes.
Here are things that should appear in your content column:
- Titles and subtitles, displayed in different sizes to indicate hierarchy;
- Post date (at top or bottom of post);
- Content, displayed in a legible font;
- Link to comments or comment section, depending on the page;
- Social media sharing options;
- Pictures, if applicable, preferably displayed the full width of your content column;
- Categories to which the post belong, chosen carefully so that this doesn’t become an endless list;
- Related posts, providing easy access to past content and encouraging readers to stay on your blog longer.
The post author, publish time, and post tags are optional. Tags, in particular, can quickly become clutter when they are not carefully selected. Better not to display them if you don’t want to spend time editing your tag list; categories already do a good job to classify posts and help with search engine optimization.
4. A Blog’s Sidebar
The sidebar is the extra space located on the right or left side of the main content column. This space is usually filled by ads, banners, links, social media widgets, newsletter subscription boxes, pictures, teasers for other pages of the blog… just to name a few. This (sometimes dizzying) collage of visual content appears on each and every page of your blog, so please, keep it clean!
Overfilling your sidebars distracts readers from your content and possibly makes them click out of your blog faster than you wanted them to, resulting in a high bounce rate. Elements that are not part of the navigation and don’t need to be seen at all times should be moved to other sections or pages.
On the opposite side of the spectrum, some blogs have no sidebar or near empty sidebars, which makes readers hunt for the information they’re looking for. Blog readers are not the most patient creatures in the world, so hiding important info will also result in a high bounce rate.
Here are things thatshould appear in your sidebar:
- Links or icons to your social media accounts (these can also be displayed in the footer);
- Links to your most popular posts or categories for quick access;
- A search box: Use a reliable search plugin or provider, such as Google’s Custom Search Engine, to allow readers to quickly find what they’re looking for.
- Advertising: Avoid showing too many different banners; focus on the network(s) that are the most profitable to you.
This is plenty to fill up your sidebar. If you have more to show, consider using the footer, or, as I said earlier, add that content to existing pages (for example, badges that show membership associations or blogrolls can be placed on your About page).
5. A Blog’s Footer
The importance of the footer is often overlooked; my own blog still only shows a copyright notice, but this is a waste of space. Just a few years ago, web design was all about the “first screenful,” where all the important information was supposed to be displayed. This changed with the growing popularity of blogs, which made people willing to scroll down again. Now, important (but secondary) information can and should be displayed in the footer, allowing for leaner menus and sidebars.Here are some of the things you should use your footer to display:
- Short lists of popular categories or posts;
- Newsletter subscription box or link to RSS feed;
- Social media icons (if you’re not already showing them in your sidebar);
- Links to secondary pages;
- Copyright notice;
- Website design and development credits.
A note about blog backgrounds:
A blog’s background is another design element that is often overlooked. There’s nothing wrong with an all-white background, but a carefully chosen background pattern or image can add a lot of visual interest to a site. If you choose to display a background pattern, make sure it tiles. Tiling means that the pattern can repeat seamlessly so your blog looks good on displays of all sizes. Similarly, if you choose to display a picture, make sure it’s in very high resolution so that it can stretch to fill up all the empty space on large displays.
The Five Most Important Elements of a Blog Layout was written by Marie Asselin, a French-Canadian graphic designer, translator, and blogger who enjoys arguing for the cause of leaner, cleaner websites. She is the author of food and travel blog Food Nouveau. She lives in Quebec City, QC. Twitter: @foodnouveau