Schedule a call

The most important parts of a website and how they influence your business and visitors

Everyone can name at least a few components of a website. People are used to seeing navigation bars and footers, call to action buttons, images, and many more. But not everyone is aware that every part of your website influences multiple layers of your digital presence. These areas include user experience, website performance, SEO, and more.

Even though we perceive website elements as the things we can see, there’s much more to it. Every design choice has implications, and some of the consequences are not so obvious. In this guide, you will learn:

  • What are the parts of your website layout
  • Which website components are the most important
  • How different components affect your bottom line
  • What can you do to improve parts of your website, with and without a developer’s assistance

The core parts of your website

You know what they do, you use them daily. But when it comes to your website, there’s so much more to a navigation bar than just helping users find their way around. From how technical aspects of navigation influence SEO, to the heavily researched topic of the optimal number of navigation elements – here’s everything you need to know about them.

How navigation bar influences SEO

Starting with SEO, you might be familiar with the concept of internal links. For those that aren’t, here’s a quick explanation:

What is internal linking?

Internal linking is the process of using hyperlinks to establish the hierarchy of the pages on your website. When a page has a lot of links from other pages, especially the high-level ones, it gains authority in the eyes of visitors and search engines.

Much like any other link on the page, the navigation bar includes internal links. However, Google doesn’t treat them equally. The navigation bar is a repeatable element and is unlikely to change from page to page, so navigation links carry less SEO value for crawlers. This helps you avoid a situation where certain pages have an inflated internal linking profile simply because they’re in a navigation bar. Knowing this is important to avoid confusion when you first learn about internal links. Many people overvalue navigation links at first – and we’ll get back to that when we talk about the footer.

How many items should you have in top-level navigation?

You’ll find many numbers online – “no fewer than 4” or “no more than 7”. There is no rule of thumb. Here are four quick questions you should ask yourself when creating a primary navigation bar:

  • What is the content breadth on my website?
  • Are the labels meaningful and distinct?
  • Do my users know what they’re looking for, or are they just browsing?
  • Are the labels prioritised correctly, with the most important ones at the beginning and the end of the bar?

If you look at the likes of Amazon, they have over 10 navigation elements. Does that mean it’s too much? We can quickly answer the four questions for them. 

  1. Obviously, Amazon’s content breadth is immense. It’s the largest e-commerce platform in the world. There’s A LOT to find.
  2. Second answer is a bit subjective, but you can argue the labels are very self-explanatory. There’s little to no overlap between them, so you always know where to go.
  3. We can safely assume that many Amazon customers go to the website with a specific goal. If you visit the website to purchase a new CD released by your favourite artist, a generic label of “Products” is not helpful. That’s why expanding it to include several categories like “Music” is not a bad practice.
  4. It’s impossible to tell what is important for Amazon without all the data, but we can safely assume they have that under control. The first few labels include navigation elements like customer service or best sellers – it’s easy to imagine that this are super popular, so we can tick that off as well.

As you can see, these four questions allowed us to come to a conclusion that 10+ items are perfectly fine in the case of Amazon.

The foldable “burger” menu

You’ve probably seen the three horizontal lines that open and close menus by now:

They’re ever-present in maps and are called burgers since they look like “layers” resembling the popular fast food. They’re great on mobile devices, but there’s a trend of using burger menus on desktop screens as well. There are a few arguments to be made as to why this is a bad approach.

To start off, it’s an unnecessary interaction. And it’s unnecessary every single time. When you land on a Home page, open up the menu and switch pages, you’ll have to go through that process again if you’d like to go elsewhere.

It might come as a bit of a surprise, but plenty of people are unfamiliar with the burger icon. It’s especially noticeable for older audiences, and a poorly designed hamburger-like icon might look to them like a purely decorative element.
And to combine the two creates a barrier to content discovery. There are very good reasons to use a burger menu, i.e. when you have a single, clear call to action. You want the user to go there, so eliminating distractions is perfect. But if there’s more to your site, you might be losing out on showing people the pages that could be crucial for their conversion.

Mobile navigation

When talking about burgers, mobile navigation comes to mind. As the feature was born from the need to save space on smaller devices, it’s an integral part of the experience when browsing on a phone or a tablet. But what’s the other mobile navigation trend that we somehow don’t see on websites too often? If you said it’s positioning the primary navigation at the bottom of the screen, that’s correct.

For most people, this is the most accessible way to manually navigate a website. There are some trade-offs, though. Positioning the navigation in a spot that is easy to reach means that it’s a bit out of the way for our sight. It’s a valid point, but you could argue that on such a small screen, it’s a minor inconvenience.

