Your blog’s header is usually the first impression people will get from your blog.
Therefore, it should be attractive and have a design that’s cohesive with the rest of the page.
Sadly, there are way too many headers out there that just don’t flow or fit well into the page design.
Like an Olan Mills portrait from the 80’s, they’re terribly awkward.
Don’t let your blog relive it’s high school years. Read on to make sure your header doesn’t fall into these awkward traps. And if they do, don’t fret! I’ve got a few suggestions to fix it.
Throughout the month of June, we’re discussing blog headers design here every Tuesday and all week long in the DYOB Facebook community.
Last week, I shared with you what constitutes a beautiful blog header design and shared with you some of my favorites.
Next week’s post is on how to write a blog tagline with a free worksheet.
This post was originally published on 12/3/14 and was updated on 6/16/15.
Here are some of the weird things I’ve seen in blog headers around the blogosphere:
Headers with a small lone logo left aligned and a big blank nothingness to the right of it
Gosh that logo looks lonely… and awkward!
Don’t leave your logo hanging to the left with nothing to anchor it on the right. It’s terribly unbalanced this way.
Fix it:
Either center it or add some content to the right if you wish you keep the logo left-aligned. Examples of elements you can add:
- Social media icons
- A tagline in a size that balances out but doesn’t outweigh the logo.
- A background photo with you aligned to the right and the photo fading into a solid color (or white) behind the logo. (See Electic Empire in this photo).
- Some graphic elements.
- Your page navigation.
Rectangular header images that are narrower than the blog’s layout.
What’s with the awkward space to the right of the logo?
This one is one of my pet peeves. There are many reasons why this header doesn’t work:
- The image looks like it was slapped on without any thought. If you’re going to go to the trouble of making a logo or image, why wouldn’t you at least make it the same width as the full header area?
- It doesn’t blend into the background. It just sits on top of that patterned background just being plain awkward. Argh, I can’t even think of the words!
- The thick brown border is just wrong, so wrong and just makes the whole thing look out of place. A header that’s bordered on all sides always tends to look a bit awkward.
A too narrow header image looks just as awkward when it’s centered:
Ack! Either widen the header graphic or make the blog layout narrower!
I know I have picked on this blog before but it’s just guilty of so many blog design mistakes, I can’t help it. (At least it’s no longer being updated).
- There’s that terrible border again.
- Why oh why is it sitting atop that awful patterned background? Maaaaybe it might not bother me as much if it was on a white background? Ok, only a tiny bit less.
Fix it:
If you are using a rectangular image for your header (as opposed to a logo on a white or transparent background), make sure that it fits nicely within your blog’s left and right edges. A header like this should only sit inside a design that has a border all around it.
If you can’t adjust the header image’s width for some reason, then adjust the width of your blog to match or choose a different background or even a different template.
You might have to spend a little time finding something that works right. Headers should always be either the same width or slightly wider than the blog’s content and sidebar columns combined. If a rectangular header is narrower, it looks unbalanced and weird.
Check out this showcase of beautifully designed blog headers for ideas.
If you are unable to create a header that fits with your blog’s design, consider getting a template or theme that has a pretty header already created.
Headers that are hard to read because the background is too busy
The background on this header is way too busy for a header and it’s difficult to read the text on top.
The image above is a re-creation of an actual blog header I found. I had to keep it anonymous though because I really don’t want to hurt anyone’s feelings.
Graphic-heavy headers can be dangerous to use because most of the time, their style has nothing to do with the rest of the blog’s design. There are no unifying elements (or colors for that matter) to tie the whole thing together.
Fix it:
If you’re gonna go with a graphic heavy or collage type of header, it’s best to use either a solid or opaque shape behind the text. Something like this:
Fix a busy and awkward blog header by adding a solid or opaque shape behind the text of the logo.
But honestly, I find that it’s best to keep your header simple and let the logo/blog name stand out. If you’re not a designer, just go with super simple and minimal, a cute logo on a white or solid-colored background. You usually can’t go wrong with that.
Headers that are much too tall
Ack! This is not a header, it’s just a photo that needs to be cropped big time!
Guys, this is the full screen view on my laptop. All I see is this gigantic header image and nothing else. Ack! This is not a header, it’s a photo! It needs to be cropped vertically BIG time and made wider to fill the horizontal space (another narrow header image)!
Fix it:
Headers should be horizontal and rectangular, not square or square-ish. If you want to use a favorite photo in your header, crop its height with a program like PicMonkey* or Photoshop.*
Other Things You Can Do To Create a Nice Header
- Study blog header designs that you like and see what makes them attractive. Here’s a showcase of some of my favorite blog header designs.
- These tips from Angie Makes should also be considered when designing a blog header.
Did you like this tip?
This is just one of 50 tips I share in my new guide, Blog Beautiful: 50 Tips + Fixes to Make Your Blog Glow!
If you’re planning on doing some DIY design work on your blog, you don’t want to miss anything so download it now!
What are some of your blog headers design pet peeves? Discuss below!
And as always won’t you please share this with your friends so we can make the blogosphere prettier together? 🙂
Some good stuff here Marianne! Thanks for linking back too. 🙂
Sure Angie, glad you liked it!
Great advice as always! I’m moving to a new template, I’ll definitely make sure my header fits!
Awesome Janelle, can’t wait to see it!
Great advice, as usual! Thanks for including so many real examples. It’s helpful to see them while reading.
Thanks Susan, glad it was helpful for you!
Great tips here Marianne! It’s so funny but when I code I start at the top of the design but when I design I save the header until last. I find it one of the hardest parts about designing blogs. I think because as you say, it creates the cohesion for the rest of the page.
I know what you mean Libby! The header is the first thing people see so it’s vital to have a good one that pulls people in. Cute header you’ve got yourself there!
Agree with all except the first one! I’ve seen a few blog headers with “HEADERS WITH A SMALL LONE LOGO LEFT ALIGNED AND A BIG BLANK NOTHINGNESS TO THE RIGHT OF IT” They look neat and clean. BUT most times there is an ad in the space and that kinna makes it untidy again, sigh.
What do you think of my header? Pls do gimme your undiplomatic input!
Oh i agree with you on that one Swapna, I don’t like ads in the header as I find them ugly and distracting. As for your header, I would work on trying to make it the same width as the content below it. You might also consider adding a bottom border to your navigation to give them a little separation from the content. There are a lot of links and usually the recommendation is 3-7 so as not to overwhelm readers. Could you create subcategories instead or move the list of categories to your sidebar?
Thanks for your input! I had the same things on my mind too- In fact I had already made a new banner (albeit different pictures) which has the same width as the content AND has a border on the bottom containing the name of the blog on it. I had been sitting on it for a while and I think its time to go ahead and make the change!
The thing about many links: well blogspot isn’t as easy to customize as wordpress. Have you seen any one with drop down menus on blog spot? I haven’t! Unfortunately I realised this pretty late and I cannot just switch! BUT, you’re right about the clutter. Think I’ll stick to the top few sub titles and remove the others.
Thank you so much!
Hi Swapna, I literally just happened to see this on Twitter yesterday: http://thebloggingbrew.com/how-to-drop-down-navigation-menu-blogger/ Hope it helps!
I made mine in a hurry when I went self hosted but I have grown to dislike it (already!) and want to put more effort into a similar design, minus the concrete background to the text! I might use my new fonts you put me onto buying last week! Would you keep the coffee cup? Honest opinion please!
I think it’s great Haidee and I do like the coffee cup. I think it’s cute! Since yours is a logo and not a header image, I think it’s the perfect size.
Thank you so much for your blog! You’re truly a blessing and so inspirational. Because of you I am finally ready to take the leap and start my blog! I can’t thank you enough. 🙂
You’re too sweet Taish, thank you so much. I’m so happy you’re taking the leap!!
I changed my header because of this post…I think it looks GREAT now!! Thanks for the wonderful tips! Keep em coming 😉
Susan, i’m so happy to hear that! And it looks great, it really does! I love the background you placed behind it and the logo looks great and really stands out against it.
This is the post I have been waiting for, so much great advice! I will be working on the look of my blog and thanks to you I have some good examples. My blog header is off center to the right and as I am not tech savvy I do not know how to fix it. Can you take a look at my blog and tell me what I how to fix it?
Hi Kimberly, so glad you found this so useful! I took a look at your header and I think you may have changed it since writing your comment as it looks ok to me now. Let me know if that’s not the case and you’re looking to do something else with it. Sorry for my slow reply!
Sorry I removed the picture in the header. I have now replaced it and the problem has fixed itself. I think I was using a bad picture. Thank you for responding to my question. I love you site and will be visiting it often as I am not very tech savvy and can use the help of your posts.
Kimberly
Ah yes it looks centered now. If I were you I’d look into changing the min-height of your header to 200px instead of the height it is now (650px). It’s much too tall for a header. Also the header is a bit hard to read, changing it to white might help it to stand out more.
I’ve changed my header a hundred times! I’m not completely satisfied with the one I have right now too! I’m so happy I found your post and your blog, your tips are so helpful! I’m going to read your suggestions carefully, I need to make my header once and for all. For me the most difficult part is finding a tagline 🙁
Hi Ntina, i think the header is great! Perhaps adding something to the navigation to help it stand apart a little from the logo might be what you’re looking for? Try adding a top and/or bottom border to it and see how that looks.
Also, not sure if you saw, but we did talk about taglines just last week! http://designyourownblog.com/blog-design/write-blog-tagline-worksheet/
That’s a pretty good idea with the boarders! This might be the thing that’s missing to make it perfect! Also, I’m very happy to say that I’ve read your post about taglines and I’ve finally found a tagline I’m satisfied with! Thank you so much!!! Thank you for taking the time to stop by my blog and check my header. That was so kind of you!
You’re welcome Ntina, it’s my pleasure! Ah yes SO MUCH better! Definining the nav like that makes it more grounded than just some words floating in all the white space. Love the tagline too!
I love your tutorials! It’s such a great resource for newbie bloggers like me! 🙂
Hi Zuri, I’m so glad you found me! You must be doing a lot of work because your blog doesn’t look “newbie” to me!
Hello, I’m so glad I’ve found your site. Slowly but surely I’m making changes to my blog thanks to your tips, tools, and guides. I’d like to have a larger header on my blog (I’m using WordPress.com) and I can’t figure out how to make the image larger. Do you know if WordPress restricts header size, or if there’s a fix for enlarging a header image? Thanks again for making all of this knowledge available!
Hi Kat, thank you so much! I’m so happy to hear you’re making changes to your blog. As far as i know WP doesn’t restrict header size, it usually depends on the theme you are using. That said, I wouldn’t make your header bigger. I think it’s great the way it is and any larger will look unbalanced and also push your content further down the page. Is there a reason you want to make it larger?
I’m currently going through the DYO(lovely) B book, and I’m stuck on my header (and tagline, but that’s a story for another day!). My header is an image, and my theme is responsive, but my header gets cut off on mobile devices. Do you know how to fix that?
Hi Alison,
The reason it’s getting cut off even though your header is responsive is because it’s just too wide. All images at some point will get cut off on the sides on mobile, if you’re using a responsive image (which you are). So your best bet would be to create a new image where the text is more centered and the edges are just “filler” that can get cut off without anyone noticing. Your header is perfect for that because it’s basically wheat or grass extending to the sides. If you were to move your blog name closer to the center and the tagline below it, that would solve your problem.
If you didn’t want to center the text, you could left align it and then add a style to your div with the background image that keeps the image aligned left like this:
.et_pb_fullwidth_header_0.et_pb_fullwidth_header {
background-position: left;
}
That would cause only the right side to get cut off and the left side of the image would always stick to the left of the window. Hope that helps!
Wow, these header images look a bit arghhh!
My header image is pretty simple so that’s not a problem and the colours don’t seem to clash so that’s fine. It fits well onto my blog, so I’m happy with mine!
Maybe i’m being biased towards myself? Should I change it?
I think it’s fine, however you may consider removing some of the vertical space above and below the top navigation and header and below the header. This will help bring your content up the screen more.
Thanks!