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.

Posted Monday, December 8th, 2008 · Back to Top

SPONSOR

Add Comment

22 Comments 15 Mentions

  1. Paul Walker Author Editor

    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…

    ·

  2. benjamin Author Editor

    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.

    ·

  3. Zach Dunn Author Editor

    @ 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.

    ·

  4. Corey Schario Author Editor

    nice article! I recently had a very similar request from a client. :x Thanks for the 960 grid linkage.

    ·

  5. NetHawk Author Editor

    Excellent point! I wish more people – especially customers – would think outside the box!

    ·

  6. Kimh Author Editor

    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? :P

    ·

  7. lrt Author Editor

    @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!!

    ·

  8. htnmmo Author Editor

    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.

    ·

  9. Anthony Armendariz Author Editor

    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.

    ·

  10. Aaron Griffin Author Editor

    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.

    ·

  11. suraj Author Editor

    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…

    ·

  12. Sam Kidd Author Editor

    I would love to find the marketing and design consultants that were holding courses round town here that made my life hell when we were designing websites.
    Each time you would meet a new client they would want no scrolling, painful!

    Trying to explain to them what about different screen resolutions, and what screen size did they want no scrolling on was just such a waste of my time.

    I hate sites with no scrolling!!!

    Ok rant over, I’m back on the meds :-)

    ·

  13. Clocktower Media Author Editor

    I don’t mind scrolling but I find horizontal scrolling a bit tedious. Interesting article!

    ·

  14. Oswald Author Editor

    Thank you for lhelpping me know why Scrolling Isn’t A Bad Thing.

    ·

  15. Larry Butler Author Editor

    I figure all those clients asking for a no-scroll home page must like them. That’s why they’re asking for them. Maybe they’re on to something.
    I hate scrolling down home pages. I don’t want to scroll down a home page looking for the specific content I’m after (and then scroll back up when I can’t find it).
    I’m starting over on my website. All the pertinent well-marked large buttons will be there on the home page above the “fold” to lead the users to the pages of their interest and there they can scroll to their hearts’ content.
    If pixel count demands a larger page, then everything beneath the fold will be blank.
    No horizontal scrolling anywhere.

    ·

  16. Kumar Author Editor

    Normally, most visitors who are visiting a website, proceed based on the first impression on the website landing page. Then they check out the information, but not more than 2 or 3 scrolls and only some scroll through the complete page. So, bounce rate depends on the website length too, I believe.

    ·

  17. Mike Author Editor

    If you ask me now – I’d say I’m not really fond of scrolling on a home page, it demands energy :P.
    But in reality we are all doing in unconsciously. Facebook.com , youtube.com google sure added or maybe even made scrolling a must.
    And now that we have to adapt sites to let them perfectly viewable on mobile devices I think we can forget the times that clients will demand no-scrolling sites

    ·

  18. Neil Eneix Author Editor

    lol – love the intro. I don’t mind regular scrolling so much. It’s the horizontal scrolling that I don’t care for.

    ·

  19. antonio brandao Author Editor

    Unfortunately scrolling is bad for the eyes/vision, and will end up being replaced by something more natural to the human. The reason is that during the scroll movement the eyes are confused, they make many micromovements trying to stabilize somewhere (like travelling by car looking out the window at very nearby objects), until the image stops, then they can finally rest. Also, a frequent user will one day realize the uncomfortable effect of attempting to scroll when the page is already at the bottom: the eyes are tricked to believe scroll will happen and it doesn’t – therefore the eyes move down and up again real quickly after realizing the page didn’t move. That is really uncomfortable irritating and unhealthy to eyes / vision. Trust that smarter interaction systems will come to replace the currently ubiquitous scroll mechanism.

    ·

  20. Mike Author Editor

    I think scrolling is still a bad thing in the eyes of some people, but I like to scroll.

    I almost always scroll to the bottom of a website I’m reading. Sure enough, more times than not there’s something on it that I want to read.

    I mean, how difficult is scrolling down a website anyway?

    ·

  21. antonio brandao Author Editor

    I believe that with enough scientific analysis one can conclude scrolling is unhealthy for the human vision, as it is not a natural movement/procedure for the eyes.

    If you think this is wrong, because you feel nothing wrong in your eyes when you scroll, just remember, you also don’t feel anything bad also when you are simply using a computer – but that has been scientifically proven to be bad for the human eyes. And so is scrolling.

    Try filming a close-up of the human eyes when the user is scrolling – the rapid eye movements you’ll witness are far from being natural and healthy for the human vision.

    Often, when you attempt to scroll, your eyes move in the direction your brain thinks the page will move, but if for some reason the page doesn’t scroll, (i.e. no more area to scroll / page was not focused / processor is lagging) your eyes still move to anticipate the movement – when it fails, the eyes return quickly to the original place because nothing moved, and this provokes a very uncomfortable feeling and messes with your brain’s vision system. To prevent this situation I try to remember to blink on purpose every time I’m scrolling. This is nothing you notice in a 5 minute iPad usage, but yes when you work 8hrs a day in front of scrolling computer screens.

    Compare the pain of reading the ending credits of a movie with the ease of reading a book, where the page is stopped in front of you. For some reason we STOP a book in front of us to read – we don’t scroll a book in front of our eyes (try that).

    ·

  22. becoming an electrician Author Editor

    I will be trying to find advice on how to raise the quantity of responses alone blog site, precisely how have you succeed in doing this?

    ·

 

Build Internet by One Mighty Roar. Since 2008.