Is Your Blog Beautiful: Part I – Header and Navigation

Many people say that content is king in blogging.  This may be true, but that king had better live in some pretty nice digs or his subjects may go looking for that royal content elsewhere. 

Is your blog beautiful?

I listened to Jennifer James of the Mom Bloggers Club and Mom Blog Magazine speak at Blissdom and she said if you want to find opportunities and grow your blog, your blog should be beautiful.  I agree 100%, but I think many people don’t think it matters as much as it does.

If your content can’t be seen or your blog is just plain ugly, cramped, loud, disorganized, dark, or messy, visitors may just click on and click off.  We all have very busy schedules and there are so many blogs, why not surf on one that’s pretty and easy to use?  I want to read great content, but I probably won’t find it in a sea of design mistakes.  If I am a company looking for ad space, I want my add to look good and be presented on a good looking blog.  I want my ad to be seen and not lost in a million colors and buttons and text.  It just makes sense to make your blog look its best.

If you are a beginner, my first piece of advice would be to keep your design and structure simple as you learn the ropes and determine the look and feel you want for you blog.  

If you have been at this awhile, stretch your design muscles and take a new look at what you have created.  You may need some organization.  You may need to clean house.  It is possible that your current theme/design is not working for the varied content you are creating.  Whether you are a novice or a pro – it is worth the time to evaluate how your blog looks and feels to a reader. 

I suggest you find a blogging buddy who you trust and ask them to trade ideas with you.   You can evaluate each other’s space and make recommendations.  You can test each other’s sites.  It is always good to have another’s eyes and mouse on your blog.  Honest feedback will make all the difference.

Finally, check your design in every browser you can think of.  Internet Explorer, Firefox, Chrome and Safari all display some things differently and you want to make sure that your design looks good in all of them. 

So, what makes a beautiful blog?  Let’s start at the top. 

Part I of this series will cover the Header and Navigation area.  Stay tuned for Sidebar, Content and Footer.  All together, they can make a beautiful blog!

Your header should make a statement but not be the only thing we see.

I have seen blogs with gorgeous headers that take up almost the entire landing screen.  That’s great if you are a graphic or web designer and you are literally marketing your skills in your header.  It’s also okay if you are a mega blogger and people already love you.  For those of us who are trying to feature our content and aren’t already famous on these interwebs, this won’t work as well.  This area is called “Above the Fold”, meaning a user does not have to scroll down to see this portion of your page.  If all I can see is a header, your awesome content is lost already.   So too is the ability to run ads in this coveted position on a blog.

Ideally your header should be no more than 250 pixels tall to leave maximum space for content on this prime real estate.  Yours could be higher if you have some kick ass header that also includes some content or navigation.  As far as width I would keep headers (and therefore the overall width of the site) to around 1000 pixels wide or smaller (mine is slightly larger).   Remember, you want people to see your whole site no matter what size their monitor.  I love to be able to see some basic navigation as well as the title of the recent post and at least a few words of content.  You know…to draw me in. 

Here is a lovely and super simple header from Bakerella.  This is totally appropriate for Angie’s adorable baking site.  She is creator of the Cupcake Pop and rocks out the delectable baking ideas and fabulous food photography on her blog.  The header is short and the content is right up front.  The Bakerella header is 990 x 141 pixels.  Small and certainly sweet.

Bakerella Header

Jill’s header at Scary Mommy is technically 950 x 249 pixels but she allows her impressive logo  to shine by dipping below the header area and balancing it with the Society area of her site.  It makes a statement, but her site is not lost.  You can get creative if you have a large graphic and not lose your content completely.

Scary Mommy Header

Click over to your blog and check it out.  Can you see your content?  Does it make a statement?

Your header should be simple and reflect your site.

You have just seconds to draw in a reader.  Your header should be unique and convey the personality of your blog.   See Jill’s Scary Mommy header above.  You should include your blog’s name and your tagline.  If you have a logo, it should be represented here in some form.  Everyone who clicks sees the header and identifies it with your brand, so you want it to shine. 

