Dodgeball Marketing Podcast #45: SEO Basics: What Makes a Good Website Header?

Michael Utley: Hey, everybody. Welcome to Episode 45 of the Dodgeball Marketing Podcast. I'm Michael, this is Chris.

Chris Raines: I'm Chris.

Michael Utley: Hey, Chris.

Chris Raines: Was that loud? I probably-

Michael Utley: Pop!

Chris Raines: Popped out there, Michael.

Michael Utley: Today we're going to talk about what makes a good website header. So we're going to talk about that. Chris, get us started here. What do we think about having a logo in the header?

Chris Raines: Ah, you know, take it or leave it. Just kidding. Okay. Here's the thing. Logo in the header, obviously, you're going to have your logo in the header, but let's-

Michael Utley: Or maybe it's not so obvious to people. A lot of times people are really proud of their logo. They make it part of their hero. I think that's a really bad idea.

Chris Raines: We'll just say it point blank. Always have your logo in the header. And always, 99% of time, have it in the top left-hand corner. The reason, there are things we call web conventions. These are things that are way beyond trends or things that people like to do, but they've become ingrained in how people expect to navigate the internet. There's a few of them. One of them is when people are on a website and they have the question, where am I? They land on an interior page. What website is this? Where do their eyes go? They go up and to the left. That's where your logo should be. That's the home base that says to the user, "Hey, you are at GoEpps.com or bullhornmedia.tv. That's the website you're at." This is a convention that you should not break. There's no reason at all to not have it in the top left-hand corner, your logo. That one's more of an ironclad law at this point. It's a convention. It will always be with us.

Michael Utley: So next up, is there a link to a form in the header? It makes sense. It's what you're used to seeing. But whatever the main idea of the website is, there ought to be a big button for that in the top right corner of the website. A lot of times this is, "Request a Free Quote", "Schedule an Appointment", [or] "Request Product Information". An ecommerce site would be very different. Up there, you might have "Login". But we're talking about a lot of websites in the world for small businesses. In any medium or any non-ecommerce site, you're trying to generate some kind of contact, either scheduling an appointment or getting product information. There's always something that you're trying to do.

Chris Raines: The first step.

Michael Utley: The trap that you need to avoid falling into is, the problem that happens when you have website editing by committee. It's important to have someone in your organization who's responsible for delivering a good user experience and knows and understands these best practices and can say, "Hey, wait a second, guys. We've got two different ways for people to do the same thing in the header." We've got "Request Free Quote" and a contact form button. You need somebody who can say, "Hey, let's simplify that. We need to boil it down to one thing." If that person's advocating, you can backward from there and follow best practices. One of these is just to cut down anything where somebody has to think to make any decisions.

Chris Raines: You're not giving people options in that case. You're making them do extra work just to move to the next step.

Michael Utley: That's right. And it's exponentially more valuable to strip it down, because of the tight window of time in which someone's making a decision about whether or not this webpage is useful to them. When your webpage is loading, I want you to imagine that that user is hovering near the back button. They've already given up on you. You've just got a split second to let them absorb and take in information. They're not going to your website and reading it top to bottom and soaking it in and thinking about the history of your company. What they're doing is saying, "Do I see what I need?" It's almost an unconscious thought. So what we want up there in that top right is one button.

Michael Utley: The trap we've seen people fall into, I mentioned, is when you have a new software, like an appointment scheduling, but maybe it doesn't work for everybody in your organization, because they're not all in the same system, so you end up with a Contact Us button or something. When you're talking about that action that you want people to take, a form-fill or scheduling, you need to pick a strategy. Make it comprehensive for your organization, so that you can simplify that touchpoint with the user. I like seeing something that's in the button style of the website up there. Whatever your buttons are on your forms, I like seeing that in that top header for that one action that you want people to take.

Chris Raines: It makes it stand out.

Michael Utley: And besides, and we'll talk about phone next, but for that form-fill or providing some information or filling in a contact form, I like for that to be one big idea and to have some benefits-oriented text. Don't just say, "Get Quote." You can say, "Get Free Estimate," or, "Get free Quote." That word free in there, it's just another little benefits bit of text. But if you're competing there with yourself with a contact button that just says, "Contact us," you don't need two things in the same style. It's like The Incredibles. If everyone's super, nobody's super. That's the case with elements in your header. You want every one of them to be unique and special all the way across so that they can do their job as well as possible.

Chris Raines: Perfect. Number three here is, is there a clickable phone number in the header? Now, this kind of goes with that second one, Michael, in that I'm a big fan of, if you're going to have something that's more form-related, ("Get a Quote", "Set Up a Demo"), then you should probably not have the phone, but there's some places where you. . . Well, I always like focusing the user on one thing.

Michael Utley: That would be ideal.

Chris Raines: I think for most businesses, there's usually one primary thing that's their... For instance, if you are a software business, your next step is probably form-based. It's probably going to be, like, "Set Up a Demo" if it's enterprise software. Or if it's self-serve software, it's going to be, like, "Start Trial", or "Get Started", or something like that. If you're a local business, let's say you're a locksmith or you're a-

Michael Utley: A dermatology practice.

Chris Raines: . . . A dermatology practice, your website visitor might just want to pick up the phone and call you. I run advertisement for a contractor training business. It's a higher-ticket item. It's usually 2 to $3,000 for the seminars. People are less prone to just add to cart and buy. They have questions. They want to talk to people about it. What am I getting into? What's it like? So, the biggest call to action we have, a clickable phone number in the top. That's the thing that most people choose to do. We have some sales that are directly from the website, but most people want to ask questions about a $3,000 purchase, right?

