Hey there and welcome back!
So yeah I know it’s been a while, and I apologize for that. 2021 ended up being a crazier year than I thought it was going to be, and unfortunately this channel had to take a back seat to all of it.
But not anymore. Beginning today we’re getting back on the wagon and talking about websites and digital marketing and how they can help your business.
So today we’re starting with an update on the channel and what you can expect from it, and then we’re going to be starting a series on the anatomy of a website, beginning first with the website header.
But before we get started, if you want to see more videos about websites, digital marketing, web design, ecommerce, WordPress, and other website related topics, be sure to hit the subscribe button and ring the bell for notifications.
Now let’s get started!
Channel update
So first things first, let’s talk about this channel and what you can expect from it over the course of the next year.
This year I really want to focus in on helping you. That means we’re going to talk about things that will help your website and ultimately help your business. You should be able to walk away from every video and every series with actionable items you can take on your website no matter how big or small. It could be simple small changes you could make right now, or they could be bigger things, like redesigning the website.
To that end, while I have a laundry list of topics that I would like to cover this year, if you have anything that you would like for me to talk more about or answer any questions, be sure to leave them down in the comments section below or you can contact me through my website. The link for that is down in the description below. This channel is here to help you.
Also, you might want to go over and check out the blog on my website. I’m going to be posting a lot of the same things over there, exploring topics in greater detail pertaining to how to create and manage an effective website. And I also hope to give you actionable steps you can take to make your website better. There are also going to be free resources to help you out as well.
Finally, from a business perspective, I’m pivoting a bit to focus on creating WordPress products, both plugins and themes, that will help your business and your website. So be sure to check out the store page periodically and follow on social media.
Now let’s get to the good stuff.
Anatomy of a website
So to start off 2022, I want to get back to the basics and that starts with discussing the anatomy of a website.
Now if that sentence leaves you a bit worried because you’re not a tech person or programmer or just code scares you, don’t worry. We’re not going to be talking about the code stuff of a website.
Instead, I want to focus more on the bigger picture of the parts that make up a website, you know the homepage, the header, the footer, the about page, the contact page, calls to action — all of that. And ultimately, I want to help you make sure that they are the best that they can be on your website to help your website and your business.
So consider this part of a websites 101 course. And while there won’t be a formal test at the end of this course, the real test will be with your website.
Let’s start this journey.
Website headers
We start at the beginning and the first thing that you see on any website is going to be the header.
This is the top section of basically every webpage. It’s the first thing that people are going to see on your website, and it’s the first impression that they are going to have of your website and your business. So … it’s pretty important.
While there’s no one right way to build a website header, they do contain a few things. They will have either the site title or a word mark or logo for the business, and they will also have a navigation menu to help you get through the website. They also might have a search bar or social media icons and links and maybe even breadcrumbs to help people find their way back to the homepage.
It’s also likely that this header is going to stay the same across all of the pages of the website. Again, it’s that first impression that is oh so important to getting people to stick around and maybe become customers or clients.
Now before we move on, I do want to cover something really quick that I came across while I was researching this video. In that research, I saw a lot of confusion between what a website header is and what something called a hero section is. A lot of people were calling those hero sections headers when they are not quite the same thing.
A hero image is the top section of content for a page that takes up the full width of the page and probably the height of the screen. It might have a color or image background. And usually there’s eye catching text with a call to action for the user to take.
But that’s actually part of the content, and not really the header that we’re talking about right now. Especially since that hero section might not be on all of the pages and it could also change between page to page. Just wanted to clear that up for anybody who might be confused.
Now let’s continue.
Elements of a website header
So now that we know what a website header is, let’s break down the different elements that make up the website header.
The first thing you notice with a website header is the site title or site logo. This is crucial for every header. This is how people will know what website or business they are looking at. It’s also the first real visual element that they will see when they come to your website, so make sure that if you have a word mark or logo here, that it’s nice, crisp and professional looking.
Also as a bit of a tangent here, if you’re sort of a technical person or know about HTML tags, you might wonder if your site title should have an h1 or a p tag or something else. And that’s because each page can really only have one h1 tag both for SEO and accessibility purposes. Personally for me on my website, I use an h1 tag for the site title text on the homepage and for every other inner page, it just has the p tag around it. That just makes things easy and I don’t have to worry about accessibility or SEO issues.
Getting back on track, the next most important element of the header is the menu or navigation. Having a good menu structure is really underrated, but it really can be a make or break thing for users of a website. People are going to use this to get around your website no matter what page they land on. If the structure is good and easy to use, they’re going to be able to find what they need. If it’s not, they’re just going to leave and not come back. Simple as that.
Next up, one optional thing you might have in your header is social media links to your profiles. While it’s a really good idea in this day and age to have links to those social media profiles somewhere on your site, they don’t have to be in the header. But if you want them there, just make sure that they blend in nicely with the design of the site. For any web designers out there, Font Awesome is a great resource for adding those icons to a website and making sure they make the design of the site.
Finally, another optional thing you might see in a header or around the header is breadcrumbs. This is a trail of pages from the page you are on back to the home page. It can be a very beneficial navigational tool, plus if you use the correct Schema markup it can help your SEO with Google. But at the end of the day it’s an optional thing. I’ve tried it both ways on my site with inconclusive results.
And just a note before we move on, you might see the page title in the header type area, like on my site, but I’m going to leave for now until we start talking about the content and the inner pages.
What makes a good website header?
So what makes for a good website header anyway?
Well first, having a clean, clear logo or site title is a must. Take the New Times wordmark for example. It’s clean, crisp and professional.
Also, the menu should be organized for the user experience. While I say that simpler is better, you can have a complex menu that also works. For example, on the New York Times website, the menu has a lot of items, but they are self explanatory and you know what you’re getting. Also, The Athletic has a pretty complex menu to take you to coverage of different teams and leagues. But if you’re looking for a specific team, it’s not that hard to find.
Another thing to think about is the size of the header. You don’t need something that’s massive and takes up the whole screen. Screen size, especially the above the fold or screen real estate that can be seen without scrolling, is valuable. And you want to get to the content right off the bat.
Finally, a good header fits with the rest of the website. It doesn’t cause a user to back out of the website and go somewhere else. Again, simpler is better.
What makes a bad website header?
On the flip side, what are some things that make a website header bad and how can you avoid those issues?
Well, the first thing is that the menu isn’t organized at all. For example, things could be buried underneath a million different child menus or nothing seems organized when you try to find what you’re looking for. Bad menu structure will kill your website.
Also, having too big of a header is a problem as well. People aren’t coming to see your header, they’re coming to see your content. So get to that content as quickly as possible.
Another thing is that a bad quality logo or wordmark is a killer too. The logo doesn’t have to be super professional or super fancy or any of that. Heck, my logo is just letters. Simpler really can be better, especially here. But it can’t look fuzzy or blurry or just really bad quality. It can be hard for people to take you seriously if that logo or wordmark looks just bad.
Finally, if the header isn’t just visually appealing or looks really bad, then you’re going to have a hard time getting people to stick around. Again, as I have mentioned many times already, it doesn’t have to be fancy and simple is really good. But if it looks bad or childish or just whatever like an afterthought, then that’s not going to help anything.
What you can apply to your website
So what can you do now with all of this information I just threw at you, even though you’re not a web developer or web designer? Maybe you just manage your website through WIx, Squarespace or something like WordPress.
Well, surprisingly there’s quite a number of things you can do right now. First, go to your header and make sure that your site logo or wordmark looks good. Does it fit in with the theme or design? Is it high quality and crisp? If that was the first thing that you saw on a website, would you continue looking at the rest of the website? If not, you need to fix it.
Next, try to use your navigation menu as if you were a first time visitor, or even get your friends to try and do it. Is it easy to navigate? Do you get easily confused or frustrated and can’t find what you are looking for? If that’s the case, you need to restructure that menu so that people can find what they are looking for. Remember simpler is better.
Finally if you’re looking for a new WordPress theme, or a theme on whatever content management system you’re using, then look at the headers when you’re looking for the right theme for you. Make sure that it looks good and that the navigation menus work.
Finally, make sure to test out the header area and especially the navigation menus periodically. That way you might be able to catch issues early on and improve the website.
A great header sets a positive tone for the rest of the website.
Outro
So what other questions do you have about website headers? Is there something that you’ve tried that either has worked or hasn’t worked? Be sure to leave them down in the comments section below.
If you’re in the market for a new or first website for your business, I would love to help you get started and create a website to get your business online relatively quickly and for a price that should fit your budget. Check out the link in the description for more information and to sign up for a free one-hour consultation.
Next time we’ll be talking about the website footer and how you can make this section the best that it can be for your website.
To see that video and more videos on web design, digital marketing, ecommerce, WordPress and other website related topics, be sure to hit the subscribe button and to ring the bell for notifications.
But until then, I wish you and your business the best of luck.
Leave a Reply