Choose colors and graphics wisely.  Whether your header works with your site or your site with your header, they are a team.  Make sure they “go” together.  Choose a core of 2 to 3 fonts and main colors (or a general color palette) and stick with them throughout the site.   Check out the Color Scheme Designer for help with matching colors.   Finally, it’s great to show a picture that helps tell your story, but there can be too much of a good thing.  Just be careful not too pack too much into a small space.

I love Miss Britt’s new header.  She is writing about “Happiness.  Defining it, finding it, and hanging on to it”.  Her header is inviting and very personal.  She is sharing her journey with us and her header clearly conveys the blog’s purpose.  It is simple and elegant and it makes me happy just to see her smiling face.  Mission accomplished Miss Britt.

Miss Britt Header

It doesn’t get much simpler than Tsh’s header at Simple Mom.  And how appropriate given her content.  Tsh leaves an amazing amount of space for valuable content, which is perfect because she likes to begin each post with a large featured photograph.  This header is 1032 x 115 pixels.

Simple Mom Header

As a note, you may include your social media icons here and/or choose to show your number of subscribers with a subscription link.  I would only do this if the number is fairly high.  Many people will stay on a blog longer if they see a lot of other people follow that blog.  That’s just how it is.    The header can be a great place to stash these icons but make sure they mesh well, are easily recognizeable and do not distract from the design.

Notice none of these headers are overwhelming you with information.   Headers do not need to be over the top, but they should help people understand something about you and your blog and be pleasing to the eye.

Clickable headers are wonderful.

I love to click on a header and be taken to a home page.  It eliminates the need to add a home page link to your nav bar and when I click on the header and go nowhere I growl a little bit.  Sometimes it’s in the details, and this one is nice.

Your header’s inside code should match its outside look.

Google and other search engines can’t actually see your header or navigation bar.  Many bloggers change their title or tagline and do not remember to change the back end of their blog to make sure it matches.

Go to your blog and right click.  Choose view source.  Search for the <title> tag and be sure it matches your header.  That is what google sees.  Mine matches my header as shown below.

<title>Mommy Words – Writing my way through everything.</title>

The simplest form of SEO…make sure what is there already is right.  More later on the other behind the scenes meta tags that make you search engine friendly.

You should have some navigation at the top of your site.

Your navigation bar can include pages or categories or both but visitors should be able to learn something about you (mine says I’m Brittany) and find any important pages on your site.   I want visitors to know about me, about the main things I write about (notice there is no cooking category) and know that I am PR friendly.  If your visitors hit your blog from many different points of interest as mine do, it is very helpful to have this categorical navigation at the top.  I am still doing a lot of work on my nav area, but at this point I have it centered and showing what I need.  My header and nav together total 1072 x 278 pixels.  And yes, I am proud of my header…because all that word stuff…it took a long time.

Mommy Words Header

If you have a lot of pages and a lot of categories you could do a split navigation bar like Gigi from Kludgy Mom.  It will be easier to read than a doubled up navigation bar and provide some delineation between your categories and the other pages you have created.  Gigi has kept it simple and yet provided an enormous amount of information to her readers in just 940 x 206 pixels.  And it’s cute.

Kludgy Mom Header Nav

The navigation menu should match the site.

Obviously, your menu should be obvious to the reader and have a look that meshes with the rest or your site.  Resist the urge to do anything crazy here.  I have seen a lot of sites where the navigation has a totally different feel than the site.  Yes, cute icons are fun, but that doesn’t mean they will work for your blog.

Be careful with drop down navigation menus and other fancy things.

Drop down menus can be wonderful and feel very fancy on a blog.  However, I have found that sometimes it is hard to get those menus to stay open and that all the design work that was put into the blog did not work itself all the way through the drop down menus.  Your blog should be easy to navigate.  If readers cannot get to the content, they will become frustrated and leave.   It is not visitor or SEO friendly to have broken links so make sure to check these main links often and look at the pages they land on. If you have something fancy, please make sure it works and serves a purpose.

A note on categories.