Chris Raines: My philosophy is figure out what the most common path of action is for, make that your primary thing. For a lot of businesses, it's click to call. Make sure it's clickable. You don't want people to have to copy-paste and then go over to their phone. They're not going to do that. Make sure it's clickable on mobile. Then, if you have a secondary, you can show that maybe in your footer or prominently in your content. But if phone is the way that people primarily reach out to you, put it in the header and make it clickable.

Michael Utley: People are using devices. I was in T-Mobile yesterday. When they're putting SIM cards in, I just got a little iPad for some training that I'm doing, and they got the SIM card put in, so I would have WiFi access, or not WiFi, but just cell tower access from anywhere. But they're offering for another $10 a month to be able to make phone calls from your iPad. It's just a way for them to sell something. But a lot of people are using computers and pads and other things to make FaceTime calls now, whereas it used to be just the mobile device. Even on a desktop experience, I would stick with that click-to-call capability.

Michael Utley: Another thing I would add, Chris, on phone numbers in the header is, where you have those, try to make it a little bit more personal. Think about the text. Don't just slam a phone number up there and slap it on. Think about, what's the experience they can expect? Can you convey "Talk to Jay"? Are you going to get to a real person? Or, is this a customer service thing? So what is the value proposition of that phone number there?

Michael Utley: Then let's see. So next step is, is the header sticky for mobile? We go back and forth on this, because there are pros and cons to this. A sticky header, let's define it first, is when you're on a mobile device, so you're on something like this, and someone starts to scroll down. They lose the things that are so good that are in the header, like the phone number, the navigation. One option is to have a little bar of pixels there that don't roll up with the rest of the page. We call that a sticky header. There are pros and cons to this. You can think about this and test it out. But our rule of thumb is, if you have a primary call-to-action that you want people to do, you can keep that in view during the entire visit by having it in that header.

Michael Utley: Back in the day, when we started building landing pages, we would do this with forms on the page. We would keep the form in view, because we knew how important it was to keep that form right there in front of someone. Well, this is the same idea. It's keeping that header of the website in view. That gives them a couple of things. Number one, they remember where they are. If they've got a little logo or even a smaller version of the logo, that's shrunk as you've gone to a sticky header mode, in the top left so they remember where they are.

Michael Utley: They might have a click-to-call phone number and maybe a button to take action, like a "Free Estimate" button. And then maybe a little link, like a hamburger menu, and more people are going down to two lines instead of three. It's more like an equal sign menu, but I'll just call it a hamburger menu, but that little three-line thing in there that tells people, "Menu," that's a good sticky header. If you want an example of this, look at nashpainting.com.

Chris Raines: This is the site you designed, Michael, right?

Michael Utley: Yeah. That's one I did. That's the last website, I think, I ever designed. But that's good. It's got text or call with the phone, which is really good, and a request an estimate, and then a little hamburger menu in the sticky header. I like that model. We've actually gone back and created a wireframe of that website based on one that we had before when we were designing. But it's refined based on some things we've learned. That sticky header is part of our template for doing any kind of trades or local business website. We think that that approach to a sticky header is the best conversion rate, as you said, for that type of company and where it's relevant to have those things in the header.

Chris Raines: Perfect. Lastly, when it comes to making a good website here to lay out is, use hierarchy in your navigation to simplify and focus. This goes back to what you were saying about all the little different ways to contact you, all the buttons in the header. A lot of times when people are building their websites, they think that the more options they give people, top-level options, the better. That's not true. It can confuse people. It can become overwhelming to look at say, 10 different navigation items. It all blurs together. My philosophy is no more than six. More than six and you're giving people too many things to do and they are probably things that can be nested underneath. An example might be, if you've got all different kinds of resources, like, "Oh, we've got our podcast. Oh, we've got our-"

Michael Utley: We've got the history of the company.

Chris Raines: . . . History of the company. We've got, About Us. We've got downloadables. We've got the blog. We've got news updates.

Michael Utley: Then we've got five services pages.

Chris Raines: Right. A lot of those, you've got service pages that can be nested under "Services". You've got blogs, downloadables, podcasts, whatever. Those can be nested under "Resources", and so on. Take a look at your navigation and aim for six or less navigation items. That's really going to help the user orient themselves and get where they're going, without becoming overwhelmed with too many options.

Michael Utley: Something I like is, if I have to pick what to focus on with that real estate of the top nav, I strongly favor highlighting the major services categories. Anything that's "About Us," or a blog, or resources, or jobs, or any other types of us information, not service information, I think all good stuff can be jammed under one item in the top nav. I really don't think people are interested. They're not there for the history of your company. The blog may be a resource. It may attract people to the domain and help lift the domain and search engines. But it's not something people need to get through to get to what they're trying to do. Often we'll have two to three major services categories in the top nav and devote as much of the real estate to that services side, because that's why people are there, to solve their problems. We make it as user-centered as possible.

Chris Raines: Right. I think, the bigger you get, the more the about and leadership becomes irrelevant. You can start to put that in the footer.

Michael Utley: Yes, absolutely. I think it's one of the hardest things for a company when they're about 5 to 10 years old, and especially when they feel like they have some history to tell, they want real estate to get that story across. It's just hard, but nobody cares.

Chris Raines: Then eventually, it just goes off to investor relations. Separate website.

Michael Utley: Yeah, and then it's just investor relations. But footer, I think that's a good point. You can move a lot of that stuff to the footer. Folks are smart. They know header footer and they can do that. They're just not going to slow down to do it in the pace that you want them to. Great. This has been Episode 45 of the Dodgeball Marketing Podcast, SEO Basics. If you are enjoying this content, please follow us at Dodgeballseo on Facebook, Twitter, YouTube, LinkedIn, to access new episodes, marketing resources, and more. Thanks for listening and watching and being a part of this podcast.

Chris Raines: We'll see you on the next one.

Michael Utley: Thank you.