Web Design and Development

1
Web Design and Development

• Web Pages for the Real World

2
Areas to Consider

• Color Scheme
• Readability
• Navigation
• Content
• Graphics

• Speed
• Universal Access
• Page Size
• Page Layout
• Site Structure .

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 ltblockquotegt
• 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