It is so easy to end up with 50 categories on your blog.  Try to choose 10 or less main categories and put the rest into subcategories.  You can still include a drop down menu of your million categories on your sidebar but you will be able to provide visitors with an easy place to click through to what they want right from the start either in your nav bar or high on your sidebar.  Someone who is coming to your blog for a recipe might not want to sift through 30 other categories of posts to find another great meal and may stay on your site longer if they can find a clear link to a recipe archive.   I will talk more about categories when I cover organization.

A header and a navigation menu got married and it is a beautiful thing.

I am working on a similar concept for this blog but it is hard to design and code and will take awhile.  I have long been inspired by Maggie Mason’s site, Mighty Girl.  Perhaps it is because I have long been known in the superhero world as Awesome Girl and she is Mighty Girl.  While large, it marries header and navigation perfectly.   The header measures 940 x 317 pixels but in that space she has her logo, her title, her tagline, her main reader categories  and some really gorgeous images that both tell the reader what to expect and give a real sense of Maggie’s personality and style.  Maggie is a well known blogger and does not have to worry about the about me stuff up top.  You will find her about me and all the “stuff” in the fat footer.

It’s my love at first click header.  At once personal, professional, clean, compact and inviting

It rocks.

Mighty Girl Header

The Header  & Navigation List

  1. Your header should make a statement but not be the only thing we see
  2. Your header should be simple and reflect your site
  3. Clickable headers are wonderful
  4. Your headers inside code should match its outside look
  5. You should have some navigation at the top of your site
  6. The navigation menu should match your site
  7. Be careful with drop down menus and other fancy menu coding.  Make sure anything fancy works.
  8. Try to limit your parent categories and let your readers see them at or close to the top of the page.

Have you spent any time on your header?  Do you have any favorites?  I would love to know what you think of first impressions!  Let me know if you have any questions and yes…I am writing a tutorial on designing a header.

This is the first post in my Is Your Blog Beautiful Series.  The second post is on Sidebars! Stay tuned and please consider subscribing through RSS or by joining my lovely friends in Google Friend Connect so you can have that beautiful blog you have always dreamed about.

