1. Technology Training:
Basics of Web Design
Summary
Overview...........................................................................................................................2
Preplan..............................................................................................................................2
Purpose...................................................................................................................2
Audience.................................................................................................................2
Formatting & Hosting..............................................................................................3
Plan & Organize...............................................................................................................3
Content....................................................................................................................3
Pages & Files..........................................................................................................4
Site Map Example...................................................................................................4
Design...............................................................................................................................4
Mockups & Prototypes............................................................................................4
Layout – Principles of Web Design.........................................................................5
Print to Web............................................................................................................5
Accessibility.............................................................................................................6
Revise...............................................................................................................................7
Get a Second Opinion.............................................................................................7
Spring Cleaning.......................................................................................................7
Resources........................................................................................................................8
General...................................................................................................................8
Content....................................................................................................................8
Layout.....................................................................................................................8
Accessibility.............................................................................................................8
Examples of Websites............................................................................................8
© 2009 Santa Clara University 1 of 9 preview-class-handout2832.doc
Technology Training: 554-5430 or 554-5014 www.scu.edu/training

2. Overview
Preplan
Purpose
Websites function to:
− Present information (catalogs, profiles)
− Gather data (forms, surveys)
− Facilitate collaboration and discussion (wikis, forums)
The Web as a format
− The best format to reach your goals?
− What aspects of the web will you utilize?
− The best format to reach your audience?
Audience
Your target audience
− Why would they use your website?
− What kinds of information will they need to access?
− How easily can they find what they need?
− How easily can they get what they need?
Accessibility: how easily can they get what they need?
− Disability
− Usability
− Device independence
© 2009 Santa Clara University 2 of 9 preview-class-handout2832.doc
Technology Training: 554-5430 or 554-5014 www.scu.edu/training

3. Formatting & Hosting
Web Publishing options @ SCU
Hosting Options @ SCU
Plan & Organize
Content
Choose appropriate content
− Text
− Images
− Video and other media
Keep your audience in mind
− Short and simple
− Intro. Body. Conclusion. Repeat.
− Use keywords
− Drive user action (Read More, Contact Us, etc.)
Proofread
− No spelling/grammatical errors
Revise
− Is it clear?
− Is there a simpler way to say this?
− Is there a shorter way to say this?
− Is it necessary?
Get a second opinion
© 2009 Santa Clara University 3 of 9 preview-class-handout2832.doc
Technology Training: 554-5430 or 554-5014 www.scu.edu/training

4. Pages & Files
− Project folder for notes, sketches, content, etc.
− List and group pages into categories
o Primary navigation
o Create effective homepage
o Avoid dead-end pages
o Multiple access points
− Sketch page layout
− Site maps: site architecture
Site Map Example
Design
Mockups & Prototypes
© 2009 Santa Clara University 4 of 9 preview-class-handout2832.doc
Technology Training: 554-5430 or 554-5014 www.scu.edu/training

5. Layout – Principles of Web Design
− Fixed width vs. liquid
o Varying screen resolutions
− Teasers and links vs. scrolling
− Balance graphics and text
− Web-safe colors
Print to Web
− Linear vs. Non‐linear
− Author‐driven vs. Reader‐driven
− Not everything can be converted
− Organize layout to maximize web capabilities
o Keep content from print in the same section
o Use table of contents for navigation
o Break pages into thematic sections
© 2009 Santa Clara University 5 of 9 preview-class-handout2832.doc
Technology Training: 554-5430 or 554-5014 www.scu.edu/training

6. Accessibility
Web Content Accessibility Guidelines
• Text Alternatives for Non-Text
• Alternatives for Time-based Media
• Adaptable
• Distinguishable
• Keyboard Accessible
• Well-timed
• Avoid Seizures
• Navigable
• Readable
• Predictable
• Input Assistance
• Compatible
© 2009 Santa Clara University 6 of 9 preview-class-handout2832.doc
Technology Training: 554-5430 or 554-5014 www.scu.edu/training

7. Dos and Don’ts
Revise
Get a Second Opinion
− Solicit user feedback
o Comment box/form
o E-mail webmaster
o Focus groups
− Office of Communications and Marketing
− Colleagues
Spring Cleaning
− Check monthly or quarterly
− Look for broken links
− Keep content fresh
o Commonspot automated freshnesss
− Replace images frequently
o Update content: update images
© 2009 Santa Clara University 7 of 9 preview-class-handout2832.doc
Technology Training: 554-5430 or 554-5014 www.scu.edu/training

8. Resources
General
− Web Publishing at Santa Clara University
o http://www.scu.edu/webpublishing/
− Commonspot Help
o http://www.scu.edu/webpublishing/cms/
− Before You Start a Website
o http://webdesign.about.com/od/beforeyoustartawebsite/Before_You_Start_a_
Website.htm
− Building a Web Page for the Totally Lost
o http://webdesign.about.com/od/beginningtutorials/a/aa033103a.htm
− Web Design Basics
o http://webdesign.about.com/od/webdesignbasics/u/webdesignbasics.htm
Content
− Writing and Editing for the Web
o http://www.scu.edu/webpublishing/content/writing.cfm
− Writing for the Web
o http://websitetips.com/webcontent/
Layout
− Commonspot Design Resources
o http://www.scu.edu/webpublishing/design/
− Web Layout Basics
o http://webdesign.about.com/od/webdesignbasics/u/webdesignbasics.htm#s5
Accessibility
− What do the Accessibility Guidelines Mean to Me?
o http://webdesign.about.com/od/accessibility/a/accessibility_g.htm
− Usability on the Web
o http://webdesign.about.com/od/usability/Usability_on_the_Web.htm
− Web Accessibility
o http://webdesign.about.com/od/accessibility/Web_Accessibility_Web_Usability.ht
m
− WDG Accessibility Tips
o http://htmlhelp.com/design/accessibility/tips.html
− Web Accessibility Initiative (WAI)
o http://www.w3.org/WAI/
Examples of Websites
− CSS Beauty
o http://cssbeauty.com/
− No Resolution
© 2009 Santa Clara University 8 of 9 preview-class-handout2832.doc
Technology Training: 554-5430 or 554-5014 www.scu.edu/training

9. o http://cssliquid.com/
− Web Design - Design Gallery
o http://webdesign.about.com/od/layout/ig/Web-Design-Design-Gallery/
© 2009 Santa Clara University 9 of 9 preview-class-handout2832.doc
Technology Training: 554-5430 or 554-5014 www.scu.edu/training