Corporate Website Header - How SP500 Companies Do It

A website's header is what every user sees first. That is why it is very important to plan the header clearly and conveniently. Check out our analysis of the SP500 corporate websites' headers and the way we used the analysis data in the Droopler distribution.

Elements of a company website header

Most business websites have similar items in the menu. Their websites' headers contain:

• logo
• slogan 
• menu
• search engine
• language switch
• links to social media profiles.

These elements need to be well-planned to fit a small part of a website. A menu itself can be quite a complicated and large element. This is where we have started our analysis of SP5000 websites.

One menu or more? 

The first step of the analysis was to check whether the companies have on their websites just one menu or more. Designers of new corporate websites often face such a decision. They wonder how to best present the structure of data on the website to the user.

After analysing the websites of corporations from the SP500 ranking, it can be clearly seen that the majority divides them into the main and additional menus. The data is presented in Diagram 1.

Figure 1. One or more menus on SP500 websites.

How many menu levels?

Our review also shows that many of these companies use multi-level menus, and you can see that two-level menus are the most popular. It can be stated that menus with more than two levels are rare. 

Figure 2. Number of menus on SP500 websites.

Search engine and social media in the header

We have also checked whether the companies from the SP500 list add a search engine to the header. It turns out that over 400 corporations have a search option at the top of their websites. This is often due to the high complexity of the websites. Using a search engine, users can find the content they look for more easily.

Today, social media constitute a very important part of marketing activities. We have verified whether the companies add social media icons in the header or footer. It turns out that they are not so important for SP500 organisations, and most of them put links to social media profiles in the footer.

Figure 3. Search engine and social media on SP500 websites.

Conclusions from the SP500 companies’ analysis concerning Droopler. 

Droopler is a Drupal-based distribution dedicated for building Drupal corporate websites. It is an Open Source project. You can learn more about Droopler here:

• https://www.droopler.com 
• https://www.drupal.org/project/droopler 
• https://github.com/droptica/droopler_project 

While browsing the websites of major companies, we were wondering how to build a header in Droopler. 

We concluded that the header should contain:

• Logotype,
• Main menu working as a mega-menu, in which you can add not only many levels of links, but also photos and other elements,
• Additional menu, where you can place links, e.g. to a page with job offers or links to contact pages,
• Search engine,
• Social media icons - we think social media is an important part of marketing, and Droopler was created with people working in marketing departments in mind.

Figure 4. Droopler system - a Drupal distribution header for corporate websites.

Final thoughts 

When building your website, think about what elements will fit your business. Remember that the header is the first element on your website and every user will see it.

Check out what the websites of large companies operating in your industry look like. In these cases, the header's appearance is probably a result of UX analyses. It is good to model oneself on it. 

Think whether Droopler could be the right solution for you. Implemented in it are the best practices from other company websites. The system is flexible and allows adjustment to a specific implementation. 

Subscribe to the newsletter to receive more content on this, as well as other topics.