Comments

  1. says

    Oh, yes, KludgyMom. I know Frilly Coconut did her, and 2 other sites I love.

    I’d love to change, but I’ve heard changes cost is way way WAY up there.

    But it’d be so nice to do. I wish I would’ve started with WP, befor blogger, b/c now I’m spoiled with how easy blogger is.

    Excellent article, and Il ook forward to this series, and BTW, your blog kicks butt in the looks department.
    Maybe you can do a giveaway for a makeover????

    • says

      Hey sweetie what do you need help with? You want to change to WP or just change the look of your site on blogger? Let me know I am always happy to help! And yes, I send people snippets of code and other geeky things in their email. I’m just nice like that.

      But wait – another thing I could be making money from but I’m not? So not a shocker.

        • says

          Thesis rocks. If you do buy it would you pretty please click through my site to throw a couple of bucks my way? Thank you so much for the compliment! Yes, I design a lot of blogs for friends and stuff but have not thought of making anything. Maybe I should. Let me know if you need any information on Thesis…I am a huge fan and have been with this theme for years now. I have checked out others and have no intention of switching!

          • says

            I will definitely buy Thesis through you! I’m thinking I really need to do it. I am really having to get the hang of WordPress. You definitely should start doing designs, I love it!

    • says

      The official Blogger Buzz blog has a tutorial from Feb 2010 that looks fairly straightforward. Check it out. Lots of tips there! http://buzz.blogger.com/2010/02/create-pages-in-blogger.html

      Just checked out your blog and pages would be nice. I like your tagline. It made me laugh. Also, it is hard to read your post date and a little hard to read the sidebar with the transparent page area. You may want to create a background for your widgets or make the text darker. Grey on grey is tough to see. I give out constructive criticism like candy so just let me know and I will shut up :)

      Just let me know how I can help!

    • says

      She is one of the bloggers I would like to meet and hug without her being all freaked out by my excitement…since she has no idea who I am you know :)

      And I will be in Orlando Sunday! Coffee? Glass of Wine?

  2. says

    I’m delighted that you thought highly of my layout. The idea of double navigation was something I had wanted forever because I like a clean presentation. But Ihave to give all the credit on the design to Frilly coconut. She nailed it!
    gigi recently posted… The Man Who Braved The ColdMy Profile

  3. says

    This is a fantastic post. I’m new to blogging and have been overwhelmed by the incredible blogs I’ve come across in the past few months. Your advice is so thorough, I only wish I could apply all of it to my page right now.

    Truthfully? I don’t love my own set-up. But I’m trying to be patient so when I do make changes, they will be meaningful and address everything I’d like to see modified.

    My biggest issue is with my picture at the top – I hate it. I never let people take pictures of me and this one is terrible but I don’t have any other shots of me alone and my brother-in-law (who set up my page) insisted I needed a picture of ME.

    Now I see that most people don’t have a picture of JUST THEM and I want it changed desperately. In fact, I’m embarrassed by it. But I don’t want to hurt my brother-in-law’s feelings.

    His goal was to set up my blog as an Author Site because I am writing books. And I guess most author blogs have pictures (???) But really, if I must have a photo on the front, I want one of my whole family or at least a better one of me. Where I don’t look naked. I was wearing a sundress the day it was taken. Sigh.

    Sorry for rambling. Did I mention I loved this post???? :-)
    julie recently posted… Today call me rinsedMy Profile

    • says

      It wasn’t a panel. Jennifer spoke about the anatomy of an anonymous blog and she simply your blog must be beautiful. It was right after the opening keynote!

    • says

      Tsh that’s funny that Design is Queen part was in the first sentence but I took it out. All those royal references started getting overwhelming. I wish I had met you at Blissdom! I am ordering your book!

      And thank you! From someone else who designed her blog herself, that means a lot. It’s hard work but it is worth it.

  4. says

    Hi Brittany, this is a great article. I just recently “cleaned house” on my design website. The header & navigation were a mess. Not only that, but my theme didn’t match my company. In short, it was a disaster. I completely agree that “beautiful design” does matter and that everyone running a website should build “beautiful design” into their website.

    I look forward to the rest of your series. ~Thanks
    Kirk Fuson recently posted… 18 Amazing Photographers on FlickrMy Profile

  5. says

    I think this is a great list. I slowly found out all these rules as I went along, but it’s fantastic you put them all in one place. I’m always trying to make my blog prettier, I think it’s a little busy and I need to work on that.
    Also, where you said test your blog in multiple browsers. I totally agree. You might want to mention that Adobe has a fantastic little tool that will test your blog in lots of browsers all at once. I put together a small tutorial on it a few months back. http://momroad.blogspot.com/2010/09/how-to-test-your-blog-in-multiple.html. I hope you don’t mind the link to my blog in the comment, but it really is a great tool.
    Amber recently posted… The Worst Neighbors Ever!My Profile

  6. says

    These are all good tips. Do you, by any chance know if there’s an easy way to make your header clickable in Thesis? I can’t figure it out. I am starting to think my site might be too cluttered – I’ll keep these tips in mind as I think about redesigning!

    • says

      Sure thing thing sweets! FYI if you update to Thesis 1.8 and upload a header image it is automatically clickable. Until then though – here’s the code you want to throw in custom.css. Basically you are telling the site to scoot the thesis header and tagline over and insert yours with the text-indent -9999 and then you are putting in your own image directed towards home. There is also a method using php that totally replaces the header and tagline but in the interest of keeping this simple and avoiding broken sites I will start with this, which will work just fine.

      Make sure that your header image is uploaded to your custom/images file and then replace the width and height below with your own and the file name of your image.

      Paste this code in to your custom.css

      /*Clickable Header Image*/ < >

      .custom #header {
      background: none;
      padding: 0em;
      border: 0em;
      margin: 0em;
      }

      .custom #header #logo a {
      display: block;
      width: 1000px; /*Change to your height*/
      height: 200px; /*Change to your width*/
      text-align: center;
      background: url(images/filename.gif) no-repeat; /*insert your file name*/
      text-indent: -9999px;
      padding: 0em;
      border: 0em;
      margin: 0em;
      }

      .custom #header #tagline {
      text-indent: -9999px;
      }

      Let me know if you have any problems! Should work easy peasy!

  7. says

    Wow! That’s a ton of great info. I did my design all on my own but still need to go back and figure a couple things out. I cannot get rid of my Uncategorized category and it drives me crayzee!

    • says

      Erin that’s awesome. I too do everything by myself so it makes it a lot easier (and cheaper) if I want to update something. Good for you! Are you on blogger or wordpress? WHile you have to have a catch all category you can usually rename it fairly easily. Mine is Life in General or some junk like that. I never forget to assign a category though so it doesn’t ever come up!

      • says

        I’m on WP but I used the Atahualpa theme. I’ve been looking all afternoon at code trying to figure it out. I think I’m just going to have to get over it and leave it alone for now. I’ts that or go blind!

        • says

          It should not be in code. If you go to your dashbaord under Posts there should be a link to the categories page. On this page simply choose to edit the Uncategorized and rename it to whatever you like! Let me know if you cannot find that page.

  8. says

    How have I not visited here before? This is timely and very coherent information, and right along the lines of what’s been on my mind in this new year: Fix the Blog.

    You explain things in an easy-to-follow manner. Now if I can get over my aversion to change, maybe I’ll do WP one day!
    Sherri recently posted… Driven to InsanityMy Profile

    • says

      I am SO glad you visited! I am alwasy thinking fix the blog so I totally know about that! Definitely come to WP and check out Thesis if you do. I am super happy with it!

  9. says

    Wow, that is a lot of information. That I totally needed. I just switched my blog to a simple, simple, simple generic layout from blogger. To try and figure out a style! My style. The template I was using just wasn’t me and everyone else was using it.

    Thank you for the info!! I’m hoping to spend to time soon on this subject on my blog.
    Sonia Barton recently posted… Wedding Dress Made ModestMy Profile

    • says

      Sonia I reallythink it is best to go back to simple and figure out what you want without all of the chaos! Also – yes – if everyone else is using it and you see it everywhere – it’s time for a change! That’s why I love Thesis – it is super customizeable.

      Let me know if you have any questions as you start making changes!

  10. says

    Great job! Looking forward to the rest of the series…I am just trying to figure out if I want to attempt to redesign myself or pay someone, I am so inspired by your willingness to dig and learn it all yourself!

  11. says

    This post might be the kick in the rear I need to do some serious re-haul on my blog design (right now it is VERY basic and not catchy!) I am working on content but the design has been digging away in the back of my mind for a while. Now if only I could press pause on my life for a few minutes to actually get something done!
    angela recently posted… Mommy TearsMy Profile

  12. says

    I was so inspired by your blog that I started one of my own….is that weird? Do you think its worth the time to build your own blog if you aren’t sure it will be read by dozens of people? Right now I am just focusing on content, but I’d like for my WP.com blog to look nicer until I’m sure that it’s worth the time and effort. What do you think?
    Katy recently posted… Soda BreadMy Profile

  13. says

    Thanks for this post, I am planning on a blog makeover but first need to decide if I am going to move it from Blogger to WordPress. Is that as huge of a pain as I think it will be, lol?

  14. says

    This is my main issue with my own blog. I’m trying to make it more cohesive and more attractive. I can’t afford to have someone come in and make a pretty logo (I want one in the worse way). So I’m left to making things on my own. I think I’ve had four different buttons in the past month as I tweak things.

    Sometimes I feel like I’m reinventing things becuase I don’t know what I don’t know. Ya know? ;)

    I do love this post though. I’m certainly going to start following it. Thank you.
    Jessica, The Debt Princess recently posted… February’s Love Drop- Alex &amp EthanMy Profile

  15. says

    This is a wonderful post with such great tips! I didn’t know you worked with designs. That’s so cool! I really wish I had the know how to do that kind of thing. I have some areas that need tweaking on my blog for sure!

  16. says

    Thanks for the great post and ideas. I am using a pre-designed template for now, the best I have found on my budget, but storing up ideas for when it allows me a custom design. Love that Mighty Girl header. What a clever header.

    Just stopping by from Blog Frog to become a follower of your blog.
    Marie recently posted… Beehives- Mia Maids &amp LaurelsMy Profile

  17. says

    Brittany-
    Thank you very much for all of your great information. I will continue to read this series… I started my blog about 6 months ago, and still have alot to learn! I had never heard of Thesis before…. I am going to spend some time looking into it- and if I do decide to buy it, I will buy it through your site (it’s the least I can do!).
    Do you keep a test site for your blog? I am not sure how to go about setting one up….
    Warmly,
    Sharon
    http://www.momof6.com

    • says

      Sharon – no test site. I use Firebug (a plugin in Firefox) to see how changes will look. Then I “test” them real time very late at night. That way I figure fewer people will see if I mess up while doing something. Thesis is awesome! Not only do I love all the ways it can be customized, but their support forums are awesome and I get all my code questions answered quickly and very detailed.

  18. says

    I think my header is great. My DH actually selected the picture and wordpress made the rest really easy.

    Let me ask you this though: I LOVE to change things around and always did on blogger. Should I change my header picture (as I would love to do regularly) or should I leave it as part of my brand?
    michelle recently posted… Survivor- Stealth R Us and other odditiesMy Profile

  19. says

    What a great series. Thanks for this. I recently redesigned my header… but I’m a bit of a novice. Would love your first impression if you have a chance as I’ve only had 2 readers even notice!!! (ARg!) And I checked my metadata like you suggested – it has my blog title but not my tag line. Will have to figure out how to change that, but I’m pretty sure I can work that one out. :) Thanks for the heads-up about that.

    I started blogging on blogger last year, before I had EVER even read a blog. Talk about starting blindfolded. I actually thought that all “blogs” were on blogger, hence the name. We even have a family site that I have maintained on WordPress for a couple of years… I just thought it was a “website” and didn’t even know I was already “blogging” on that one. Seriously. That’s how incredibly naive I was!! Hahaha. I wish I knew then what I knew now…. or had even READ a few blogs to know what was out there. (Especially before I chose the name and platform that I did.)

    I really want to switch over to WordPress now because I feel so limited in some of the things I want to do… but I’m definitely intimidated by all the tech stuff involved in a transfer. I just need to take a few breaths, buckle up, read some tutorials, and go for it. I know it will be worth it in the long haul.

    Anyway, I’m sure you’re getting a few requests since starting this series… so no pressure, but I’d love your thoughts on my new header as I will most likely keep that one even when I make the WP switch! :)

    Well done and thanks again! This is excellent stuff and I hope some newbies get ahold of your posts even *before* they start like I wish I would have!!

    • says

      I think it looks really good. I have two suggestions. I always have suggestions, so forgive me, I can’t help it. First, I would move your tagline down just a bit so that the “mommyhood” Y is not covering up the word little. That will also make the spacing better with the picture so it’s a win-win! Second, you have an empty space on the right hand side of your Nav Bar. Can you remove that? It would look good. This is just a might be nice….You may want a little more color (even subtle) somewhere up there in the future but that’s simple. It may just be on the nav bar. I just find that some color helps to move the eye around the page.

      Third, I would like to offer my daughter Violet to Levi. They are both 14 months old and she LOVES the guitar. She can rock it with the whole fam. And that boy is absolutely adorable. You have a precious little family!

      Thanks for stopping by and I so hope we get to know each other better!

Trackbacks

  1. […] This post was mentioned on Twitter by SthrnFairytale, JennaFarelyn, Good Day, Reg People, Mommy Words, Gigi [KludgyMom] and others. Gigi [KludgyMom] said: RT @mommywords: Is Your Blog Beautiful? Part I: Header & Navigation http://bit.ly/h0zplf #savvyblogging […]

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge