Download - The Challenges of Web Design
![Page 1: The Challenges of Web Design](https://reader033.vdocument.in/reader033/viewer/2022051610/5492ebe8ac7959482e8b470e/html5/thumbnails/1.jpg)
The Challenges ofDesigning for the Web
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Bruce Clary, McPherson College, McPherson, Kansas
![Page 2: The Challenges of Web Design](https://reader033.vdocument.in/reader033/viewer/2022051610/5492ebe8ac7959482e8b470e/html5/thumbnails/2.jpg)
Control freaks need not apply
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
![Page 3: The Challenges of Web Design](https://reader033.vdocument.in/reader033/viewer/2022051610/5492ebe8ac7959482e8b470e/html5/thumbnails/3.jpg)
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
![Page 4: The Challenges of Web Design](https://reader033.vdocument.in/reader033/viewer/2022051610/5492ebe8ac7959482e8b470e/html5/thumbnails/4.jpg)
Print World Web World
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
![Page 5: The Challenges of Web Design](https://reader033.vdocument.in/reader033/viewer/2022051610/5492ebe8ac7959482e8b470e/html5/thumbnails/5.jpg)
Print World Web WorldDesigner Controlled
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
![Page 6: The Challenges of Web Design](https://reader033.vdocument.in/reader033/viewer/2022051610/5492ebe8ac7959482e8b470e/html5/thumbnails/6.jpg)
Print World Web WorldDesigner Controlled User Determined
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
![Page 7: The Challenges of Web Design](https://reader033.vdocument.in/reader033/viewer/2022051610/5492ebe8ac7959482e8b470e/html5/thumbnails/7.jpg)
Print World Web World
Paper stock
Designer Controlled User Determined
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
![Page 8: The Challenges of Web Design](https://reader033.vdocument.in/reader033/viewer/2022051610/5492ebe8ac7959482e8b470e/html5/thumbnails/8.jpg)
Print World Web World
Paper stock Monitors, devices
Designer Controlled User Determined
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
![Page 9: The Challenges of Web Design](https://reader033.vdocument.in/reader033/viewer/2022051610/5492ebe8ac7959482e8b470e/html5/thumbnails/9.jpg)
Print World Web World
Paper stock Monitors, devicesChoice of 1000s of fonts
Designer Controlled User Determined
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
![Page 10: The Challenges of Web Design](https://reader033.vdocument.in/reader033/viewer/2022051610/5492ebe8ac7959482e8b470e/html5/thumbnails/10.jpg)
Print World Web World
Paper stock Monitors, devicesChoice of 1000s of fonts Limited fonts
Designer Controlled User Determined
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
![Page 11: The Challenges of Web Design](https://reader033.vdocument.in/reader033/viewer/2022051610/5492ebe8ac7959482e8b470e/html5/thumbnails/11.jpg)
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
![Page 12: The Challenges of Web Design](https://reader033.vdocument.in/reader033/viewer/2022051610/5492ebe8ac7959482e8b470e/html5/thumbnails/12.jpg)
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
![Page 13: The Challenges of Web Design](https://reader033.vdocument.in/reader033/viewer/2022051610/5492ebe8ac7959482e8b470e/html5/thumbnails/13.jpg)
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
![Page 14: The Challenges of Web Design](https://reader033.vdocument.in/reader033/viewer/2022051610/5492ebe8ac7959482e8b470e/html5/thumbnails/14.jpg)
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
![Page 15: The Challenges of Web Design](https://reader033.vdocument.in/reader033/viewer/2022051610/5492ebe8ac7959482e8b470e/html5/thumbnails/15.jpg)
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
![Page 16: The Challenges of Web Design](https://reader033.vdocument.in/reader033/viewer/2022051610/5492ebe8ac7959482e8b470e/html5/thumbnails/16.jpg)
Scale & Proportion of Display
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
![Page 17: The Challenges of Web Design](https://reader033.vdocument.in/reader033/viewer/2022051610/5492ebe8ac7959482e8b470e/html5/thumbnails/17.jpg)
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
![Page 18: The Challenges of Web Design](https://reader033.vdocument.in/reader033/viewer/2022051610/5492ebe8ac7959482e8b470e/html5/thumbnails/18.jpg)
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
![Page 19: The Challenges of Web Design](https://reader033.vdocument.in/reader033/viewer/2022051610/5492ebe8ac7959482e8b470e/html5/thumbnails/19.jpg)
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
![Page 20: The Challenges of Web Design](https://reader033.vdocument.in/reader033/viewer/2022051610/5492ebe8ac7959482e8b470e/html5/thumbnails/20.jpg)
Typography on the Web
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
![Page 21: The Challenges of Web Design](https://reader033.vdocument.in/reader033/viewer/2022051610/5492ebe8ac7959482e8b470e/html5/thumbnails/21.jpg)
Typography on the Web
• Web typography has been revolutionized in the past two years by @font-face…
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
![Page 22: The Challenges of Web Design](https://reader033.vdocument.in/reader033/viewer/2022051610/5492ebe8ac7959482e8b470e/html5/thumbnails/22.jpg)
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
![Page 23: The Challenges of Web Design](https://reader033.vdocument.in/reader033/viewer/2022051610/5492ebe8ac7959482e8b470e/html5/thumbnails/23.jpg)
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
![Page 24: The Challenges of Web Design](https://reader033.vdocument.in/reader033/viewer/2022051610/5492ebe8ac7959482e8b470e/html5/thumbnails/24.jpg)
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
![Page 25: The Challenges of Web Design](https://reader033.vdocument.in/reader033/viewer/2022051610/5492ebe8ac7959482e8b470e/html5/thumbnails/25.jpg)
Color on the Web
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
![Page 26: The Challenges of Web Design](https://reader033.vdocument.in/reader033/viewer/2022051610/5492ebe8ac7959482e8b470e/html5/thumbnails/26.jpg)
Color on the Web
• Backlit display dictates RGB color control instead of CMYK
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
![Page 27: The Challenges of Web Design](https://reader033.vdocument.in/reader033/viewer/2022051610/5492ebe8ac7959482e8b470e/html5/thumbnails/27.jpg)
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
![Page 28: The Challenges of Web Design](https://reader033.vdocument.in/reader033/viewer/2022051610/5492ebe8ac7959482e8b470e/html5/thumbnails/28.jpg)
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
![Page 29: The Challenges of Web Design](https://reader033.vdocument.in/reader033/viewer/2022051610/5492ebe8ac7959482e8b470e/html5/thumbnails/29.jpg)
Images and Graphics on the Web
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
![Page 30: The Challenges of Web Design](https://reader033.vdocument.in/reader033/viewer/2022051610/5492ebe8ac7959482e8b470e/html5/thumbnails/30.jpg)
Images and Graphics on the Web
• Concern regarding download time dictates…
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
![Page 31: The Challenges of Web Design](https://reader033.vdocument.in/reader033/viewer/2022051610/5492ebe8ac7959482e8b470e/html5/thumbnails/31.jpg)
Images and Graphics on the Web
• Concern regarding download time dictates…- …sizing all images to space
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
![Page 32: The Challenges of Web Design](https://reader033.vdocument.in/reader033/viewer/2022051610/5492ebe8ac7959482e8b470e/html5/thumbnails/32.jpg)
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
![Page 33: The Challenges of Web Design](https://reader033.vdocument.in/reader033/viewer/2022051610/5492ebe8ac7959482e8b470e/html5/thumbnails/33.jpg)
Images on the Web
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
![Page 34: The Challenges of Web Design](https://reader033.vdocument.in/reader033/viewer/2022051610/5492ebe8ac7959482e8b470e/html5/thumbnails/34.jpg)
Images on the Web
• Characteristics of images determine file format
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
![Page 35: The Challenges of Web Design](https://reader033.vdocument.in/reader033/viewer/2022051610/5492ebe8ac7959482e8b470e/html5/thumbnails/35.jpg)
Images on the Web
• Characteristics of images determine file format- .GIFs for flat-color graphics
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
![Page 36: The Challenges of Web Design](https://reader033.vdocument.in/reader033/viewer/2022051610/5492ebe8ac7959482e8b470e/html5/thumbnails/36.jpg)
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
![Page 37: The Challenges of Web Design](https://reader033.vdocument.in/reader033/viewer/2022051610/5492ebe8ac7959482e8b470e/html5/thumbnails/37.jpg)
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
![Page 38: The Challenges of Web Design](https://reader033.vdocument.in/reader033/viewer/2022051610/5492ebe8ac7959482e8b470e/html5/thumbnails/38.jpg)
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
![Page 39: The Challenges of Web Design](https://reader033.vdocument.in/reader033/viewer/2022051610/5492ebe8ac7959482e8b470e/html5/thumbnails/39.jpg)
Other differences
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
![Page 40: The Challenges of Web Design](https://reader033.vdocument.in/reader033/viewer/2022051610/5492ebe8ac7959482e8b470e/html5/thumbnails/40.jpg)
Other differences
• Measures (pixels rather than picas & points, e.g.)
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
![Page 41: The Challenges of Web Design](https://reader033.vdocument.in/reader033/viewer/2022051610/5492ebe8ac7959482e8b470e/html5/thumbnails/41.jpg)
Other differences
• Measures (pixels rather than picas & points, e.g.)• Accessibility accommodations
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
![Page 42: The Challenges of Web Design](https://reader033.vdocument.in/reader033/viewer/2022051610/5492ebe8ac7959482e8b470e/html5/thumbnails/42.jpg)
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
![Page 43: The Challenges of Web Design](https://reader033.vdocument.in/reader033/viewer/2022051610/5492ebe8ac7959482e8b470e/html5/thumbnails/43.jpg)