I said NO scroll!
I have been doing some research today on how to deal with long scrolling web pages. This was provoked by a new project I am working on and also clients coming back from reviewing mock-ups, saying, “it has a scroll bar”, “we have heard that’s bad”, “please, just get rid of it!”.
This is especially the case on homepages, where clients say they want EVERYTHING above the fold; even footer information!
We all know that sometimes this is just not feasible or good design to squeeze everything above the fold and aim for no scrolling at all. Even when we have explained some scroll is reasonable, sometimes clients won’t budge.
So what solutions do we have? Well, one I have been looking into today is unobtrusive expandable areas. I am delighted to see more and more accessibility friendly solutions cropping up.
Firstly I came across this “Unobtrusive show/hide behaviour reloaded“.
The author, Bobby van der Sluis, builds on some solutions already out there and has nicely documented his work and revisions technique. You can work through this article and evaluate the right solution for you and see why there are a few different options on the page.
The second one I found worth mentioning was “domCollapse“. This is the one I liked the most and choose to play with.
I loved the idea of this, but my concern was that users might not think to click a header or section of text if it did not act like a link. So with some CSS playing I mocked up an example using the :hover to add some underline to the text that does the expanding. Unfortunately, this DOESN’T work in IE6. This is because the :hover only works on the the link elements and not other elements. 
boo hoo. But it works in IE 7, Firefox 1.5+ and Safari.
Thanks to Christian Heilmann over at Onlinetools.org for writing this. I would head on over there and check out the other neat tools he has on offer.
yo,
caught you through: http://www.multipack.co.uk/. thinking of joining up myself, don’t live near b’ham though (leeds). you might wanna take a look at: http://jquery.com/. basically a stripped out js (which i find utterly scary to code).
peace,
lewis
Thanks Lewis
I’ll take a look at Jquery, I reckon I would find it scary to code too! I try and use what’s good and already out there and try to manipulate it the best I can
Don’t reinvent the wheel.
I think you can Join Multipack, it’s not got specific location requirements… well maybe the UK at least…
‘I try and use what’s good and already out there and try to manipulate it the best I can
Don’t reinvent the wheel.’
that’s just what my comp science mates say, although i’ve always had a diy work ethic. i’ve led a sheltered life so far, haha
nice header btw - like the colours.
lewis
Well DIY is great if you need to learn the in’s and out’s. I wish I had the time do try it. I hope to see some of your DIY on your site.
The header is actually a huge spread of flowers with the stain glass filter from Photoshop applied. I should upload it here sometime…
it’s a nice technique…. I used something very similar on http://www.legerbattlefieldtours.co.uk/info/sitemap.aspx
This was adapted from the menu replace experiment by Patrick Lauke on http://www.splintered.co.uk/experiments/16/.
Glad to see that you are fully embracing the joys of Javascript Laura…. but as a wise woman once said to me “Make sure it degrades nicely”….. (that was you).
ps… I really should do something with my site shouldn’t I… dammit if only I had the time
Hey Dru.
I looked at your example and it’s not working for me here… (On my Mac using Firefox 1.5.0.8)… It just clicks through to the page and doesn’t expand. I turned Javascript off and it showed me the full menu expanded.
It does the same thing on Patrick’s example too… Not sure why it does that… I’ll try it on Safari… brb… Nope.. It’s not playing for me on Safari either…
I was reading good lad Jeremy K’s brilliant DOM scripting book today. (A must have) I am getting right into it. I hope I can see it passed chapter 3 and stick with it! I am terrible for flitting from thing to thing. I just want to understand the scripts I am using more, as I don’t think I’ll be writing my own! Or who knows.. maybe I will love it.
If you turn Javascript off on my example it shows all the content. Nice and degradable, the content is all there in the source for screen readers too.
Hi Laura
I found your site some time ago though links to Microlise, and have been lurking for a while - remember me?
I have done something similar with an accordion control from openrico (http://openrico.org/). This works best for pages where each collapsible section is about the same size since the accordion is sized to the largest div.
The problem remains in that it may not be obvious to the visitor that the headings operate the accordion. It degrades nicely though.
Hi there Mark.
Long time to speak. Good to see you around here. There are so many Javascript libraries out there, that’s another one I haven’t heard of.
I’ll take a peek.
So how long have you been dabling in web stuff now?