1 / 14

Web Design and Development

Web Design and Development. Web Pages for the Real World. Color Scheme Readability Navigation Content Graphics. Speed Universal Access Page Size Page Layout Site Structure. Areas to Consider. Site Structure. Planning is the key Folder organization File naming 8.3 preferred scheme

shaman
Download Presentation

Web Design and Development

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

  3. Site Structure • Planning is the key • Folder organization • File naming • 8.3 preferred scheme • no spaces or symbols • no caps or punctuation • Webs with links to and fro • Links to outside sites use target= attribute with value set to “_blank” .

  4. Page Size • Minimum 800 x 600 • fit most important information in area • Standard 1024 x 768 • maximum width, browser edges • less scrolling   • 1 ½ pages max length • less vertical scrolling • better for printing • e.g., 900-1100 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 <blockquote> • Include some white space .

  10. Speed (loading) • 10 second limit • More text, fewer graphics at first • Link to multimedia • 50k goal per page • Consider access • dial up, DSL, cable • 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 for photos • GIF for cartoons • 72-96 dpi resolution • Relevant • Good quality!

  13. Web Resources on Design • www.webmonkey.com • www.visibone.com/colorlab • www.webpagesthatsuck.com/ • info.med.yale.edu/caim/manual/ • www.coolhomepages.com/ • www.useit.com/alertbox/9605.html • 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”

More Related