Landing pages are an integral part of a website. You can general split them into two types:

  • SEO landing pages
  • PPC landing pages

In the first example, the navigation usually stays the same. SEO pages are there to drive traffic, but they’re rarely hyper-focused on conversions. Instead, they funnel visitors to the converting pages.

However, a PPC landing page will rarely share the navigation with your website. In fact, PPC landing pages are often set up on different platforms altogether. That carries some downsides, such as managing your digital ecosystem in different places, and maybe even different technologies, but the upsides often negate that.
The difference comes from the fact that a landing page for paid ads should lead users straight to a conversion. It’s not always the case, but it’s frequent enough to treat this as a baseline. As such, you want to keep links to a minimum. You want the conversion right then and there – your home page and blog don’t matter at this stage.

As another repetitive navigation element, the footer has a similar impact on SEO. Since the links are present on every single page, their SEO importance is lower. This is even more important here than in the navigation bar. The primary navigation is usually short and to the point, but footer is the home of many lower-level pages. Important pages, but not the primary ones, such as:

  • Privacy policies
  • Customer portal login
  • Content marketing pieces
  • SEO landing pages

It gives you an easy way to link to them and show users (and search engines) that they are important. Just remember that placing links in a footer isn’t a quick hack to improve SEO. It’s easy to think of it as one – if you’re aware of how internal linking works, you may think “what could be better than linking to this SEO page from every other page on my website?” But that’s precisely why these links carry just a little bit less value.

The above doesn’t downplay the importance of a footer by any means. In fact, we’d like to highlight that footers are very important. As people get used to scrolling pages more and more, footers are often your last chance to grab their attention. Instead of filling them with the most random links, it’s vital that your team puts a bit of thought into them. It’s not just a “thing” that websites need. You can use footers effectively to neatly wrap up the user’s experience. Don’t leave your visitors at a dead end.

We’ve talked about basic links factors already, so let’s dive a little deeper. Hyperlinks are a powerful tool for internal linking. They help you build the right website structure for the users and search engines. If you take a landing page as an example, if you never link to it from your website, Google will not find it by default. You would have to manually add it to the sitemap and/or request indexing from Google. And even then, indexing without any incoming links is not guaranteed.

When it comes to call to action buttons, this will be your bread and butter on a website of any type. You’ll always have an end goal in mind for your visitors – be it a purchase, or simply reading an article. Use buttons to grab people’s attention and lead them on the right path.

For both types of links – buttons and text links – there’s one golden rule: always make the links descriptive. Labels like “learn more” or “click here” are not something you want to use. Online, people scan your content and they will often miss out on the context. Plus, search engines will have a much harder time figuring out the context of the links themselves. You can imagine how that affects SEO.

Last but not least, styling is key. It might not be obvious at first, but most combinations of white on red are inaccessible. The contrast is very poor, and they can be hard to read even for people without disabilities. It might be a job for your designers and developers, but it’s something to keep in mind.

The best practices of website navigation

Learn how to combine navigation bars, footers and regular links to create user-friendly navigation that boosts your conversions.

“The thing at the top of any page”

Header, banner, Hero section…

Yes, these three words describe the same thing. And there are probably even more. We prefer calling it the Hero section, but it’s good to be aware of the ambiguous naming. People on your internal team and agencies that you work with might call it something else, and it will help you all be on the same page.

What is the Hero section

A Hero section is the first thing your visitors see on a page without having to scroll.

You’re definitely familiar with most of the things you can see in a Hero section. It’s arguably the most valuable space on your site – the first impression can make or break the user’s experience. It’s important that it’s helpful and relevant, but it also has to load fast. The content will vary based on the intent of your page and your visitors:

  • Are they ready to buy?
  • Do you want visitors to browse your site?
  • Is this a landing page for PPC or SEO?

Depending on the answers to these questions, you will select the elements that you display in the Hero section accordingly. Call to action buttons will be perfect for high-converting pages. But if they’re not ready to buy, it might be a waste of space at the very least, and quite offputting in the worst-case scenario.

Images and icons

Multimedia are perhaps the easiest to get right, but unfortunately, there are many misconceptions about images on websites. Even with high bandwidth connections, large images can drastically slow down a website. So how to avoid it and how to get other factors right at the same time?

Let’s start with the quality. Thanks to Apple, we have access to screens with Retina displays. The technology allows them to display double the resolution of a traditional screen. This has a consequence – websites need to accommodate for that with images at double the resolution. If you have a profile picture on a website that is 200×200 pixels, your website needs to serve a 400x400px source file to Apple devices.

