the challenges of web design

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