Advocacy Services
- World Wide Web - Principles of Web Development
Our thoughts on the principles of effective health care reform Web site development fit into three general categories:
In this brief article, we'll cover some of the most important things to keep in mind as your organization begins to develop or seeks to improve its Web site.
The Web is awash in information and advice on developing Web sites. We'll refer to links for more information in the text, and collect them at the end of this document in the "Further Reading" section.
Know your audience
Good Web site design starts long before you put fingers to keyboard. The first thing you need to do is to think very carefully about your audience. The more specifically you can answer the following three questions, the greater your chances of developing content that is targeted, appropriate and effective.
WHO do you want to reach with this site?
�Everybody,� �the public,� or �the media� are not useful or realistic answers�your Web site is going to be one small book in the largest library mankind has ever created. Unless you�re the phone book, there�s no way that EVERYONE will read you
WHAT information are they going to want or need?
A site designed primarily as an information resource for hard-core forest activists will probably look different�in its content, language, structure and design�than a site whose audience is the membership of a large national health care reform group.
HOW do you want people to use the information that you provide?
Everything on our site is designed to provide our community with easy access to information about using online networking tools more effectively. Although plenty of other people look at our site, including media, potential funders, people from other nonprofit sectors, etc., we try hard to remain focused on providing information that is targeted towards our core audience.
Create credible, original content that is regularly updated
No matter what kind of organization you are, your Web site should contain credible, original, fresh content that is appropriate to your audience.
- Provide both �top level� and detailed information.
- Work in sync with other communication channels (email, print etc.) You have room to go in-depth here.
- Document/footnote your facts.
We believe that health care reform groups should focus their initial Web development efforts on creating a Web site that can serve as an online resource library for their members, with the goal of increasing the ability of members to participate in the work of the organization.
Include basic contact info on every page
This is a seemingly minor point, but very few health care reform Web sites have taken it to heart. If you create a Web site with useful, original content, people will print out pages from your site. Therefore, it's essential to make sure the following pieces of contact information appear somewhere on every page in your site:
- Organization
- Contact Person
- Email Address of Contact Person
- Address/phone
- Housekeeping items
- Date of Creation/Update
- Copyright Message
You should also include a page on your site with full contact information for each person in your organization.
*Much of this section is adapted from Jakob Neilsen's article "How People Read on the Web" which can be found at: <http://www.useit.com/alertbox/9710a.html
>
How do people read on the Web? Answer: they don't.
People rarely read Web pages word by word; instead, they scan the page, picking out individual words and sentences. In a recent study by Jakob Neilsen and John Morkes ("usability testers" at Sun), it was found that four out of five test users always scanned any new page they came across, as opposed to reading word-by-word.
As a result, Web pages meant to be read online (as opposed to pages meant to be printed out, like this one) have to be designed so that they can be easily scanned. Do this by using:
- highlighted keywords (hypertext links serve as one form of highlighting; typeface variations and color are others)
- meaningful sub-headings (as opposed to "clever" ones)
- bulleted lists
- one idea per paragraph (users will skip over any additional ideas if they are not caught by the first few words in the paragraph)
- the inverted pyramid style, starting with the conclusion.
- half the word count (or less) compared to conventional writing
Links and Language
New Web designers often have difficulty deciding where to place hyperlinks within sentences. We recommend that you avoid constructing sentences around the phrase "click here," such as "click here for more information." Write the sentence as you normally would, and place the link on the most relevant word in the sentence.
Poor: Click here for more information on placing links within your text.
Better: Web links are powerful, but may also cause problems if they are placed carelessly.
Also keep in mind that links are a distraction. It is pointless to write a paragraph and then fill it full of invitations to your reader to go elsewhere. Put only the most important links within the main body of your text. Group all minor, illustrative, parenthetic, or footnote links at the bottom of the document where they are available but not distracting.
It's much harder to read text on a computer screen than on a piece of paper. Most activist sites are "texty," so we need to take extra care to make sure our pages are easy for visitors to read. We've already presented some ways you can make your writing more Web-friendly; here are some things you can do in your design to maximize the readability of your pages:
- Dark text on light/white background
Color theory geeks tell us that it's easier to read dark text on light backgrounds than light text on dark backgrounds. Plus, it looks good, too.
- Avoid distracting background textures
Same principle at work here. Strong background textures reduce the contrast of your content, and make it hard to read.
- Short lines of text
Newspapers are 11-17 inches wide, yet the text is printed in columns that are only 2-3 inches wide. This is because it's hard for the eye to scan across long lines of text without losing its place. It's even harder on a computer screen, which has far less resolution than a printed page. Make it easy on your readers' eyes by keeping the lines of text on your site short. One way to do this is to use tables to lay our your page to a maximum width of about 600 pixels.
(This page is designed in this fashion!)
- Meaningful headers and sub-headers
Break your text into chunks, and use meaningful headers and sub-headers. This makes it easier for people to glean information from your pages by scanning. People will rarely read long dense chunks of text on a computer screen; it's just too uncomfortable.
- Use vertical whitespace effectively
Don't be afraid to space things out vertically. We have a lot to say, but it's very hard to read when everything is jammed together on the page. Cut your word count as much as possible, and let what's left breathe.
- Break up text with photos/graphics
Again, providing some visual relief from long boring globs of unformatted text is the goal. Since many environmentalists are working to protect places and things of great visual impact, it only makes sense to use the graphical nature of the Web (available at a fraction of the cost of color printing!) to let our images speak.
Site Organization
No matter how nicely designed your Web site is, if people can't find the information they need, your site will not be effective. Many health care reform Web sites grow "organically," making it hard for them to remain well-organized as they grow. Some tips for making your site a focused, easy-to-use information resource:
- Create 5-7 main sections for your site
More than 5-7 sections is overwhelming; fewer will probably cause you to "bury" information too deeply in your site.
- Create a clear initial message
Your home page should make it absolutely clear what your group does.
- Don�t overwhelm visitors with choices on the first page
There's a lot to say online, but sometimes it's better to hold back a little. Throwing up twenty links on your site's home page makes it very hard for a visitor to get oriented, find what he/she needs, or figure out what you think is most important.
- Don�t bury content too deep; no more than two or three clicks to real information. When you create a structure for your site, be careful not to let the structure overwhelm the content. Don't bury substantive information in a structure so deep and complex that no-one will have the patience to click all the way to it. A good rule of thumb is to make sure that it doesn't take more than two or three clicks to get to the "meat" of your site.
Navigation Cues
Having simple and consistent navigation devices throughout your site is vital to keeping visitors oriented and engaged. Your site should have:
- Consistent icons and/or graphic design
Use colors, fonts and icons consistently in your site to keep visitors oriented.
- Overview or summary screen
If your site is particularly large, consider including a "site map" or detailed "table of contents" for your page. Don't make this your home page, or you'll risk overwhelming your visitors (see above).
- No dead-end pages!
Every page on your site should link to another page on your site, and to the home page. There's nothing worse than when a page dead-ends without a way back to the beginning.
- Text-based navigation elements; Graphic elements are optional
If your site is completely dependent on graphical elements such as buttons or image maps for navigation, visitors with slow modems or with their Web browsers set to skip loading images will find it impossible to get around your site. Always include a text-based alternative for each graphical navigation device.
Consistent Visual Style
A consistent visual style is easier to recognize than describe. Being consistent in your use of fonts, colors, graphics, and other design elements creates an overall "look and feel" that helps your site maintain narrative cohesion, defines the mood of your site, makes it look professional (and thus credible), and greatly enhances the usability of your site.
Efficient use of graphics
Most people are still surfing the Web on a 33.6 or slower modem, and that beautiful 75k animated spinning globe takes quite a while to load. A well-designed page uses graphics that add meaning and function without clogging up the phone line. A good rule of thumb is to keep the total size of any page on your site to under 100k, including ALL graphics and text. (A good Web editing program or HTML validation utility such as Dr. HTML will tell you the total "weight" of a given page.)
The First Commandment of Web Graphics is: Keep your file sizes small. How can you do this?
- Minimize image size
The simplest way to keep the file size of your graphics small is to keep the graphics themselves small. Use a photo-editing program such as Photoshop to crop and shrink your photos to the smallest reasonable size. Use small graphic elements rather than large buttons. And keep background images small and simple.
- Know when to use GIF and when to use JPEG
GIF compresses large blocks of color well, and is best for graphic elements. JPEG sacrifices some color information and sharpness but creates very small files. JPEG is best for photographs.
- Avoid animated GIF images
Animated GIFs can be massive bandwidth-wasters, and they generally add little or nothing to the usability or appeal of your site.
- Reduce the number of colors in GIF graphics
GIF compression works best on graphics with only a few different colors. If you're creating GIF images for your site, be sure to use Photoshop to reduce the number of colors in the GIF before saving it.
� U. S. Health Care Reform. All
Rights Reserved.
|