In this class we discuss how to design web sites for all of the major web accessible devices. This is the precursor for the responsive web design class.
2. Overview
• CSS3 Gallery Walk
Lecture
• Internet Accessible Devices
• Designing for Mobile
• Designing for Laptops
• Big Screens
• Designing Web Sites for Print
Lab
Next week ... Progressive design
04 - Designing Across Devices Advanced Web Design http://dabrook.org/
3. Internet Accessible Devices
• Screen readers
• Old school phones
• Smart phones
• Tablets
• Netbooks
• Laptops
• Desktops
• Gaming devices, tvs, cars
• Others?
04 - Designing Across Devices Advanced Web Design http://dabrook.org/
5. Designing for Mobile
• Context is King
• Speed Matters
• Size Restrictions
• Device abilities
• Examples
04 - Designing Across Devices Advanced Web Design http://dabrook.org/
6. Designing for Laptops
• Netbook v. Laptop • Variety of Browsers
• Varied Screen Size • Wi-Fi
• Varied Window Size • Don’t worry too much
04 - Designing Across Devices Advanced Web Design http://dabrook.org/
7. Designing for Big Screens
• Context Assumptions
• More Real Estate
• Varied Browsers
• Design Trends
04 - Designing Across Devices Advanced Web Design http://dabrook.org/
8. Designing for Print
• Context of Print
• What to (not) Include
• Media Type
• Tips & Tricks
04 - Designing Across Devices Advanced Web Design http://dabrook.org/
9. Homework
Design versions of your personal web site for the following
devices:
• Smart phones
• Laptop
• Big Screen
• Print
04 - Designing Across Devices Advanced Web Design http://dabrook.org/