Take the 2-minute tour ×

I've observed this pattern in practice at many places now, websites put a small contrasting bar on the top of the page. What is the rationale behind it?

Readability header:

Readability.com header

Tenderapp header:

enter image description here

share|improve this question
add comment

3 Answers

up vote 21 down vote accepted

I think it's part aesthetics - as @marcintreder suggests - and part visual anchoring. The horizontal bar is a cue that the page is scrolled all the way to the top - which is especially useful in "light"/"minimal"/"uncluttered" designs without so many other cues.

share|improve this answer
add comment

Can't think of any. It's probably aesthetics. Recently I've been split-testing top-bars of large eCommerce website. The reason was changes made due to visual aesthetics


  • top of the top bar wasn't making any statistically significant difference in conversion (cpc business model, large sample - more than 0,5 mln people), no matther if it was pale or dark, with high contrast;
  • bar splitting top bar from the content (contains breadcrumbs) was making difference in conversion (small in plus) if it has high contrast;
share|improve this answer
add comment

I think as @agib said, it anchors the top of the page, but I wonder whether it is also serving to create a visual separation from the toolbars and stuff at the top of browsers - it indicates that the page stuff starts here. On the sort of minimalist pages that you link to, this might be sigificant - on SE sites, there is a top header bar in a distinctive colour that serves the same purpose, as well as being the header for the site.

share|improve this answer
add comment

Your Answer


