Web Development Best Practices

Information Architecture

User Focus vs. Internal Focus

Plan the organization of your website so users can quickly and easily find what they’re looking for. Group broad categories of information according to user's needs, not according to your unit's internal organization or hierarchy. Try to identify what items a user would logically want, even if it means grouping functions from different areas together. A great tool for getting at answers to these questions is the KJ analysis, a method of developing insight into themes and relationships among issues.

EXAMPLE: Previous versions of the University Relations website were organized according to department hierarchy, with section names reflecting the organizational structure (Visual & Broadcast Communications, University Publications, News & Information, etc.). The newest version of the University Relations site is organized with our primary audiences in mind, with sections for university communicators and for the media. Each section includes information about the multi-media services provided by University Relations, eliminating the "silo effect."

Breadth Leads to Depth

Create a site hierarchy that starts with broad categories of information, and then provides increasing levels of detail for those who require more information.

Navigation

Prioritize links according to usage patterns and importance. Do not list links alphabetically, as usability studies show that doing so is essentially the same as random organization.

The recommended locations for primary website navigation are either vertically on the left (preferred), or horizontally below the header (alternate).

Document Structure

Use headers, paragraphs, lists, and tables to reinforce the purpose and organization of content, and to facilitate scanning of the page. Use headers (<h1> ... <h6>) to organize content into logical sections. (Think traditional outline.) Use paragraphs for blocks of text, lists for lists of items, and tables for tabular data.

Make sure that the order of content on each page (including navigation and other standard page elements) makes sense when read from top to bottom. If you are using stylesheets, you can easily check the order by disabling the stylesheet. For visitors using screen readers you may want to provide hidden links to skip over navigation and other often repeated page elements.

Fonts

Sans-serif fonts such as Arial (preferred), Helvetica (alternate), and Verdana (alternate) are recommended for body copy and navigation.

Serif or sans-serif fonts may be used for headers (<h1> ... <h6>), but serif fonts such as Times New Roman (preferred), and Times (alternate) are recommended.

Arial and Times New Roman should be used with the university's website templates.

Font Sizes

Font sizes should be set using relative units such as ems or percentages (%), so that users can resize text. Pixels (px) should be avoided since users will not be able to resize text in Internet Explorer. Points (pt) are intended for print media only, and should not be used.

For maximum compatibility with Internet Explorer, set the font-size of the body element to 80% or 90%, and then adjust the size of other elements using ems or %.

Colors

Choose background colors and images that contrast with page text and don’t interfere with the readability of content. Text color and background combinations should be legible in black and white. Never convey meaning with color alone.

Colors from the university's Web color palette are preferred, and should be used with the university's website templates.

Links

Use descriptive link text so that the destination or function of a link is clear when read out of context. Do not use "Click here".

Make sure that links embedded in body copy stand out so they are not easy to confuse with other kinds of text. Never underline text that is not a link.

Images

Compression

All images for the web should be compressed to a resolution of 72 dots per inch (dpi) to speed download times.

JPEG compression should be used for photographs and continuous tone images. A compression rate of 40% - 60% (or 4 to 6) usually produces the best balance between file size and image quality.

GIF compression should be used for diagrams and line art. Reducing the number of colors may help reduce file size.

Alternative Text

Provide alternate text equivalents for all images using the alt attribute in HTML. Alternate text should convey the purpose or meaning of the image. Including text such as "photo of" or "image of" is not necessary. Alternate text for purely decorative images can be empty or null.

Page Dimensions

Pages can use flexible or fixed widths.

A fixed width of no more than 760 pixels (px) is required to avoid horizontal scrolling with a screen resolution of 800x600. For maximum compatibility with Internet Explorer, create a print stylesheet with a fixed width of no more than 670px so content is not cut off during printing. Images wider than 670px should also be avoided.

Browser Support

We recommended that your website support the following browsers:

Markup and Validation

Marked up Web pages using valid, structural HTML or XHTML to the greatest extent possible. Control presentation with Cascading Style Sheets (CSS) whenever possible. Layout tables should be avoided. Deprecated (outdated) markup, such as the <font> element, and HTML "hacks" such as invisible spacer images, should not be used.

We encourage Web developers to validate their code to ensure compliance with the World Wide Web Consortium's (W3C) recommendations and the university's Web Accessibility policy (PDF). Free validators are available here:

Accessibility

Web pages should be accessible to people with disabilities. From a Web developer's point of view, this means making technology and design choices that are compatible with the way people with disabilities access information on the Web.

The recommendations in this document can help you get started with web accessibility, but for more details, review the university's Web Accessibility policy (PDF) , the Guidelines and Techniques of the Web Accessibility Initiative (WAI), and Section 508 of the Rehabilitation Act of 1973.

Portions reproduced with permission from Northwestern University.