Header takes up a lot of real estate on mobile site in landscape


(ampburner) #1

I really like the sticky header - which always shows the topic title and navigation at the top of the page no matter where you are - and it works great on desktop.

But on mobile it is too obtrustive. Especially in landscape mode…

See screenshot

Posting this from IOS 7…

Proposed improvement:
If you scroll down, the header could scroll out of the viewport, but the moment you swipe/scroll upwards, it could immediately scroll back into view (even if you’re somewhere halfway down the page)

This behaviour will be obvious to touch screen users, they are scrolling up and down all the time, anyway.

My description is probably a bit vague, but for a perfect example, have a look at the way Google Chrome has implemented this for their address bar in IOS…


Auto-hide persistent fixed header on scroll
Fix the fixed navbar?
(Kris) #2

Yeah, this is quickly becoming a somewhat common behavior. I don’t think it’s a terrible idea… though I can also see how someone would be confused by it… I’m conflicted about it.

Here’s an example on a desktop site.


(Dave McClure) #3

FYI, the title isn’t shown in the sticky header on mobile


(Jeff Atwood) #4

I think this is a criticism specific to a mode of interaction – landscape on 16:9 super “tall” mobile devices – that simply isn’t common or expected.

The typical way to interact on a phone is portrait, and that means the screen has plenty of room for a small header at the top.

Now, if you want to propose that in landscape mode, the header is suppressed, then perhaps, but I view that as a low-priority change we can maybe do in the future.


(ampburner) #5

I maintain that it’s a waste of space in portrait mode aswell - but agree, it’s even worse in landscape mode.

Also, landscape mode is great for reading longer texts.