Skip to Content

WEB DESIGN

About

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.

  • Visit the Training 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 Adobe 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.

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.
  • For a more in-depth explanation of <meta> tags and how to use them, visit this SearchEngineWatch.com article.

Web Editors

Adobe Dreamweaver

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, Firefox, and Safari.
  • Test your Web pages for compliance with accessibility guidelines — see the Web Page Accessibility site.
  • Keep download time small by limiting the size of graphics; some of your users may be accessing your site via modems.

Last updated: October 28, 2013