1. Web Design and Development Web Pages for the Real World

2. Areas to Consider  Color Scheme Color Scheme  Readability Readability  Navigation Navigation  Content Content  Graphics Graphics  Speed Speed  Universal Access Universal Access  Page Size Page Size  Page Layout Page Layout  Site Structure. Site Structure.

3. Site Structure  Planning is the key  Folder organization  File naming  descriptive and simple  no spaces or symbols  no caps*  Webs with links to and fro  Links to outside sites use target= attribute with value set to “_blank”.

4. Page Size  Minimum 1024 x 768  fit most important information in area  maximum width, browser edges  less scrolling    1 ½ pages max length  less vertical scrolling  better for printing  e.g., 900-1200 pixel length.

5. Page Layout  Loads left to right  Loads top to bottom  Navigation: top & left (prefer text links)  Most important text information at top (above fold)  Body of text: top & left  Logos & other graphics: right or further down page.

6. Navigation  Redundant placement  left menu  top and bottom of page  within written text  linked to images with alternative text, alt=  Clearly visible  Limit choices  Use text labels  No mystery meat!!!.

7. Color Scheme  Evokes emotion  Sets tone  Enhances look  Adequate contrast  Choose a palette  Integrate links, backgrounds, text, borders, graphics and design elements.

8. Content  Relevant and related  Accurate  Original  Depth and breadth  Organized  Links to other resources.

9. Readability  Easy to read fonts  style (normal, bold…)  color (contrast)  size (default 3)  Small blocks of text  Concise sentences  Bulleted/numbered lists  Use  Include some white space.

10. Speed (loading)  10 second limit  More text, fewer graphics at first  Link to multimedia  Consider access  dial up, DSL, cable, wifi  Optimize/compress files.

11. Universal Access  Special software for people with disabilities  More text, fewer pix  Larger fonts  Less content per page  “Alt” text on graphics  Multiple versions of site.

12. Graphics  Limit file size  Limit screen size  link from thumbnails  JPG/PNG for photos  GIF/PNG for cartoons  72-150 dpi resolution  Relevant  Good quality!

13. Web Resources on Design  www.webmonkey.com www.webmonkey.com  www.visibone.com/colorlab www.visibone.com/colorlab  www.webpagesthatsuck.com/ www.webpagesthatsuck.com/  info.med.yale.edu/caim/manual/ info.med.yale.edu/caim/manual/  www.coolhomepages.com/ www.coolhomepages.com/  www.useit.com/alertbox/9605.html www.useit.com/alertbox/9605.html  www.htmlhelp.com/ www.htmlhelp.com/

14. Folder and File Management  In WCWork folder  Add folder called “webdesign”  In “webdesign” folder  Add folder called “firstnamelastname”  Add folder called “donotupload”