0

I recently incorporated a fixed header on my site and its very helpful in keeping the search and important links available at all time. But my concern is it might be a little tall. It's about 100px tall at the moment. This is very similar to the height of Google+'s fixed header. When I look at sites like Twitter and Facebook they only use about 20-30px for their header. Is the fixed header on G+ too tall? Would it be better to fix only the black bar that you see on G+? And is it necessary to differentiate whether or not the header is fixed between About Us-type pages or activity streams which can go on endlessly?

Improve this question
2
  • 2
    how long is a piece of string? (The answer would be highly dependent on context and the particular needs/wants of the project)
    – DA01
    May 7, 2012 at 16:38
  • Let's say it's very similar to Google+ in function.
    – Hawkee
    May 7, 2012 at 16:41

3 Answers 3

Reset to default
3

This may sound surprising, but there is no fixed header on Google+. Google+ has an outer "shell" within which you see your feed in a scrollable area. The shell has an equal width above and to the left of the scrollable area, and it surrounds it on all sides (at the bottom as well, although you can only see it very briefly if you hit End, and before additional contents loads).

While a fixed header is visually perceived as taking real estate away from the content, a shell is not - as long as it's not empty. Instead, the scrollable area is perceived as an element on the general background of the shell. An element might be perceived as being too small, but there's no feeling that its space was stolen by the background.

enter image description here

Improve this answer
1

Google have a pretty good reason to have header that tall - their search is their best selling point. So they want to promote it as best as they could.

If search is not that critical for your site, I would recommend not to emphasize so much on it.

Also rarely the chrome of a website contains such an important information that it would require to be ever-present on the screen. Rarely people need to access frequently links from the main navigation. They prefer clicking on "content" links (these are embedded into the main content context).

Also take into account that many people have several toolbars enabled in their browser. This means that the browser chrome, the OS chrome and you fixed header could take up to 1/3 of the total screen height. And on modern screens (which are mostly wide-screen. e.g. 1384h768) you most probably have more horizontal space than vertical.

If a bar needs to be fixed onto the screen I would make it a vertical one (left hand navigation for example).

Improve this answer
1

I think 100 pixels is fine in most cases. Reduce your browser's height to 768 pixels and see if you're able to view enough content or if the header gets in the way/is annoying. Put yourself in the shoes of the consumer.

If it is too tall, but you can't reduce the height, then see if you can split it into 2 headers and have only the top header scroll with the page.

Also good points about an abundance of vertical space, if it makes sense to have a vertical menu that scrolls with the page then that may be better.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.