I was intrigued by this Firefox heat map (which I came across via @smashingmag), showing which parts of the Firefox chrome users interact with most.
In particular, I was surprised by how much the horizontal scrollbar is used, with almost half of all users (and more than half of the Linux users) using it at some point during the study. I was also intrigued by why OS X users use the scrollbar so much less than Linux and Windows users. Darren suggested it might be because Mac laptops have had multi-touch gestures for horizontal scrolling for a few years now, which seems plausible—could also explain why Linux users made the most use of the scrollbars, as Linux touchpad drivers aren’t always as full-featured as their proprietary counterparts.
Anyway, it prompted this little rant about fluid design (aka liquid layout). This always used to be one of the number one considerations for good web page design. Horizontal scrolling in particular was meant to be avoided wherever possible, as it’s both physically more demanding (at least with a mouse or keyboard—less so with touchpad or touchscreen gesture) and more disruptive to task flow than vertical scrolling.
With web pages more likely to be viewed in a wider range of window sizes and screen resolutions than ever before, this tenet seems like it should be more important now than ever. Of course, the sorts of things we do on the web today are somewhat different from what we did ten years ago, and fluid design isn’t always possible or desirable for all of them. Nonetheless, many of the fixed width designs you see these days are just annoyingly unnecessary.
Sometimes it’s because designers or their clients are unwilling to have their pixel-perfect vision compromised by users deigning to view it into a smaller window than they’ve designed it for. Sometimes it’s down to inflexible or poorly-customized web content management systems, sometimes it’s inexperience, sometimes just laziness.
Anyway, next time you’re designing a website, just think about how and where people might actually want to use it. And bear in mind that grumpy old men like me won’t visit it very often if you make us scroll horizontally even just to see to all the navigation links across the top of your homepage, merely because we choose not to fill our entire screen with your website.
Incidentally, none of this is directed at the gnome.org websites, which generally resize in a very sane fashion. So kudos to our designers for doing it right 🙂
Well, blog.gnome.org, running on WordPress, is one example of a fixed layout.
Couldn’t agree more!
/me fixes his website.
FWIW, “Firefox heat map” page requires using a horizontal scrollbar for me in Epiphany. 🙂
@flight: You’re right, although for people just reading blogs, it’s not *too* bad as posts are formatted in a fairly narrow column by default — albeit a static, non-fluid one. It’s more of an issue for the admin UI, although they have made *some* effort… I can squash my window down quite a bit before stuff starts disappearing behind a horizontal scroll bar.
FWIW, synaptics touchpad drivers have been complete for a long time already:
http://webcache.googleusercontent.com/search?q=cache:jFKaX3RODuYJ:w1.894.telia.com/~u89404340/touchpad/+xorg+synaptics&cd=1&hl=en&ct=clnk&gl=fr mentions linux 2.5
I can’t remember the details but last time I was messing with CSS there wasn’t a good way to make things work on both IE6 and Firefox without setting a fixed page width. I think this is why most sites end up doing it, it’s the only way people can figure out to make CSS usable in real life with broken browsers.
It would be useful to also know the average screen size of Linux, WIndows and OSX users in the heatmap survey. If Linux users are browsing on laptops and netbook sized screens they could well have to scroll more…
CSS almost always forces you to use fixed-width layouts, finding various ways to stop you regardless of how you try. CSS just doesn’t make it easy (or even possible) to do so many things you’d really want to do. I have some hope for HTML5, but it’s the hope I can’t stand.
There are some unknown variables related to the rendering that could explain some of the heat map differences: maybe Macs tend to have higher resolution displays or maybe Mac users more often maximise their windows. Both scenarios would lead to less need for scrolling to begin with…
It would be awesome if Mozilla browsers (esp mobile ones) scaled down stuff that didn’t fit in the window.
Here here! I’m biased since I wrote an entire book about liquid and elastic layouts, but I heartily agree. 🙂
Flexible layouts have been getting more attention lately because of iPads and media queries. I hope we see a resurgence soon.
I was intrigued by the fact that the figure for vertical scroll up button is greater than vertical scroll down. Given the browser starts at the top of the page I have visions of 10% of users viewing the limbo area above the web page – maybe there is a whole alternative reality there?
More prosaically does this mean that (a) some people scroll down by dragging then scroll up using the buttons or (b) still can;t work out which arrow means which. I strongly suspect the latter – indeed wrote about this at some length years ago!
Also @Jussi re maximising. If anything the opposite is true more Windows users maximise than Mac users (I’m sure I have heard proper statistics on this not just anecdotal). I think this is because of the design of early Windows was pretty much impossible to use except in full screen mode and tended to be more profligate with icons and stuff so there was less apparent screen real estate for the same physical display resolution and size. In contrast, despite Steve Job’s preferences, Macs have always encouraged a “lots of little windows” approach. Now-a-days these driving forces have pretty much disappeared (every version of Mac OS my screen seems to shrink!), so probably more a hang up of older Mac and Windows users.
Ah the irony of needing to scroll horizontally on that Firefox Heatmap page.