Skip repeated menu and go directly to page content.

 

Design Considerations

Text Layout and Treatment

Studies show that people do not read word-for-word on the Web—they scan quickly for information. When transferring print publications to the Web, make these modifications so readers can easily scan your text:

• Use plenty of white space.
  
  
• Break information into brief text blocks or (better yet) bulleted lists.
  
  
• Use large, meaningful headers.
  
  
• Text should be a dark color on a light background (preferably black on white).
  
  
• Text should be left justified.
  
  
• Sans-serif fonts (like Arial or Helvetica) are easier to read on-screen than serif fonts (like Times New Roman).
  

Frames

Using HTML frames presents many problems, including virtually eliminating access for disabled users, potential for problems with printing and bookmarking specific pages, difficulties with search engine indexing (the campus search engine can not index your pages if you use frames), and browser interoperability. We recommend not using frames, especially if you are not an advanced HTML coder.

Graphics

Excessive use of graphics can slow download times for modem users. However, when used sparingly and properly compressed, they add visual appeal to your site.

• Keep in mind your audience. For an exclusively on-campus audience, page size is not as important. For modem users, total page size should be 50K or less (which equals a 10 second download time with a 28.8 modem). The total page size includes the HTML page plus graphics, animations and any other element that the user must download to view your page.
  
  
• The number of images you use is as important as the size of the image. It can be a good idea to combine several images into one larger image with an image map to save load time.
  
  
• Using "height" and "width" attributes for images allows the browser to lay out the page before it downloads the graphics. Example: <img src="whatever.gif" width=25 height=25 alt="whatever">
  
  
• Use "alt" tags with descriptive text for all images so that text-only browsers can read the page. Example: <img src="library.gif" width=25 height=25 alt="San Diego State University Library logo" border="0">

Color

It is important to use colors that will render correctly on a variety of computer platforms and monitors. We have an official color palette and corresponding hexidecimal codes that are used on the SDSU site.

Style Sheets

Style sheets can be used to control the style (font face, size and color, background color, link style and color, etc.) as well as placement of elements on a Web page.There are a lot of problems with style sheets that only advanced developers know how to mitigate (and not all of them do). The big problem is that not all browsers treat style sheets the same way—some ignore some elements.