The header of a website is the section at the upper-most part of the web page. It is the area where you will find, at a minimum, the logo and the navigation bar. While there is no rule specifying how tall a header should be, we like to design our headers as shallow as possible. Read on to learn why.
For the purposes of this blog post, we’re addressing header layouts on desktop, not mobile.
Why we prefer a shallow header
While the header should make it easy to identify the brand and be large enough to interact with easily, it should not the page’s primary focus. The header is there to remind the user whose website they are on. The header also provides the user with access to the rest of the site. The navigation bar makes this possible.
The top portion of a webpage is prime real estate. When a header takes up too much room, users may not pay attention to the more pertinent information below. Keep the header compact and shallow—don’t let it eat up a majority of that prime spot.
(The caveat to this rule is that the homepage header can, and often is, larger than the header on interior pages. However, the logo and the navigation bar should be the same on every page.)
Once the site visitor lands on a new website, they may scan the header to see where they are and what their options are for navigating. Subsequently, we want their focus to be on the unique content of each page. We don’t want them to be distracted by a huge header.
When it comes to the design of a website, we like things to be clean and simple. Good design helps guide the user to both the content areas they are interested in and the calls to action that we would like them to take. A huge header can make both things more difficult to achieve, while a shallow header puts the unique content center stage.
Consistency counts
With all this in mind, remember that the design of a website header should be consistent from page to page. As the visitor moves from one page to another, the content and position of the header should remain unchanged. Think of the header as the anchor from which the user can easily maneuver through the site. If the header changes, the user can become confused and think they’ve somehow left the site.
Why we like compact headers
A website’s header plays an important role in communicating your brand. While there is no specific size your header should be, we recommend keeping it as compact as possible. We have found that a shallow header, 75-300 pixels deep, keeps the user’s focus on the content of the page.
If you’d like help with your website header design, call (518) 392-0846 or email [email protected]. To learn more about our website design services, visit our Customer WordPress Website Design and Development page.