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.
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.
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.
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.
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.
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.
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.
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.
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
The Header & Navigation List
- Your header should make a statement but not be the only thing we see
- Your header should be simple and reflect your site
- Clickable headers are wonderful
- Your headers inside code should match its outside look
- You should have some navigation at the top of your site
- The navigation menu should match your site
- Be careful with drop down menus and other fancy menu coding. Make sure anything fancy works.
- 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.