MMDT1144 Multimedia and the Web
Week 10

Week 10

W3C (World Wide Web Consortium) Accessibility Guidelines.

Accessibility Guidelines.

Web Content Accessibility Guidelines 1.0

Techniques for Web Content Accessibility Guidelines 1.0

CSS Techniques for Web Content Accessibility Guidelines 1.0

HTML Techniques for Web Content Accessibility Guidelines 1.0

More Accessibility Guidelines.

State of Connecticut Universal Website Accessibility Policy.  This site is quite good because the information is concise and clear.

Accessibility guideline resources.

More Accessibility Guidelines in a short, concise page.

University of Wisconsin - Madison Accessibility 101

Online validation tool and screen reader.

Screen Reader comparisons.

Thunder screen reader.

Homepage Usability 50 Websites Deconstructed.

View Larger Image.
Authors:
Jakob Nielsen
Marie Tahir
ISBN: 073571102X

Drugstore.com sample evaluation (1.2MB PDF).

 

The following table shows the authors' recommendations for the values you should choose for your homepage. The recommendations are based on two considerations:

* What user testing has shown to work best with the way people behave online, and,

* Prevalent design decisions currently in use on the Internet.

 
Homepage Issues Recommended Design
Download Time At most 10 seconds at the prevalent connection speed for your users; for modem users this equates to a file size of 50 KB or less.
Page width Optimized for 770 pixels, but with a liquid layout that works at anything from 620 to 1024 pixels.
Liquid versus frozen layout Liquid.
Page length One or two full screens is best. No more than three full screens (1000 to 1600 pixels).
Frames No.
Logo placement Upper left.
Logo size 80 x 68 pixels.
Search Provide search on homepage. Make it a box.
Search placement Upper part of the page, preferably in right or left corner.
Search box color White.
Search button Call it Search ("Go" also acceptable).
Width of search box At least 25 characters, but 30 characters is better.
Type of search Simple search. (Relegate advanced search to secondary page.)
Navigation One of the four main types: left-hand rail, tabs, links across the top, or categories in the middle of the page.
Footer navigation links At most, 7 links across the bottom of the page. A single line when displayed in the common size of the window.
Sitemap link "Site Map."
Routing page No.
Splash page No.
Sign-in Call it "Sign In."
About the company Always include this feature.
About link Call the link "About <name of company>."
Contact information Provide a link to contact info and call it "Contact Us."
Privacy policy Include one if the site collects data from users and link to it from the homepage.
Name of privacy link Call it "Privacy Policy."
Job openings List jobs under "About Us." Call the link "Jobs."
Help Don't offer it unless unavoidable.
Help placement Upper right.
Auto-playing music No.
Animation No.
Graphics/illustrations Somewhere between 5 to 15% of the space on homepage.
Advertising At most, 3 ads - whether external or internal.
Body text color Black.
Body text size 12 points.
Body text size frozen No. Always use relative sizes that make it possible for users to make the text larger or smaller as desired.
Body text typeface Sans-serif.
Background color White.
Link color, unvisited links Blue.
Link color, visited links Purple.
Link colors, different for visited and unvisited links Yes. Unvisited links should be the most saturated color. Visited links should be a desaturated or less prominent color, but not light gray.
Link underlining Yes, except possibly in lists in navigation bars.

  Web design tips for the beginner. 

 

Lab 10 Planning web project.

The purpose of this lab is for you to start thinking about your final project and to begin collecting written, visual, and other multimedia materials for your final project.

This lab assignment "Planning Web Project" may be hand written and sketched.

With any large project, planning is important.  Therefore, some preliminary planning is necessary before starting your final project.

The subject and content of your web site is of your choosing.  Please use good taste and judgment.  The site must have a "G" rating.  You will be showing your finished web project to the rest of the class.  Suggestions for a subject are a hobbies, sports, activities, businesses (real or made up), clubs, etc.

Based upon the plan that you laid out last week, your site must contain at least 5 pages.

To navigate from one page to another, you will need a menu system. A web site looks professional if the menu is in a vertical or horizontal arrangement.  Most web sites place the menu on the same place of each page so that it is easy for the end user to figure out the navigation structure of your site.

All the pages in the site should have the same basic "look and feel" so that the site looks whole, complete, and professional.  Same "look and feel" means that in general, fonts, colors, layouts, etc, look similar and contiguous between all the pages on the site.

Use the guidelines learned in this past week's lesson material regarding accessibility.  This includes both accessibility guidelines for the physically disabled as well as usability guidelines for the general population.

For each individual page that comprises the web site:

  • Hand sketch the overall layout of the page
  • Describe what the content for each page will be.
  • Sketch where the images, tables, lists, etc. will be on the page.
  • Show the links on the page and where they link to.
  • Describe how you are going to use techniques you learned in class to do your site.

Turning in your assignment:

  • Make a photo copy of your assignment.  You keep the original, your instructor gets the copy.
  • Staple or use a paper clip to keep your assignment together.
  • Write your name on the top page.
  • Turn it in to your Instructor.

 

Grading Criteria Possible
Points
10		 Your
Points
10
At least 5 pages of content described. 5 5
Navigation structure clear and consistent. 2 2
Techniques learned in class are used. 3 3