But how to optimise the larger file? Your main focus should be using the correct image file formats. If you’ve been on the Internet for a while, you might have heard that “PNG is a web format”. This is often misinterpreted. It is a web format in the way that it’s not ideal for print – but that doesn’t mean it’s a website format.

PNG files contain something called an “alpha layer”, which allows you to display images with transparency. This is great for some use cases, but it shouldn’t be a default. Using PNG files for images with a background can slow down your website by as much as 80%. Instead, you should choose JPEG, which allows for lossless compression.

In most cases, conversion from PNG to JPEG will give you an optimised image. However, we recommend running images through an image compressor to ensure they’re as small as possible, without sacrificing quality.

As for modern formats such as WebP, they still have some way to go before we can widely adopt them – but it might be worth looking into it. Last but not least, for vector images your best bet is SVG. It’s incredibly light and allows for transparency. SVGs are commonly used to display logos.

Last but not least, there’s accessibility. It’s another aspect of images where myths are rampant. Dated SEO practices included stuffing keywords in the alt tags of images. The purpose of alt text was to give people with disabilities an accessible description of the image. The right way to approach them is to write descriptive alt text for informative images – for decorative elements such as some icons, it’s much better to leave the alt text empty. That way, visitors using screen readers won’t have to listen to useless descriptions.

Videos

Displaying videos on websites is a very delicate matter. On one hand, many studies claim videos drastically improve conversions on a website. But on the other hand, video files are large and heavy. It’s very important to strike the right balance, and the rules are very similar to what we talked about at the beginning of tips for images.

In this case, performance is a much more advanced and technical consideration, so let’s talk about something you can easily influence. Going back to accessibility, videos are best served with subtitles and transcripts on the website. Not only does that help the users with disabilities, or ones that can’t listen to the video at the moment, but also gives you a ton of content for search engines to crawl.

And what about the user experience of videos? There are many factors that will affect it:

  • Your choice of autoplay settings
  • Whether video controls are displayed
  • The aforementioned subtitles
  • Playing the video with sound on

Autoplaying videos that aren’t muted is being actively discouraged by web browsers, and for a good reason. You should never autoplay videos with sound. Whether you autoplay it at all depends on the purpose. Is it crucial for the user to see the video to get interested? Or is it a bonus for a smaller percentage of visitors that will benefit from it?

Similarly, some websites include videos without controls. This is often a mistake, as it forces the user to watch the video at your pace, rather than their own. It’s almost guaranteed to stop them from watching it in a meaningful way.

Contact forms

Like the call to action buttons, these are often the bread and butter of lead generation. It’s how your customers get in touch with you, plain and simple. Contact forms are a vital part of many websites, and getting them right is often the key to converting your traffic.

The first and most important factor is, like with everything else, creating contact forms that provide a good user experience. This includes aspects such as:

For your internal benefit, contact forms can utilise integrations. The most common ones are sending data over to a CRM (Customer Relationship Management) system or a mailing list. You can also set up contact forms to display specific “thank you” pages, lock downloadable content behind them, and much more.

Lists

We’re using lists frequently for a reason. They are a great way to display easily digestible information. Most users scan the content, rather than reading it thoroughly, and a short list can be the difference between taking away the key concepts from a page, and not taking away anything.
And from the design and UX perspective, lists are a great break for the users. Reading walls and walls of text isn’t always ideal, so having something more engaging between them goes a long way.

Colour palette

Most people wouldn’t think of it as an “element” of a website. But they influence your bottom line so much that it’s simply hard to overlook them. Plus, if you’re familiar with the concept of atomic design systems, a colour palette is treated as a low-level component.

We’ve already touched upon the concept of colour contrast accessibility in the Buttons section. Those rules apply to your website as a whole. No matter the component, there are specific web standards for colour contrast accessibility. In many cases, not meeting them will be an inconvenience to everyone. The worst-case scenarios would make your website unusable for some.

But there’s more to it than just accessibility. Colours have psychological effects and they influence your sales and messaging. They create a hierarchy on your website, separating primary calls to action from secondary ones. It’s worth defining a colour palette with these factors in mind. This won’t be a task for you or even your web agency – colours are a part of branding, which is crucial for the success of your site.

If you’re looking for inspiration, Coolors is an amazing colour palette generator. You’ll also find a colour contrast checker among their tools to help you find the right combinations.

How to use this knowledge to improve your website

Now that you’re equipped with this mixture of theoretical and practical knowledge, it’s time to make it count. You should be able to quickly gauge the quality of the core components and even make some instant changes already. The extent of these will vary based on the content management system of your website.

And if you’re hungry for more knowledge, continue reading the section of our Web Design Zone that covers the practical aspects of managing a website.