10 Blog Layout Tips

Hi friends! Today we'd like to welcome Katrina from Pugly Pixel. She's got an incredible eye for all things Photoshop and Blog related. We're happy to have her as a new contributor here at A Beautiful Mess. Today, she's here to share 10 Blog Layout Tips! 

I really enjoy blog makeovers and looking through sites for the first time. It's so much fun when a blog has great content and a design that keeps me navigating fluidly from page to page. In fact, when it's really good, I can spend hours on the first visit. And then there's the other side of the story, a new blog with great content, but encumbered by a design that's really hard to go through. Blogs that hold my interest do some things right and make me want to keep clicking around and I've noticed that these engaging blogs have a lot of common features. I don't claim to be an expert in user interface design, but I've learned by experience that these details make a difference. 

Here's an example of a blog layout that's not easy to look at. Read the tips below to find out how certain elements could be improved. Then, look below to see an example of a stronger blog design. 

1. Vertical Alignment. When something sticks out, you notice it. And when a picture or text sticks out from the rest of the column, it looks like a mistake and it becomes a distraction. Things look right when paragraphs and images all fit into their columns precisely. Images and paragraphs should be the same width and this applies to sidebar elements, too. There are times when a design may intentionally call for doing otherwise, but in general, it's good practice to keep things lined up.

Quick Tip: For the content area of your blog (this is where your blog posts reside), choose a common width for all the images and make sure that your paragraph widths are the same. Left-justified paragraphs are recommended for readability. Although the text may look ragged on the right side, that's okay.

If you have sidebars, the same tip applies --- choose a consistent size for your images and make sure they line up vertically. Images that stick out make the the page look cluttered.

2. White Space. A crowded page can feel claustrophobic and overwhelming, even when it's well-organized. Having white space --- or well-spaced page elements --- makes those sections easily identifiable and easier to read.

Quick Tip: You can control the space between the elements or sections of your blog by adding some margins and/or padding. If you're comfortable with adding code to your blog, you can control the space between elements with the margin and padding CSS attributes.

3. Uncluttered Sidebars. Navigation usually refers to the links we include in our horizontal navbars and sidebars. Navigation's purpose is to make it easy for readers to browse and "navigate" through your blog. Since the navbars and/or sidebars are visible on every page, the information we choose to include in these areas has to be meaningful and useful. It's easy to fill up these areas with every conceivable link to all our static pages and favorite blogs and websites. However, since these areas have a finite amount of space, we have to be mindful of what we put there. If fill up these areas with a lot of information, it tends to confuse. So, we have to curate these areas with good links and keep them neat and tidy and easy to read. Keep your sidebars uncluttered!

Quick Tip: If you have a blogroll on your sidebar, consider moving it to its own page and then add a link to it from the sidebar.

4. Accessible Info. Sometimes you need to ask a blogger a question and you want their contact info ASAP. I've come across many blogs that don't provide any way to contact the blogger, and if it was there, I couldn't find it. Make it easy for your readers to find the information they need by providing visible and easy-to-find links to your about page, contact info, and RSS feed.

Quick Tip: Keep important links in plain view --- categories, featured posts, search box, links to archives, and other links to resource/static pages.

5. Short Description. Your blog banner is the first thing visitors see when they arrive at your website. It's nice when a blog has a short description on the banner that tells what their blog is about. For example, Nubby Twiglet, Shutterbean, SFGirlbyBay, and Creature Comforts have short descriptions in their banners. These well-chosen words remove all ambiguity and give the reader a clear idea of what to expect. 

Quick Tip: If you don't already have a short description for your blog, browse through your old posts and observe the topics you've written about the most. The theme of these posts constitute the primary subject of your blog and is a good place to start when drafting a short blog description. This short description can be a comma separated list or a phrase.

6. Typography. It's good to limit the number of fonts to no more than three --- one for post titles, one for the sidebar titles, and another for the post body. Too many fonts tend to make a page look really busy. Additionally, when choosing fonts for your text, aim for legible fonts in a readable size. Now that web fonts are popular, I've seen some sites that use script fonts that are really hard to read. Whatever font you choose, keep legibility in mind.

Quick Tip: The most readable font under 14px is Verdana and larger than that, Arial is the most readable.

7. Colors. Colors are great. They're magnetic and draw attention. For our blogs, it's best to choose colors that direct attention to the areas where we want the eye to go. A splash of color in the banner and little dabs of color here and there place visual markers of importance for our readers. However, using too many colors can become a distraction --- there will be too many places for the eye to go and it can cause attention paralysis.

Quick Tip: I personally like to keep my blog layout neutral so that I can go color wild in my blog posts. I LOVE color, but I minimize it in my blog layout and the reason is this: If both my layout and blog posts are colorful, it becomes confusing because there isn't a focal point the eye can rest on. So, use colors wisely and place them carefully in areas you don't want your users to miss --- like your content (your blog posts).

