Designing Web-Appropriate Materials
Related Pages
Developed by the Environmental Education Web Workgroup
Updated July 2007
Table of Contents
Audience | Navigation | Download Speed | Readability | Real Estate | Appearance | Coolness | Resources
Try to get a mental picture of your audience
- You can start thinking about this in terms of demographics. What age are they, where do they live, what are their interests, what language(s) do they speak?
- Refine it further by asking “What will they expect to find at this site?” (If you're the IRS, you'd better have tax forms. If you specialize in chemical testing, will folks really come to your site looking for interactive jigsaw puzzles?) What do they need from you?
- Where do they access the Web: at home, at school, at work, at the library? From a phone or PDA? Will they have a fast or slow connection?
- Is your user already familiar with your topic? (You'll design your site differently if your audience is interested in ensuring data quality in environmental monitoring databases than if they're looking for basic information on wetlands.)
- How comfortable is your user with the Web?
General Guidelines on Navigation
Users should be able to get to your main page from every page on your site (“No page is an island”). Use descriptive page titles to help users tell where they are.
For long documents, provide a table of contents at the beginning with links to paragraphs further down the page, and links back up to the top of the page again. For really long documents, consider a front page with a table of contents that links to content on separate pages.
Download Speed
Even though high-speed internet access has become much more common, there are still plenty of people who access the Web via modem, which is pretty slow by comparison. So it's still important (or at least courteous) to make pages that download quickly.
Text doesn't affect this as much as graphics do. One rule of thumb is that a page should download in no more than 10 seconds. At 56K, the total page “weight” shouldn't exceed 70K. This means keeping a close eye on the size of graphics files.
Readability
FACT: It is not as easy to read text on a computer screen as on the printed page. Large expanses of text are a lot more tiring to read on a computer. Your readers, if they're interested in what you have, will probably print out anything that's more than two screens long.
To make your text more readable:
- Use less text. Choose a font such as Verdana or Georgia, which are very legible onscreen.
- Use white space generously.
- Use larger fonts for things you want to emphasize.
- Use capitals, italics and boldface (with restraint) for emphasis. (Avoid underlining, because it gets confused with linked text on the Web.) Use colored text sparingly; make sure it contrasts well with the background, and don't use blue, because that's the default color for links.
- Constrain columns of text so they don't get too wide; the wider a column is, the harder it is for the eye to follow text as it wraps to the next line.
- Use bulleted lists rather than listing items within a paragraph. The most readable lists have seven items or fewer.
Real Estate
Your front page is your most valuable and important space, so the most important information should appear within the user's first screenful. (This doesn't mean that EVERYTHING needs to appear there, just the best stuff. Or links to the best stuff.) Your user will decide whether to keep on going based on how the front page strikes them. Avoid common turn-offs such as mission statements and photos of the boss.
When people read on the web, they don't read from beginning to end — they scan for anything that looks interesting. Reward them. Help them find the information they want by using boldface (sparingly), bulleted lists, and the most concise language you can muster. Resist the temptation to say everything all at once. Just concentrate on the most important information at the start.
Appearance
Your graphic design should fit the image you want to project; tastes vary, but try to keep your audience in mind. Don't let yourself get too distracted by decisions about your site's look; it's the content that your users are really interested in.
Graphics are generally either decorative or functional (illustrations, graphs, diagrams). To keep file size manageable, give priority to images that convey information.
Graphics need to be designed to look good on the web and be small enough (in file size, not necessarily in dimensions) to load very fast. There is lots of good advice on the Web for optimizing web graphics: choosing the appropriate file format for your graphic, using browser-safe colors, etc.
Background designs should not make the overlying text difficult to read. Go for paler, less busy, less distracting.
Coolness
There's a constant tension between making your site widely accessible and making it cool. If you're not dead set on having all the latest bells and whistles, you can have a very sharp looking site that's still usable by almost everyone. Here are some web sins to avoid:
- Splash pages — introductory screens, often done with Flash
- “Best viewed with (name of browser or plugin)” — It's up to you to make sure your site works with the major browsers.
- “Click Here...” to introduce a link. A shorter description often works just as well (e.g. “water cycle animation” instead of “Click here to see an animated illustration of the water cycle”)
- Animated GIFs (waving flags, etc.) become annoying very quickly. If you can't resist using one, please learn how to specify the number of times the animation repeats before stopping, and choose a small number.
- Frames.
- Background music.
- Those little odometer counters. They're dated, tacky, arbitrary (who cares how many visits you've had since date X?), inaccurate, and may slow down your page.
- “Under Construction” signs (also incomplete sites, promises of content to come someday). If it's not there, they won't miss it. It's a real turn-off to follow a link only to find nothing there yet. They'll probably never come back.
Resources
There are many good resources on the web to help you with web design.
- Jakob Nielsen's Alertbox www.useit.com/alertbox
Web usability and interface design. See these articles: Website Usability for Children and Usability of Websites for Teenagers - Usability.gov www.usability.gov
Guidelines for everything from writing for the Web to page layout - Web Accessibility Initiative www.w3.org/WAI/
Strategies, guidelines, and resources to help make the Web accessible to people with disabilities. - Web Pages That Suck www.webpagesthatsuck.com
Learn good design by looking at bad design
![[logo] US EPA](http://www.epa.gov/epafiles/images/logo_epaseal.gif)