The biggest CSS annoyance

I think this is one of the biggest design flaws, and I see it all the time when I surf the net. What surprises me is that I even see it on sites that have valid code, a nice design and offer valuable services.

Seriously, how can somebody miss that his complete page layout shifts some pixels to the left or right when looking at different pages of the same site.

Consider this, twitter without a scrollbar (I think this was my profile page).

Twitter without vertical scroll bar

The same site, but now with a scrollbar. Notice how all the content moves to the left.

Twitter with vertical scroll bar

On the next image I made an overlay of both shots to make the layout shifting more obvious.

Twitter, scrollbar layout overlay

In my opinion this is one of the biggest design errors, and everybody does it. And - it's ridiculously easy to fix:

 html {
    overflow-y: scroll;
}

Not using this is really hurting a website's usability. When a user clicks on some navigation element the navigation is supposed to be at the same place on the next page. So, force the vertical scroll bar!Now I just need to hire myself a good designer to make my page look good ;-)

Published on Sept. 29, 2008 at 6:30 p.m. by Nicolas and tagged CSS, HTML, rant, usability, Webdesign. You can follow the discussion with the comment feed for this post.

2 comments

Mike Padgett wrote this comment on Oct. 17, 2008, 4:12 p.m.

"Not using this is really hurting a website’s usability." Unless I've misunderstood you, I think UX people have bigger things to worry about during their busy days :-) The circumstances you describe are vendor-specific. When scrolling is not needed (i.e. because the page length is less than the viewport), Internet Explorer historically shows an inactive scrollbar while Firefox, Safari and others show nothing. Check Google in each and you can see the difference. Both approaches to this particular state are by design and there's nothing ostensibly wrong with either, so trying to code against them, in my opinion, seems rather pedantic. What I believe you're describing above isn't a design flaw, but rather a by-product of how your particular flavour of browser handles your pages. And that's not something anyone needs to be coding against - maybe that's the reason why you "see it all the time". Otherwise it's a bit like coming full circle from the days of Flash "letterbox" sites (or indeed the dreaded intro pages), when many webpros used to deliberately force the scrollbar to disappear, especially when the inactive colour "clashed" with their fancy backgrounds... Ah, those were the days when clients spent 75% of their web budget on a Flash intro. And what they got was thirty plus longlasting seconds of whizzing vector graphics. With no "Skip intro" link to foul up the feng shui! :-D

Reply to this comment
nicolas wrote this comment on Nov. 3, 2008, 10:08 p.m.

Mike, I appreciate the work you put into your comment, but I think you totally miss my point. Feel free to do whatever you want on your sites. UX people who don't think about such issues clearly have the wrong job IMO. Whenever I hire peope, I expect them to be, as you put it, pedantic.

Reply to this comment