Grow your CSS skills. Land your dream job.

What is maximum page height avoiding vertical scroll?

  • # April 23, 2009 at 6:25 pm

    I’ve been searching around but haven’t found any conclusive numbers to answer this question:
    What is the maximum height (in pixels) a page should be so that the majority of users do not see a vertical scroll bar?
    I realize that there are many different screen sizes and resolutions out there including the many "micro" laptops I’ve been seeing pop up. I’m trying to target the average desktop / normal laptop (sane) screen size user.

    I feel like Chris already covered this in an article but I can’t seem to find it. Cheers! :D

    # April 23, 2009 at 10:32 pm

    I don’t think I’ve ever done any real research on it, but it’s not a very common topic =) Most research shows that people really don’t mind vertical scrolling very much. Most input devices are very capable of it, and people expect it.

    Also, vertical space is impeded upon by browser addons in a lot more agressive ways than horizontal space. I was just looking at my friends dad’s laptop the other day, a very normal non-techy user and I bet over 1/3 of his entire laptop screen was crap jammed on the top of internet explorer. Google toolbar, some flight checking toolbar, big buttons and icons, who knows what all. So let’s say you have 768 to begin with on an average-to-small laptop, you gotta chop off another 250 or so for browser junk add-ons… I’d say maybe as small as 500px if you really want to be "safe".

    # April 23, 2009 at 10:59 pm

    create a black rectangle of a size to fit your screen and see if it fits, that way, it is not hard to find out the number of
    pixels displayed on your width and height of your screen. next screen you use will probbly be different, in my case, the screen may be 1024×768 but a lot of the screen disappears under the scroll bars, browser headings and footers, etc

    # April 24, 2009 at 1:08 am

    Thanks guys,

    I guessed it was around that range. I am working on a client’s site and while my screen shows the entire page with no vertical scroll bar, it shows on my client’s screen. Currently it measures at ~800px.

    The home page is really the only page I need to avoid the vertical scroll bar on so I will probably cut down on some stuff to make it fall within that range.

    # April 24, 2009 at 11:37 am

    This whole ‘not having a vertical scroll’ bar phenomenon really pisses me off. The web is meant to scroll. Clients that think otherwise need to be taken out to the back and…

    Whatever you end up doing, do NOT remove important content from the home page just to keep it under the fold. The web is about usability and accessibility, not what clients perceive to be a ‘good idea’.

    # April 26, 2009 at 3:07 pm

    Hey Doc,

    Yeah I understand the frustration there…however in this case it makes sense since the page isn’t very long. The idea here is mostly just to standardize the height on that single page so that the vertical scroll bar doesn’t come up when the page is just a few pixels over on the smallest standard screen size.

    I definitely wouldn’t be removing any important content, just playing with styling sizes a bit on the page. If it were any longer of a page I would not even consider doing this.

    # April 26, 2009 at 4:13 pm
    "Jaace" wrote:
    Yeah I understand the frustration there…however in this case it makes sense since the page isn’t very long.

    I have done this for a couple clients with simple websites. I do really like the way it looks. for example, http://www.teakwarehouse.com/ has a 670px height, which is good enough for most browser.. and we put SEO content below the fold on some pages. I am just finishing another one for an author this weekend…

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".