the challenges of web design
DESCRIPTION
TRANSCRIPT
The Challenges ofDesigning for the Web
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Bruce Clary, McPherson College, McPherson, Kansas
Control freaks need not apply
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Control freaks need not applyIn the world of web design, the end user is in control, not the designer.
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Print World Web World
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Print World Web WorldDesigner Controlled
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Print World Web WorldDesigner Controlled User Determined
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Print World Web World
Paper stock
Designer Controlled User Determined
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Print World Web World
Paper stock Monitors, devices
Designer Controlled User Determined
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Print World Web World
Paper stock Monitors, devicesChoice of 1000s of fonts
Designer Controlled User Determined
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Print World Web World
Paper stock Monitors, devicesChoice of 1000s of fonts Limited fonts
Designer Controlled User Determined
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Print World Web World
Paper stock Monitors, devices
Pinpoint positioningChoice of 1000s of fonts Limited fonts
Designer Controlled User Determined
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Print World Web World
Paper stock Monitors, devices
Pinpoint positioningChoice of 1000s of fonts
Browser/OS variationsLimited fonts
Designer Controlled User Determined
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Print World Web World
Paper stock Monitors, devices
Color proofingPinpoint positioning
Choice of 1000s of fontsBrowser/OS variationsLimited fonts
Designer Controlled User Determined
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Print World Web World
Paper stock Monitors, devices
Color proofingPinpoint positioning
Choice of 1000s of fonts
Inconsistent colorBrowser/OS variationsLimited fonts
Designer Controlled User Determined
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Print World Web World
Paper stock Monitors, devices
Color proofingPinpoint positioning
Choice of 1000s of fonts
Inconsistent colorBrowser/OS variationsLimited fonts
Designer Controlled User Determined
End users can even override the designer’sstylesheet with their own styles.
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Scale & Proportion of Display
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Scale & Proportion of Display
• Scale of monitors used to view Web pages ranges from smart phone, iPod & iPad screens to 30-inch HD cinema displays
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Scale & Proportion of Display
• Scale of monitors used to view Web pages ranges from smart phone, iPod & iPad screens to 30-inch HD cinema displays
• Monitors may have a 3:2, 4:3 or 16:9 proportion
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Scale & Proportion of Display
• Scale of monitors used to view Web pages ranges from smart phone, iPod & iPad screens to 30-inch HD cinema displays
• Monitors may have a 3:2, 4:3 or 16:9 proportion• As a rule, the entire design is not immediately
visible!
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Typography on the Web
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Typography on the Web
• Web typography has been revolutionized in the past two years by @font-face…
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Typography on the Web
• Web typography has been revolutionized in the past two years by @font-face…
• … but the selection of typefaces available is still quite limited compared to print.
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Typography on the Web
• Web typography has been revolutionized in the past two years by @font-face…
• … but the selection of typefaces available is still quite limited compared to print.
• Users can adjust size of type as desired, breaking the designer’s intended layout…
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Typography on the Web
• Web typography has been revolutionized in the past two years by @font-face…
• … but the selection of typefaces available is still quite limited compared to print.
• Users can adjust size of type as desired, breaking the designer’s intended layout…
• … but advanced CSS techniques are making it easier and easier to achieve true elastic designs.
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Color on the Web
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Color on the Web
• Backlit display dictates RGB color control instead of CMYK
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Color on the Web
• Backlit display dictates RGB color control instead of CMYK
• Pixel display requires “dithering”–the smoothing of jagged edges by interpolating colors
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Color on the Web
• Backlit display dictates RGB color control instead of CMYK
• Pixel display requires “dithering”–the smoothing of jagged edges by interpolating colors
• Inconsistent color reproduction
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Images and Graphics on the Web
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Images and Graphics on the Web
• Concern regarding download time dictates…
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Images and Graphics on the Web
• Concern regarding download time dictates…- …sizing all images to space
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Images and Graphics on the Web
• Concern regarding download time dictates…- …sizing all images to space- …compromising quality to reduce file size
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Images on the Web
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Images on the Web
• Characteristics of images determine file format
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Images on the Web
• Characteristics of images determine file format- .GIFs for flat-color graphics
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Images on the Web
• Characteristics of images determine file format- .GIFs for flat-color graphics- .JPGs for photos or images with subtle gradients
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Images on the Web
• Characteristics of images determine file format- .GIFs for flat-color graphics- .JPGs for photos or images with subtle gradients- .PNGs for graphics and gradients requiring
transparency
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Images on the Web
• Characteristics of images determine file format- .GIFs for flat-color graphics- .JPGs for photos or images with subtle gradients- .PNGs for graphics and gradients requiring
transparency- But NO .TIFFs or .PSDs or .AIs!
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Other differences
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Other differences
• Measures (pixels rather than picas & points, e.g.)
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Other differences
• Measures (pixels rather than picas & points, e.g.)• Accessibility accommodations
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Other differences
• Measures (pixels rather than picas & points, e.g.)• Accessibility accommodations• File management, e.g., images and graphics do not
become part of a single file (as in Word, InDesign, Photoshop or Illustrator) but reside in their own discrete files and are linked as an HTML element or called as a CSS value.
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION