1 / 27

Heuristics of Responsive Web Design

Learn about the heuristics and best practices of responsive web design, including fluid layouts, proportionally scaled images, media queries, and designing for mobile-first and progressive enhancement.

rossdavid
Download Presentation

Heuristics of Responsive Web Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related