Webpage Size

Page 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

File Size

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:

In case you are not convinced, usability studies have also proved conclusively that websites that are fast (a) get more traffic, and (b) have lower bailout rates.

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.

Realistic page sizes for achieving key 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 example, width=50% allows the browser to adjust the size of an object, but 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 without impeding 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.