Below the Fold: Why Scrolling Isn’t A Bad Thing
“I want a website. It will be cutting edge visually impressive. It will have a wealth of information available. All of our brochures, a full directory of employees, and a shopping cart. I don’t want it the user to have to scroll all over the place though!”
Ever hear this from a client describing their vision? Somewhere along the line having to scroll for information started to bother people. Scrolling isn’t the make or break of a page. Use it to your advantage, and you’ll have a site that seems almost intuitive.
Photo by everdred
Frames Brought a Bad Rep
Back in the days of single page sites with frames and IFrames, scrolling was heavily integrated to the layout. Most of the time it was far from necessary, but then again web design was only a hobbyist activity back then. Chances are you’ve seen an IFrame embedded into a page with miles of text acting as a news feed.
Then something happened. Screens started to get bigger, resolutions increased, and frames started to be banished from websites by CSS. But still some people did not like to scroll. Technology may have improved, but some sites continue to arrange content poorly and scrolling still feels like a chore. We can do better.
Pick A Resolution. Design to it.
In my experience when a client says “I don’t want it to scroll”, they don’t often realize how such a “simple” request is almost impossible to execute. A resolution of 800×600 will almost guarantee scrolling on most modern websites. This isn’t a product of bad design, it’s simply the limitation of a lower resolution.
You’re going to have to be decisive. Who is your audience for the project? What is their likely minimum resolution? If you’re dealing with cutting edge technology chances are it will be higher than average. Certain other sites may attract users who are still living in an 800 x 600 window. W3Schools has a great resource for browsing statistics to help you decide (numbers on your side!). Currently 1024 x 768 is the most common baseline (The 960 grid system works very well with this). Bookmark these pages for the next time a client requests the complete removable of scroll bars from a page, you’ll have numbers on your side.
Love the Fold
Think of a newspaper’s front page above the fold. What is the dominant content? On many newspapers it is simply an exciting image or headline to lure readers in. All of the substantial content is embedded within the rest of the paper, but if a reader is compelled by the headline they will gladly search it out.
Use this to your advantage. Attract your visitors above the fold, but don’t hesitate to put the good stuff below. It simply has to be something compelling; something that will make a winning case for the rest of the site. Flickr has vibrant community images, MTV has slide shows, Google has a search bar (Do you even realize how many other pages there are?!).
Sure, a casual visitor might give it a quick flick of the scroll wheel before moving on, but you have to hold bait in their face. Like the newspaper, an interested visitor will gladly continue.
People Expect to Scroll
Ever see what a website looks like with CSS removed? With the formatting gone the content becomes a long list of unorganized data, and a scrolling nightmare. It makes you miss columns, and text alignments. People don’t get frustrated when they have to scroll. People get frustrated when they know it can be avoided or done better.
The internet is not a new development any longer. Scrolling is not an unreasonable demand on a visitor especially if you continue to provide valuable content. Usability is about making it accessible, but not at the cost of intuitive information design.
Scroll Away
The scroll bar has been through its growing pains, and now the stigma needs to be re-evaluated. Rethink your scroll bar. Look at your site. Do you motivate people to scroll? Or do they have to scroll before finding anything valuable? Are you making a case for the scroll bar? Or against it? Let us know in the comments.
18 Responses to “Below the Fold: Why Scrolling Isn’t A Bad Thing”
December 9th, 2008 at 4:19 AM
My approach is to avoid horizontal scrolling whenever possible; and to ignore vertical scrolling. I’ve never quite understood how “above the fold” area would be utilised differently if you think about it as a specific thing, rather than just designing the webpage in terms of the inverted pyramid of “most important, basic information first.”. And where the “fold” lies is so variable anyway…
December 9th, 2008 at 12:09 PM
I love to hear this from my clients! I know that it is a stupid request, and I tell them that having a website without scrolling is like having a book without pages. It’s the nature of the beast. I do believe that there is a point at which scrolling gets ridiculous. But this isn’t my problem. This is the copy editors problem. The client needs to learn how to be efficient with their copy. If all that’s important fits withour scrolling that’s ok. But it is poor form to squeeze a ton of content in to a the window just to prevent scrolling. Content needs to breathe!
And I remember the frame days, but I also think that the popularity of Flash created this false belief that everything had to fit into a 800×600 window. And a client’s pasison for Powerpoint design leads to this too.
I’m rambling! Great post.
December 9th, 2008 at 12:27 PM
@ Paul Walker – You’re exactly right about the fold being a variable! Designing to the average is the most consistent way to ensure that your content gets noticed exactly as you want it. Basecamp’s site is an example of designing great above the fold content.
@benjamin – Now that I’m thinking about it, PowerPoint does exemplify the no-scroll mentality. Content needs to breathe – I like that slogan.
December 10th, 2008 at 11:17 AM
nice article! I recently had a very similar request from a client.
Thanks for the 960 grid linkage.
December 11th, 2008 at 12:47 PM
Excellent point! I wish more people – especially customers – would think outside the box!
December 11th, 2008 at 8:16 PM
960.gs is absolutely fantastic and I love it! I’ve been creating prototypes with it for a very long time now, and am looking forward to converting my own site to using it.
Scrolls are good, too, provided they are used properly. iFrames != proper use of scrolls; long blog pages, however, are. It annoys me when people assign heights to pages, so that there is one block of scrolling text. The only scrolling I try to avoid is horizontal scrolling; I feel that vertical scrolling is fine, but horizontal… Not so much.
It’s always scrolling or width. What is it with people?
December 15th, 2008 at 8:56 AM
@benjamin – “having a website without scrolling is like having a book without pages” — i like that. i’ll be sure to tell that to my next client who has this request!!
January 15th, 2009 at 12:55 PM
If you look at the stats of most sites, the bounce rate is usually over 50% and 60% is not uncommon. If you look at how much time they spent on the site, most of the visitors, or at least a large portion stay less than 30 seconds.
You have to draw people’s attention like you described newspapers do. But too many sites only have ads above the fold. Which I just find horrible.
I guess they’re trying to get as many clicks for the little traffic they have, not realizing that what they’re doing is going to keep them from getting a lot of good traffic.
January 19th, 2009 at 3:21 PM
Having worked on a lot of editorial, media, and other heavy content sites with an advertising component, this is a topic that comes up almost all the time. In the old school first generation web sites screen size was limited and with most sites, designed at for 800 or 640 screen resolutions there were many constraints. The strategy was to get all of the most important and actionable content above the readable area, The term “Fold” was adopted to represent this premium visible area.
As designers and companies learned more about SEO, they realized that they would have to add more relevant content and ad opportunities into the mix to meet business objectives. What came out of this era was a sever bad habit assuming people didn’t want to scroll, and placing placing good content up top and throwaway content below. Users adopted.
The fact is that scrolling is something everyone does, willingly, curiously, or even sub-consciously. In today’s modern web design practices, it is essential that we accept this and push our clients to understand that good content should be the only kind of content, and that it should be spread out horizontally and vertically down the page so that when our users scroll we can give them a satisfactory surprise, and capitalize on creating better user experience for long page designs, scrolling behavior, and overall great user experiences.
January 19th, 2009 at 3:53 PM
Next to the ‘back’ button, the scroll bar is the most commonly used browser element. Users understand how it works and are not afraid of it. It is a futile effort to cram all relevant content above the mythical and arbitrary fold. It is detrimental to both user comprehension and also to SEO efforts. A much better practice is to provide consistent, obvious scent markers, which allow the user to intuitively navigate to the content they find valuable.
January 26th, 2009 at 9:02 AM
with the web world with full of blogs & comments..it’s not necessary to think of “Above the fold”, you aught to get verticle scroll…if you dont want it basn user from commening…
Join the Conversation!