I was having a discussion today about the pros and cons of scrolling individual elements independently on a web page (using CSS ‘overflow’, obviously).
For example: having a left column containing content, and a right column containing content, each with there own vertical scroll bar and, therefore, the entire site having a set height. My friend’s point was that he didn’t like the fact that the header and navigation gets ‘lost’ when having to scroll as per the usual variable height web layout.
Whereas my argument was as follows:
- The user could possible have 3 vertical scrollbars to contend with if, for example, they were viewing the site at 800×600 (17% of web users) or if the sites height was set too high in general.
- The above does have obvious accessibility issues (more movement and interaction to access page information etc.)
- This technique could remind web-savvy users of the days of ‘frames’ – causing many who remember such days to vomit violently all over there flat screen monitors and wireless mice – never a good thing!
- None of the leading web developers practicing the latest in web2.0 methodologies are using this way of developing sites and displaying content, and, lets face it, they know a lot more about best practice than me or my colleagues, which, in my view, is reason enough not to adopt such a solution.
You could say, well, we don’t want to be following the crowd – which I agree with entirely in terms of the visual creativity of a site and also pushing emerging web techniques and methods further, but not in terms of basic functionality like scrolling.
Oh, by the way, to add vertical scrolling to an element you do the following:
CSS
#content-container { height: 200px; overflow: auto; }HTML
<div id="content-container">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Etiam at nunc eu nisl hendrerit tincidunt. Fusce eget augue.
Nullam eros. Nunc viverra tortor at velit ... etc.</p>
</div><!-- content-container -->Anyway …
I think that, where-ever possible, avoid inner vertical scrolling.
Of course there are many solutions to the issue of important content, such as navigational elements, being ‘lost / hidden’ when vertically scrolling a page – fixed positioning would be a solution for example, or perhaps a duplicate navigation on the footer (ala logopond). Hey, there is always the trusty ‘back to top’ anchor – nowt wrong with that!
So what are your thoughts on this issue? I am keen to hear some reactions as I’ve done some searching on the web about it, and I can’t really find anyone discussing it as a real time development consideration. There are plenty of resources explaining how CSS inner scrolling is done, but none asking if / when / where / why the technique is a good method to use.
Am I right to avoid this method where possible? Or am I being blinded by the latest web2.0 methods I see on the gallery sites that don’t seem to feature that many fixed height web solutions? Any examples out there worth a look at? ...
COMMENTS
You know, I’m not the biggest fan of the scrolling div, although it does have it’s uses. However I do have to take issue with your statement that “None of the leading web developers practicing the latest in web2.0 methodologies are using this way of developing sites”. Two sites I regularly visit for Web 2.0 stuff prominently use the technique:
http://www.lounge72.com/root/
http://www.thinkvitamin.com/
@Brian: Thanks for the feedback and links.
Lounge72 does look like a great resource, although the fact that they adopt tables to control the main site layout suggests that they themselves aren’t really embracing the latest in web development practises – although I can’t argue that the design of the site looks pretty good, and it seems to be a good resource of information.
Think Vitamin, on the other hand, does have a real ‘web2.0’ feel about it both in design and content. I’m not overly keen on the design of the site to be honest (I believe a resource such as this, that discusses a varied subject matter, should be a little cleaner – especially colour-wise) but I do admire the liquid layout, the quirky touches and, of course, the quality and value of the information and articles on the site.
What’s interesting is that they both use the scrolling method on ‘News Items’. I guess if you want to add a lot of news content on to a page, but don’t want one column massively long with other columns relatively empty in comparison – causing the site to look un-balanced – then an inner scrolling area would be a very useful feature …
I so agree ... I really hate inner vertical scrolls. Reminds me of the oh so ever dreaded frames. I can also see the use of IFRAMES but that’s something else I hate ... NICE ILLUSTRATIONS !
But more people are asking for CSS height solutions with inner scrolling similar to frames. I know I am! What do you think of this?
@ Jamesy: Excellent link mate. I urge anyone thinking of using a ‘CSS Frames’ style solution to have a look – especially at example 1 and 2.
The beauty of Roger’s proposed solution is that you still only have 1 vertical scrollbar to contend with, so accessibility issues are addressed, but it also means that header, navigation and other such gubbins are kept on screen at all times. I think this method could well show it’s face in a future project or three …
Mr. Hicks uses it, so it can’t be that bad – http://www.hicksdesign.co.uk/extras/ :)
In principle I would always avoid this, for many of the reasons pointed out above. Having said that though, I am actually working on a site right now where having a fixed height was important for the person in question (like from a design point of view, which I guess was also why Jon went for that solution on that page). In 99% of the cases, the content shouldn’t even scroll, but there might be the occassional news article where the height is not enough and in that case the scroll bar makes its entrance.
I think you want to avoid if it’s going to be practice on every single page, but if it’s only going to appear here and there and it still looks good; why not?!