Okay, so I’m not here to offer you a dictionary definition of how a website is a “collection of web pages hosted on a web server on the world wide web”. You already know that. What I’m here to do is clearing up the vocabulary and describing the different components of a website. Understanding and differentiating these terms can help you communicate more clearly when you write web design briefs or give feedback on your web projects.

What is a website and why do you need to know your definitions?

The purpose of a website is to contribute to reaching your business goals, and it is a powerful channel to reach your prospects. I probably don’t have to convince you why all businesses - from locals to corporates - should have a website, but here are some statistics for you. A whole 92% of consumers read online reviews before a purchase and 82% even research products online while in an offline store. There’s no doubt you need a website, but what really is a website and why is it important to know your definitions?

Just to be clear, a website generally contains several web pages. The homepage is the first web page you’re directed to when you visit a website. A homepage navigation menu usually allows you to visit other web pages on the website like a contact page or a product page. However, a website can sometimes contain only one web page - called a landing page. Unlike web pages, landing pages are standalone websites that are generally used for campaigns and offers.

You could differentiate between multi-page websites and one-page websites. What’s the difference? Cost and time of development. Developing and designing a business website with a number of web pages is a web project that requires a higher budget and a longer timeframe, than designing a campaign one-pager. When you’re briefing a web design project it’s important to clearly define what kind of website you’re requesting, to receive an accurate price estimate and satisfying results.

What are the basic components of a website?

Once you have briefed a web project and accepted a proposal, you’ll want to give great feedback on the progress of the project to receive a winning website in return. For your feedback to be effective, you’ll have to be clear and concise. This requires some knowledge of the different components that constitute a website. Know what you’re giving feedback about. Do you know what a hero image is? Or what breadcrumb navigation is? If you don’t, keep reading.

Header

The header is the top component of a website that generally contains the company logo and navigation. In web design, it is considered best practice to include navigation to central web pages and a clickable logo that directs the user back to the home page. Your header could either be static at the top of a web page or so-called sticky, following the page as the user scrolls. A sticky header is generally favoured for user-friendly navigation.

Depending on the website, you could also consider including a call to action, search bar and language switcher. Unless your website exists for informational purposes only, you’ll want to encourage an action. Whether that is to buy a product or book a meeting, you need to include it in your header. In our experience, you have users that read content closely and you have users that’d rather jump right to conversion. The header CTA is for the actionable one.

Our website header including company logo, central navigation and call to action

Navigation

Because it is so central to the user experience, I want to dive deeper into the world of navigation. It is a crucial component of not only the header but the footer too, and it comes in countless variations. Multi-page websites often have drop-down primary navigation that when hovered, reveals secondary navigation. You could see it as a way of categorizing web pages, allowing the user to quickly find the content that they are looking for.

As the user clicks deeper into your content, it is useful to include breadcrumb navigation that orients the user of where they are on your website. Just like in Hansel and Gretel, breadcrumbs function as a trail for the user to navigate back to where they came from. And while we’re onto food analogies, you’ll often also see the hamburger navigation. The universally recognizable three lines are often chosen for a clutter-free interface on mobile-first websites.

Our drop-down navigation revealing secondary navigation of our services

The hamburger navigation keeps the interface clean and clutter-free

Hero

The hero space, or simply hero, constitutes the first part of a web page that can be viewed without scrolling. 100% of your website visitors will view the hero, with a descending number of visitors further down the page. The hero is your chance to convince the user to interact with your site and should include an eye-catching image and captivating headings. Communicate your unique selling points and add a clear call to action.

The website hero

Content

Intuitively, the content refers to all text, image, animation and audio that the visitors consume on your website. Visitors come to find valuable and relevant content about your company and 71% of consumers will read company content in their customer journey. Hence is content creation considered an effective marketing channel. Consider how you structure your content too, to increase readability and help the visitor find the information they are looking for.

How we section our case study content 

Call to action

I know I have talked about calls to action already, but they’re so important that they deserve their own section. Normally, a call to action will come in the form of a button that leads to conversion. You know, the marketing word for money. For us, a conversion is a design project requests - which is why you’ll find a number of different CTA that takes our visitors to a contact form. Design your website to enable action and consider how you can use CTA to optimize for conversion.

We have dedicated a whole section on our home page for a clear CTA

Footer

The final part of a website is the footer. Whereas the header normally contains navigation to the most important web pages, the footer often offers comprehensive navigation of both primary and secondary web pages. Users that are interested in contact information, careers, policies or press, are likely to look for it in the footer. It’s important that you cater to this information need and include navigation to relevant web pages in your footer.

The footer often offers more navigation than the header