It is called many things, but in this post we will refer to it as the header. This is the first thing to load, and arguably the most important part of your website. If you get this wrong, the rest of the website is irrelevant.
Header Layout
Headers come in three primary layouts. Along the top, along the right side, or in a flyout toggle. Which one you choose doesn’t really matter, what does matter is that the header functions properly and is intuitive. The organization of the header elements is crucial. Keep the header as simple and small as possible while still giving the user quick access to each part of the website. Avoid drop downs and double rows if possible, but when needed keep them clean, short.
Header Code Injection
This is the part of the header that you don’t see. Many tracking codes and animations require code to be placed in the header to load before the rest of the website loads. So as you would expect if too much is loading before the website, it will take longer for the whole site to load.
Header Size
Take a look at some of the largest websites on the internet. Amazon, the Washington Post, and anything else you can think of, notice how small their headers are? Keeping a header short, and simple as possible gives your web pages more room in the viewport. This is most important if your header is sticky (stays at the top when you scroll down). If the header is taking up too much space at the top of the viewport, users will be forced to scroll just to see everything.
Have a project?
Contact us! We would love to talk about your project and what we can work out together.