PageSpeed has two header styles, more will be added in upcoming versions. Let’s see how they look and which one you should choose.
- Sleek header
- Regular header
Regular header
This works well with sites mainly focused on making money through ads mainly for these two reasons.
- You get to put an ad in the header next to your logo.
- You can put an ad below the navigation. You can do this in the sleek header as well, but the ad is going to dominate the header.
These two ad spots have very high CTR and are very prominent.
Advantages
- More above the fold space for ads, generate more revenue.
- Can use header background image to set the tone of the site.
- More room for primary navigation.
Disadvantages
- Less room for main content above the fold.
Sleek header
In this, the logo and the primary navigation are inline. This works well with business sites, personal blogs and eCommerce stores. We use the sleek header on this site.
Advantages
- Looks stylish
- More content above the fold
Disadvantages
- Leaves less room for the navigation menu. [Can be overcome by using dropdowns]
- Can not use header background.
When you use sticky navigation along with the sleek header, it’s the header along with the navigation that sticks.
These are only recommendations and not rules set in rock, you are free to choose the one that best fits your needs.