Website Design Tips

The design and construction of a good website entails more than learning how to use software. In fact, the best websites are generally distinguished not by flashy technology, but by proper execution of the basics. These include:

  • Organization: Structure the site around visitor needs.
  • Speed: Ensure the homepage loads quickly or visitors will leave.
  • Compatibility: View the site in different browsers and operating systems.
  • Content: Clearly written and easily-scanned content is crucial.
  • Branding: Apply the organization’s brand consistently.

Organization
One of the most common web-design mistakes is to structure a site as if it were an organizational chart. While it’s fine to provide organizational details, most visitors are not actually interested in this information. Instead, consider who your visitors are and what it is you want them to do or know after visiting your site. What content can you provide that will cause them to act? For example, if you expect potential volunteers as visitors, present information about your volunteer efforts and how to get involved — and say it right away.

Think in terms of tasks. Provide pages about the history and background of your program, specific volunteer opportunities and how to sign up for them, and local affiliates with links to their websites.

Speed
Studies have shown repeatedly that the best way to get someone to leave a website is to have a slow-loading homepage. Showcasing your program with attractive design is a great goal, but recognize that photos, large banners, and flashy effects take time to load. Be sure to have technology in place that supports these elements, or make the necessary modifications.

The competing goals of speed and style can both be accommodated by limiting the total size of the homepage to 60k — that includes HTML, GIFs, JPGs, and any other files that will load there. Ultimately, it’s not the flashy effects that keep site visitors interested; rather, it’s clear, logically presented information that is visually appealing and not overbearing.

Compatibility
Because you want to expose your program to as many people as possible, avoid using exclusionary coding practices. Standards in website design include XHTML-compliant code and cascading style sheets (CSS), and applying these standards consistently will help keep your code clean and speed up your site.
Test your website on both Internet Explorer and Firefox browsers; and don’t forget Safari for Macintosh users. Also keep in mind that most visitors aren't using the latest and greatest browser versions, so it’s a good idea to test on up to two versions back for each browser.
Finally, adhere to accessibility guidelines. Making your site usable by visitors who rely on screen readers and other assistive technologies makes good sense — and it's the law for government-sponsored sites. Learn more about accessibility from the W3C Web Accessibility Initiative.

Content
Cleanly written, relevant content is essential for search engine optimization (SEO). By providing the most important information up front and using H1 (heading) tags for titles to be read first, you help your pages appear in user search results.

When writing for the web, remember that visitors generally are not reading content word-for-word. On the homepage in particular, they scan and search for information. Accommodate them by keeping sentences brief and to the point. Use bullets where possible, and break the information into smaller pieces by using subheads; this allows visitors to quickly spot what they need.

Just as journalists use the "inverted pyramid" to provide the most important information at the beginning of an article, you should provide clear statements on your homepage. Supply appropriate context for links to other pages so visitors can understand where they're going before they click. As visitors get deeper into the site, you can provide more detailed information.

Finally, remember that you can't let the content on your homepage get old. If you post news or other time-sensitive information there, be sure to update it regularly so that visitors know the site is active and that your program is alive and well.

Branding
When designing a website use related branding colors, logos, photos, and styles. Remember that branding is about positive visibility — communicating information, reputation, and association.  A good brand conveys an expectation of excellence and a positive feeling about an organization or individual.