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
Don’t leave your logo hanging to the left with nothing to anchor it on the right. It’s terribly unbalanced this way.
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.
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:
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.
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 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.
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:
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
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)!
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? 🙂
Hey friend, want free DIY design stuff?
I've got an entire library of FREE goods just for you! Join the 7000+ others and get instant access now!