ICT-KM of the CGIAR

Collaborate, Create, Communicate

Web Design Guidelines for Low Bandwith

10 useful tips from www.aptivate.org

1. No Page Bigger than 25kB. Design your pages to load within 10 seconds over 20kbps connections, which means 25kB is the maximum page size. If you do one thing, do this.

2. 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. Optimising the images you do have can make them a fraction of the size.

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

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

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

6. Turn on Compression. Enabling compression on your web server could shrink your pages to half the size.

7. Be Cache-able. Allow browsers to keep a local copy of, or “cache”, your pages.

8. Avoid PDFs. Avoid using 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.

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

10. Show Link Sizes. Don’t force the user to download large things, always link to them, and if they are over 75kB say how large they are going to be.

 

More at: http://www.aptivate.org/webguidelines/Guidelines.html