Key Recommendations for Designing Web Pages for Low Bandwidth
- Build A Text Only Version of Your Site: If you need to have a site with components that take up bandwidth, like graphics, consider building a mirror version of your site that is "text only."
- Have Good Site Structure: Provide easy navigation. Don't make users load unnecessary pages which are annoying for all users but really frustrating for users with low bandwidth connections (1).
- Use A 15 Second Rule for Each Page: Users should be able to learn how to navigate and orient themselves within 15 seconds. Identify the primary purpose of each page within the first few inches of screen space. Provide a summary or quick overview of the page before the user clicks on the link, perhaps a quick blurb about the major points contained in a long page (2).
- Put Useful Items First: Put main navigation items at the top of each page so they load and display first. Make your pages useful even before they finish loading (3). Most users will not take the time to read long passages on a computer screen. Experts report: Reading online is slower. People are distracted by links. They would rather follow a link than scroll (4).
- No Page Bigger Than 25 KB: Design your pages to load within 10 seconds over 20kbps connections, which means 25 KB is the maximum page size. If you do one thing, do this (5).
- Reduce Images: Good design is possible without lots of images. Use CSS for layout and rollovers, instead of images. Make sure your site is usable if images are turned off in the browser. Optimizing the images you do have can make them a fraction of the size (6).
- Avoid PDFs: If you use them, optimize them for low bandwidth. PDFs can be optimized by using vector-based graphics and minimizing the number of fonts (7).
- Show Link Sizes: Don't force the user to download large things, always link to them, and if they are over 75 KB say how large they are going to be (8).
- Include Important Dates: Use dates to make it extremely clear and easy to determine how current the information on the site is, and when projects and funding are available and when they close.
- Use Style Sheets: Using style sheets (CSS) is more efficient. Don't use tables for layout. Avoid using JavaScript. Avoid embedding style rules within the page (9).
- Minimize HTTP Requests: Every image, CSS file, JavaScript file and HTML page requires a separate HTTP request. Too many requests will add delays to page loading (10).
- Turn on Compression: Enabling compression on your web server could shrink your pages to half the size (11).
- Be Cache-able – Allow browsers to keep a local copy of, or "cache", your pages (12).
Return to "Web Design by Donor Organizations for Low Bandwidth"