Freckles in April: Blogging Basics: Blog Design Part 1

Friday, May 18, 2012

Blogging Basics: Blog Design Part 1



A while back I did a series called So You Wanna be a [Fashion] Blogger. I got more emails from that series than anything else I've done on this blog. Mostly, people wrote to me about my suggestion to dress up your website.  I spent most of that weekend helping people assess their blogs and directing them to resources that would help them create a prettier, more user friendly space. I've been meaning to do a series on DIY blog design ever since then but I'm only just now getting around to it!

I've done (very basic) blog design off and on for a couple years now. I am not an expert by any stretch of the imagination but I am a reader, an observer, and a serious researcher (Googler). Here are a few basic things I've learned:

Headers

There are a lot of opinions on headers. These are my thoughts:

Your header should brand you and set the tone for your blog. It should be pretty and functional. It should not take over your blog or be really busy.  For example:

Faux Freckles in April. I prob wouldn't read this blog. Big, ugly, self-important header. Very little visible post underneath. There's nothing to keep me here.


The area of your blog that is visible without scrolling (aka above the fold) is valuable real estate. You want that section to hook your reader and draw them further into your blog. Your header is part of that but it shouldn't take up the whole space; keep your header a little on the smaller side so some of your content is visible to draw the reader further in and down.


Real Freckles in April (from December). I am intrigued! I will, at the very least, read the first post.

I recently clicked over to a blog where the ENTIRE first screen was a picture they had inserted into their header space. I spent a couple seconds wondering where the blog itself was before I realized I was looking at a header and just needed to scroll down. But by then I had already lost interest. You have 3-5 seconds to hook potential readers. Make those seconds count with a solid first impression- a good header and a tantalizing bit of post they will want to stick around and read.


Navigation and Social Media

My dad once explained to me that people like thinking there's somewhere to go. The best outdoor spaces have nooks and crannies or little paths to follow, things that make you want to walk over and explore.

Your blog is the same way. When a visitor has read some of your content and they like what they see, give them a few other options to poke around within your blog. An "About Me" page so they can get to know the voice behind the blog, contact info, subscription options, etc. A few (not too many!) useful places to click over and explore real quick.

Then, give links to outside stuff that is still you. AKA your social media accounts.

All of this should be above the fold (or at least partially above). It doesn't have to be fancy (I love the way Angela has hers), but don't make people dig to find your social media. Keep it grouped together and easily accessible somewhere near the top.


Side Columns

Ah, side columns. You'll find a lot of different opinions about how you should use your side columns but I try to keep them as minimal as possible and very functional. I used to have a left and right column that I filled to the brim with stuff. Then I realized that it made my blog look overwhelming and cluttered and I think it was contributing to a high level of bounce traffic. I did a serious analysis- what did I really need in my sidebars? I pared it down to the essentials (a couple navigation options, search bar) and was able to change my layout to a single side column, which allowed for more posting space in the middle (and thus, larger images) and a cleaner looking blog.

Keep your sidebars intentional, organized, useful and free from extra fluff. Keep in mind that you can always use a page to hold stuff if need be. I created a page specifically for my favorite links because the list was taking up a ridiculous amount of sidebar real estate.



Next Up: Getting started on your design.


Do you have any specific questions you'd like me to tackle in this series? Send them over!

14 comments:

  1. Great tips, and I look forward to reading more as they come out. I do have one important, though maybe silly, question. What is a good standard size for an image based blog header to have it be as wide as the screen. I end up doing a lot of trial and error and then just get frustrated.

    ReplyDelete
  2. You have the best eye.

    And I am numero uno bad example of a crowded sidebar.

    must rectify.

    and I would totally read a blog with a header of KaylaKaylaKayla

    ReplyDelete
  3. this is really great! especially for a newbie like me! thank you!!

    ReplyDelete
  4. I contacted you months after the Fashion Blogger series, and you were so honest and constructive with me. It was an invaluable experience, and now six months later, I definitely think I have a stronger blog. I am excited to see this series as well :)

    ReplyDelete
    Replies
    1. Aw, thanks! I'm so glad I was able to help!

      Delete
  5. You are a rock star.

    Can you tell me how to make a "you can find me here" (links to Facebook, Instagram, Twitter, etc.?

    Thank you so much!

    ReplyDelete
    Replies
    1. Yes! I'll be posting a couple different methods for navigation.

      Delete
  6. Can't wait to read more! I'm always interested in making my blog better. Thanks for doing this!

    ReplyDelete
  7. Thanks for all the tips on blogging.I'm looking forward to reading the rest of the posts.

    ReplyDelete
  8. Thanks for all the tips on blogging.I'm looking forward to reading the rest of the posts.

    ReplyDelete
  9. haha, i love that you linked to my blog. it is in serious need of an update! it is borderline embarrassing for me :)

    ReplyDelete
  10. this is SO HELPFUL! thank you. i'm soaking it all in.

    ReplyDelete
  11. wow this is so so helpful for a newbie blogger like me! thank u so much. i love the way u have emphasized the imp of a header. I would like to know which is the simplest tool/app to create a customized header?
    thanks
    ~ashy
    http://thezingofmylife.blogspot.com/

    ReplyDelete
  12. I ws wondering if you know how to center a header? My header/title of my blog is off to the left and I don't know how to move it!

    ReplyDelete

Thanks for your comment!

Any trolls will be dragged into the trees and beaten soundly.

Related Posts Plugin for WordPress, Blogger...