8. Profile Photo. I used to think profile photos were unnecessary until I read an article about how the Wikipedia decided to use contributors' profile photos to show that real people were working behind the scenes to create all the free content we enjoy. I realized then that using a profile photo adds a lot of humanity to our online life and this especially applies to our blogs. Profile photos can be on the sidebar or on your about page. When I say photo, I mean a real photo, not one of those cartoon avatars that were so popular a few years back. :)

Quick Tip: I get really self-conscious when other people take my picture, so I usually take my own! :D Elsie has awesome tips on how to take better self portraits.

9. Fast loading pages. It's really frustrating to visit a site with a lot of great content, then find it painfully slow to load and navigate through. There are many factors than can make a blog slow, but this problem is especially common with image-rich sites.

Quick Tip: One way to help pages load faster is to use images that are optimized for your blog. Some blogs I encounter load images that are far too large for viewing. For example, the image width may be set to 600px, yet the image that loads is actually 1200px! To make it worse, there may be 5 images per post and 12 posts per page, which turns out to be quite an extra load! So, we help our pages load faster by uploading images with dimensions that fit our posts perfectly. Another way to help your page load faster is to limit the number of posts per page. And one more thing, you can add a "Read More" link after the first couple of images and an excerpt.

10. Backgrounds. Background Patterns are great and they can add a whole lot of fun and personality to a blog. However, background patterns that don't tile look like mistakes. I mention this because I once designed a site on a laptop with a small screen. Some time later, I saw the site on a pal's large monitor and I realized that the background covered only half of the screen real estate! It wasn't the end of the world, but it looked amateurish.

Quick Tip: If you're going to have a background pattern, make sure it tiles. What I mean is, make sure that no matter how large the monitor, that your background will tile from top to bottom and/or left to right. Take a look at your site from monitors of varying sizes. If your monitors are pretty much the same size, take a look at your blog the next time you visit a computer store and view your blog with the largest monitor you can find.

Here's an example of a stronger blog design. In this design, individual elements are working together to create an easy to navigate site. 

I want to mention again that these are tips, not rules. They're just things I've observed and really like to see in a blog. How about you guys? Any blog layout tips or opinions? Do you have any questions? Katrina 

Comments

[Tina @ Tinacious Me]

great advice! Thanks guys!
http://www.tinacious.me/

[Lauren]

I've been looking to update my blog layout, thanks for the great tips!

[Sierra]

Excellent Advice, Thank you!

[Natasha]

Excellent advice guys. I need to dedicate real time to learning code, and how to make my blog look much better. Right now it looks pretty amateur.

xoxo
http://natashafatah.com
http://natashafatah.com

[Mandi]

is that latin?!

[shari]

i really loved this post. well written, Katrina. I always learn something that is USEFUL! xo, shari

[Bird]

I have a massive blog crush on Katrina so really happy to see her here and kicking things off with a very useful post! Nice work!

http://asthebirdfliesblog.com

[Carlee]

Love the tips. Your ladies blog is so wonderfully laid out. Glad you gave some tips and tricks!
Carlee

[Diana]

Thanks for this post! Wonderful!

[Nat]

Lovely post! I love Pugly Pixel and it was fun to see a post here :)

xoxo
Nat

[Kjersti]

Thank you for the good advices, I´ll work on that right now! (:
www.themurmuration.net

[Chloe Jacqueline]

Wonderful tips! Thanks for sharing!

[Sarah]

I totally pulled up my own blog to compare when I was reading this! These are great tips! Now I just need to figure out how to fix some of the issues my blog has!

♥Sarah♥
theantiquepearl.blogspot.com

[Nat- tea, cake and make]

These are great tips, thanks for this!

[Camille]

Thank you for all the great advice! I greatly appreciate it and I'm looking forward to the new project ahead :)

[Whitney]

Thanks for a truly helpful article! I'm in the process of starting my own blog and have found so much great advice here!

[Caity]

Excellent advice! Thank you so much!

caitylenox.blogspot.com

[shakti]

really great advice. It seems like a lot of blogs have a zillion columns and links and it's visually overwhelming. Simple is underrated

[Sarah]

I love this post - excellent tips and ideas.

I also found myself able to nod along and mentally tick off the suggestions, which is always nice.

Sarah
http://acatlikecuriosity.blogspot.co.uk/

[Lesley Myrick]

Tip #4 = YES! This is a huge pet peeve of mine - not being able to find contact info for the blog author! I actually wrote a post about it yesterday:
http://www.lesleymyrick.com/2012/07/indie-business-make-it-easy-to-get.html

Great advice, Katrina! Looking forward to reading more. xo