Web Design

Browser Plug-ins | Design Tips | Meta Tags | Web Editors

Designing Web pages is more of an art than a science. Below are a few areas of Web design that pertain to all Web authoring skill levels. Additional information can be found on the Web Resources page.

Note: The university offers a faculty and staff workshop on Web Design.

Visit the Training Resources Web page for a description of this workshop and available dates when it is offered.
Workshop documentation can be found at the Workshop Handouts Web page.

Browser Plug-ins

To view some elements on a Web page — such as audio, video, multimedia and Acrobat PDF files — your Web browser may need additional software installed, called "plug-ins" and "helper applications." Plug-ins open within the browser, while helper applications start automatically by the browser and are opened separately from the browser.

To view a list of common browser plug-ins and download them, if necessary, visit the Browser Plug-ins page.

Design Tips

Writing

Know your audience
Ask: "What information do my users want when they come to my Web site?"
Write clearly and concisely
Readers scan Web pages, so write in "chunks" of information presented in an order that is logical for the content
Place the most important point first in your paragraphs, then follow with supporting information
Use headings, subheadings, and bulleted lists to provide a framework for your text and for ease of users scanning through your text
Edit and spell check; pages lose credibility with errors on them
Use no ALL CAPS, no underlining (except for links), no textured backgrounds, and limit the use of italics.

Design

Your Web site design should be clearly organized and balanced
Keep the look of pages consistent in layout, color, navigation
Use a simple site structure; plan for most of your site information to be available within 2-3 clicks
Use templates designed for accessibility
Navigation should be easy-to-use and consistent
Design page with user’s interests in mind: what are they looking for or what do they need first?
Use descriptive links
Include only links that substantiate content; use in moderation
Use standard font families
Colors – use high contrast colors and use a different color for links
Limit animations to those that are essential; using none is better
Incorporate white space so visual presentation is not overwhelming
If audio and video will be included, provide links to text copies
Provide a link to Sacramento State Home

Considerations

Draw your site out on paper first
Plan for no horizontal scrolling; choose a page width of 100% or a maximum of 600 pixels
Will users need or want to print your page(s)? Print some of your pages to see if your text is cut off on the right edge of the sheet; adjust your page width accordingly
Browser variations – check your Web site in various versions of both Internet Explorer and Netscape Navigator
Test your Web pages for compliance with accessibility guidelines with the free online service, WebXACT
Keep download time small by limiting the size of graphics; some of your users may be accessing your site via modems

Meta Tags

A meta tag contains information about the content of a Web page. Meta tags are used within the <head> section of the HTML source of your Web page and help search engines catalog your site and enable users to find your Web page.

Important <meta> tag elements you may want to investigate include: title, keywords and description. You will need to know HTML or a Web editor in order to properly use these tags in your Web page.
Visit the Meta Tag Generator page to have us create your <meta> tags!
For a more in-depth explanation of <meta> tags and how to use them, visit this SearchEngineWatch.com article.

Note: Additional information can be found at the Resources: Tutorials page.

Web Editors

Macromedia Dreamweaver [Adobe]

Design tips and articles [Adobe]
Dreamweaver Development Center [Adobe]

Microsoft FrontPage

Microsoft Office Developer Center - FrontPage [Microsoft]

last reviewed: January 25, 2008