Heuristics of Responsive Web Design

1. Heuristics of Responsive Web Design Aronya Waller & Nate Mudd IDIA 612

2. Responsive Web Design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform, and orientation.

3. Source: http://sender11.typepad.com/sender11/2008/04/mobile-screen-s.html/

4. Heuristics of Responsive Web Design Flexible Everything Design for Mobile First Design for Progressive Enhancement &/or Graceful Degradation Optimize Content Rather Than Support

5. Flexible Everything • Fluid or Liquid Layouts • Proportionally Scaled Images • Media Queries

6. Flexible Everything – Flexible Layout • Use percents and ems • Don’t use finite values like pixels • How do you convert? It’s easy: • .figure {width: 20.833%; /* 200px / 960px */ } • .headerText {font-size: 0.75em; /* 12px / 16px */ }

7. Flexible Everything -Proportionally Scaled Images • Hiding and Revealing Portions of Images • Deliver different images depending on device • Foreground Images That Scale With the Layout

8. Flexible Everything -Proportionally Scaled Images Source:http://www.alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html

9. Flexible Everything -Proportionally Scaled Images

10. Flexible Everything –Media Queries • They’ve been around since CSS 2.1 • You’ve already used them • <link rel="stylesheet" type="text/css" href=“screen.css" media="screen" /> • <link rel="stylesheet" type="text/css" href="print.css" media="print" /> • When CSS3 came out the W3C extended media queries

11. Flexible Everything –Media Queries • @media screen and (max-width: 420px) { • .figure{ • margin-right: 3.317535545023696682%; width: 48.341232227488151658%; • }

12. Design for Mobile First • Multiple screen sizes & densities • Performance optimization • Device capabilities

13. Design for Mobile First •Consider Screen Size • Know your users • Focus on core actions • Use scalable design

14. Design for Mobile First Netbooks: 9" diagonal display, screen resolution of 1024 x 600 pixels, pixel density approximately 133 ppi iPhone: 3.6" diagonal display, screen resolution of 320 x 480 pixels, pixel density of 160 ppi Nokia E60: 2.2" diagonal display, screen resolution of 416 x352 pixels, pixel density of over 240 ppi Source: http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes

15. Design for Mobile First • Focus on core actions • Know your users • Use scalable design

16. Design for Mobile First Source: http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes

17. Design for Progressive Enhancement Progressive enhancement is an approach to web development that aims to deliver the best possible experience to the widest possible audience

18. Design for Progressive Enhancement & Graceful Degradation • basic content should be accessible to all browsers • basic functionality should be accessible to all browsers • sparse, semantic markup contains all content • enhanced layout is provided by externally linked CSS • enhanced behavior is provided by unobtrusive, externally linked JavaScript • end user browser preferences are respected

19. Design for Progressive Enhancement & Graceful Degradation Source: http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/

20. Optimize Content Rather Than Support • Structure Content First • Optimize for Context • Responsive Images Test Page http://filamentgroup.com/examples/responsive-images/ • Sencha.io Srchttp://www.sencha.com/products/io/ • Support vs. Optimize

21. Examples of Responsive Designs Good Responsive Experience http://unstoppablerobotninja.com/ Good Responsive Experience http://yiibu.com/ Bad Responsive Experience http://ubalt.edu/

22. Examples of Responsive Designs Good Responsive Experience Source: http://colly.com/

23. Examples of Responsive Designs Good Responsive Experience Source: http://clearairchallenge.com/

24. Examples of Responsive Designs Good Responsive Experience Source: http://calebacuity.us/

25. Exercise • Go to the following websites: • ubalt.edu • medicare.gov • att.com • Determine three core tasks a user would want to achieve when visiting the website from their mobile device • Resize your browser to 320 x 480 (approximate) • How could the layout be optimized for this screen size?

26. Questions?

27. References  BRYANRIEGER. (2009, January). Effective design for multiple screen sizes. [Blog post]. Retrieved from http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes CalebAcuity Americas. (2011). Why us? [Website]. Retrieved from http://calebacuity.us/ Clean Air Works. (n.d.) Clean air commute challenge. [Website]. Retrieved from http://clearairchallenge.com/ Collison, S. (2011). The celebrated miscellany of Mr. Simon Collison. [Website]. Retrieved from http://colly.com/ Frost, B. (2011, June 19). Mobile-first responsive web design. [Blog post]. Retrieved from http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/ Hjerde, M. (2008, April 15). Mobile screen size trends. [Blog post]. Retrieved from http://sender11.typepad.com/sender11/2008/04/mobile-screen-s.html Keith, J. (2011, March 27). Context. [Blog post]. Retrieved from http://adactio.com/journal/4443/ Knight, K. (2011, January 12). Responsive Web Design: What It Is and How To Use It. [Blog post]. Retrieved from http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/ Olsson, T. (2007, February 6). Graceful degradation & progressive enhancement. [Blog post]. Retrieved from http://accessites.org/site/2007/02/graceful-degradation-progressive-enhancement/ Sencha Inc. (2011). Sencha.io. [Computer software]. Retrieved from http://www.sencha.com/products/io/ Wroblewski, L. (2010, November 1). Mobile first. [Blog post]. Retrieved from http://www.lukew.com/presos/preso.asp?26