Webpage SizePage size is critical to usability in two ways: the speed with which pages can be downloaded and displayed, and the ability of pages to be resized in different ways to fit the display area available. This topic provides general guidelines on page size and flexibility. Additional information will be found under Use of Images
The key to sizing webpages effectively is the length of time it takes to download a page from the server and display it in the browser window. The time from when a user requests a page and when it has displayed completely is referred to as response time, and has been the subject of many user tests over the last few years. In general, response time:
- Must be within 0.1 second to make system "feel interactive" (i.e., sensed as an immediate response)
- Must be less than 1 second in order to fit into the user's chain of thought
- Must be less than 10 seconds to keep user's attention; otherwise, the user moves his/her mind to something else, starts doing something else - or bails out of your website!
The basic guideline is that you should warn users if a webpage or file will take more than 10 seconds to download, so they can choose whether or not it will be worth the wait.
What size page can be downloaded within 10 seconds? We assume that most users will be accessing NEES websites via the network - rather than a modem - but that it will likely be a shared connection with a reasonable level of traffic, since this is the situation typical at universities. The table indicates realistic pages sizes for achieving both 1-second and 10-second response times.
(adapted from Niesen, Designing Web Usability)
|Response Time =||1 sec||10 secs
||56K Modem ||1.5KB ||25KB
||ISDN ||6KB ||110KB
||Shared network ||12KB ||250KB
||Dedicated T1 network ||75KB ||1.5MB
This means that webpages should be less that 150KB in size wherever possible. Further, any file larger than about 250KB should be separated out and identified to the user as a large file, preferably with an indication of approximately how large it is.
Note that total page size includes the size of all embedded graphics, since they will have to be downloaded, too, unless they're being reused (see Use of Images). That doesn't necessarily mean webpages have to be boring (see Helping Users Find Key Content).
Making Pages Resizeable
Users need to have control over the size of their browser windows, and become annoyed when webpages cannot be sized to fit appropriately. While you may be developing your webpages on a desktop system with a large display, your users may be relying on portables or older model desktops with much smaller screens. They may also have reasons for needing to compare the content of multiple browser windows, which will require that each window be significantly smaller than the capacity of the screen. For all these reasons, it is essential that you design your webpages so they can be resized to fit within a wide range of window sizes.
As a minimum, no horizontal scrolling should be necessary if the window is 800 pixels wide. If images are wider, show a "thumbnail version" that links to the larger version, so that the user can choose whether or not to view the image full-scale.
Similarly, all key page elements should be visible without scrolling if the window is 400 pixels high. This accommodates some of today's smaller portable screens; it also makes it easier for users to take snapshots of your webpages to include in their presentations or reports.
Use relative rather than absolute sizes for elements the browser is
capable of resizing, such as tables and colored blocks of text; for
width=50% allows the browser to adjust the size of an
width=85 does not. This practice not only supports
a wider range of display screens, but also allows the browser to adjust what
is displayed when the user changes the window from maximixed (full screen)
to a smaller size.
Consider resizeability when designing headers, footers, and
other elements that are common across your website. This guide, for
example, chose a header image that stretches and shrinks substantially
legibility. The "standard NEES footer" can also be resized, by expanding
the space between the central and side images. Look at
How Includes Work for This Guide to see how
this is done.