Site Headers & Website Priorities

You can improve user-engagement and conversion on your small business site by making better use of the site header area (the top part of your page when the site loads). It’s the first place people look on the site and what they find there sets the tone for the rest of their visit. What You […]



April 9, 2013


You can improve user-engagement and conversion on your small business site by making better use of the site header area (the top part of your page when the site loads). It’s the first place people look on the site and what they find there sets the tone for the rest of their visit.

What You Can Do With Your Header

  • Get visitors engaged: Your header is the first thing people see. Clear branding, direction or call-to-action at the start of the visit makes them more likely to use your form or browse your products.
  • Reduce bounce rate: A good site header assures visitors and that you have what they are looking for.
  • Make big improvements with small risks: Most website templates put your header in a separate file from the rest of the site. Everything you need to touch is likely inside one div and a couple of CSS classes. Try different ideas and experiments without endangering the rest of your site.
  • Test messaging: whether its an ad slot or an offer, you can get a lot of impressions quickly in this position. Use it to figure out what works for your audience.

To sum up: Improving your small business site header is a modular project with a lot of potential and minimal risk to other areas of your site.

How Big Companies Use Their Headers

Take a look around the web and notice what sites are putting in their headers: you’ll see a lot of logos, but you’ll also see publishers starting off with advertising banners, while ecommerce companies offer site search or a promotion. Login links and personalized greetings are also common. None of this is random. You can learn a lot about a site’s priorities by looking at its site header.

2 Publishers Headers: & is the web-oriented little brother of It’s entire reason for existing is to increase online revenue. Accordingly, the header is a leaderboard banner Header - A banner ad is the first thing you see on

The expectation is that anything in this position is going to get a lot of visibility, so you want to make sure its an ad that suits your audience. I got this HootSuite ad due to retargeting, but many publishers will choose to manage this placement directly rather than hand it off to AdSense or another network.

In contrast, the Wall Street Journal limits access and focuses on serving it’s core audience of people interested in finance. Their header is for wayfinding: providing users with a short, easy-to-spot set of destinations to quickly get them where they want to go. Notice the prominence of the search box for even quicker navigation and task completion. Header - The first thing you see on the Wall Street Journal site is links to market data.

WSJ has been around for years and knows what its visitors want. For a new site, you will likely want to experiment to find the right combination. Heatmap software like HotJar and Crazy Egg, plus event/click tracking can give you a good idea of what people want.

2 Ecom Headers: &

Both and have some obvious goals for this section of their pages.

Macy’s definitely wants your email address in their Header - Macy's has rotating ads with email signup, wedding registry & Macy's Flower Show banners. — Sorry, you can't see each banner in the screenshot.This makes sense as a low-cost/high-value tactic since email continues to perform well for ecommerce brands. Besides the signup messaging, we see common links for account management and customer service.

Nordstrom’s seems to be more focused on driving transactions.Nordstrom's Header - Notice the Wishlist & Recommendations links. They are trying to personalize and get you into their database with options geared toward both the avid & aspirational shopper.They include a persistent cart and Free Shipping offer in their header. Both these are considered ecommerce best practice. The persistent cart helps remind/orient visitors toward completing a purchase & the Free Shipping message incentivizes people to stick around.

I can’t say that either site header approach is better. I would lean toward Nordstrom’s since it gives more opportunities for revenue (re)capture, but ideally you’d build a header that incorporates the persistent cart and split test different additional CTAs to complement it.


Chris’s Site Header: Then & Now

My original site header was built around simpler, channel-specific branding. This was back in 2013, when I was mostly getting clients for SEM and SEO with some Social and blogging thrown in. I was also mostly working with smaller SMBs, so I kept things simple and somewhat “personal” Header - My header is simple. It makes my name the first thing you see & then gives you a few ways to learn more about me. Landing on the site, you immediately learned my name and what I do. The branding was clear, but not particularly interesting. From there, I offered links to key social profiles (RIP Google+). The social profile links also served as trust marks: I put my online identity out there for you to see and assess — the implication being that I’m totally fine with you learning more about me.

Note: those links were tracked as Events in Google Analytics, so I could see how often they were clicked

Fast-forward to 2020, and I’ve become more focused on lead generation and people reading my blog (as a secondary goal).

A few notes on the current header:

  • The very top is dedicated to a CTA pointing visitors to my contact page. I have been surprised by how often it gets clicked. Not necessarily a strong conversion path from the homepage or blog, but I do get some leads from it.
  • My branding is slightly more interesting (WIP) and the line with my company name and tagline are higher contrast.
  • Remaining elements in this area are links to my Contact page and blog, and a search tool.

Basically, if you come to my site, then I want you to become a lead, or at least, stick around a while. Bonus of this approach is that it requires a lot less maintenance because there are no images or manual created links to manage.


What About You? Ideas for Improving Your Header

Remember that it’s about your business and your visitors, so trust your experience and data when planning changes to site headers. Here are some ideas to get you started:

  • Point them toward a goal: For example, add a banner linking visitors to your “request a free quote” form.
  • Help them find your store: If you do business from a physical location, then make sure your address is easy to find.
  • Share big news: Did you launch a new product? Or, land a big client? Have a link to the announcement.
  • Instantly gratify: Like, give your visitors immediate access to what they want most.
  • Give them a gift: Share a whitepaper or simple advice.

Improving on What You’ve Got

This is my first post in a series about increasing traffic, engagement and conversions on small business sites. In the series, we’ll look at improving sites by leveraging your existing assets as much as possible. Small, targeted changes to your existing site can have a large impact. I’m starting at the top of your site and working my way down. Next week, I’ll talk about adjusting and customizing top-navigation.

Please drop questions or suggestions into the comments. I want this series to help you as much as possible, so I need your feedback.

You may also like…



  1. Tips for Tailoring Navigation to Customers - […] Site Headers & Website Priorities — This post takes a close look at the use and value of top…