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


Control freaks need not applyIn the world of web design, the end user is in control, not the designer.


Print World Web World


Print World Web WorldDesigner Controlled


Print World Web WorldDesigner Controlled User Determined



Paper stock

Designer Controlled User Determined



Paper stock Monitors, devices




Paper stock Monitors, devicesChoice of 1000s of fonts




Paper stock Monitors, devicesChoice of 1000s of fonts Limited fonts





Pinpoint positioningChoice of 1000s of fonts Limited fonts





Pinpoint positioningChoice of 1000s of fonts

Browser/OS variationsLimited fonts





Color proofingPinpoint positioning

Choice of 1000s of fontsBrowser/OS variationsLimited fonts






Choice of 1000s of fonts

Inconsistent colorBrowser/OS variationsLimited fonts






Choice of 1000s of fonts

Inconsistent colorBrowser/OS variationsLimited fonts


End users can even override the designer’sstylesheet with their own styles.


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




• Monitors may have a 3:2, 4:3 or 16:9 proportion• As a rule, the entire design is not immediately

visible!


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…





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


Color on the Web


Color on the Web

• Backlit display dictates RGB color control instead of CMYK


Color on the Web


• Pixel display requires “dithering”–the smoothing of jagged edges by interpolating colors


Color on the Web


• Pixel display requires “dithering”–the smoothing of jagged edges by interpolating colors

• Inconsistent color reproduction


Images and Graphics on the Web



• Concern regarding download time dictates…



• Concern regarding download time dictates…- …sizing all images to space



• Concern regarding download time dictates…- …sizing all images to space- …compromising quality to reduce file size


Images on the Web


Images on the Web

• Characteristics of images determine file format


Images on the Web

• Characteristics of images determine file format- .GIFs for flat-color graphics


Images on the Web

• Characteristics of images determine file format- .GIFs for flat-color graphics- .JPGs for photos or images with subtle gradients


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


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!


Other differences


Other differences

• Measures (pixels rather than picas & points, e.g.)


Other differences

• Measures (pixels rather than picas & points, e.g.)• Accessibility accommodations


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.


the challenges of web design

Education