Heuristics of Responsive Web Design Aronya Waller & Nate Mudd IDIA 612.
-
Upload
shanon-lucinda-gibbs -
Category
Documents
-
view
219 -
download
0
Transcript of Heuristics of Responsive Web Design Aronya Waller & Nate Mudd IDIA 612.
![Page 1: Heuristics of Responsive Web Design Aronya Waller & Nate Mudd IDIA 612.](https://reader035.fdocuments.us/reader035/viewer/2022062322/5697c00d1a28abf838cc98dd/html5/thumbnails/1.jpg)
Heuristics of Responsive Web DesignAronya Waller & Nate MuddIDIA 612
![Page 2: Heuristics of Responsive Web Design Aronya Waller & Nate Mudd IDIA 612.](https://reader035.fdocuments.us/reader035/viewer/2022062322/5697c00d1a28abf838cc98dd/html5/thumbnails/2.jpg)
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.
![Page 3: Heuristics of Responsive Web Design Aronya Waller & Nate Mudd IDIA 612.](https://reader035.fdocuments.us/reader035/viewer/2022062322/5697c00d1a28abf838cc98dd/html5/thumbnails/3.jpg)
Source: http://sender11.typepad.com/sender11/2008/04/mobile-screen-s.html/
![Page 4: Heuristics of Responsive Web Design Aronya Waller & Nate Mudd IDIA 612.](https://reader035.fdocuments.us/reader035/viewer/2022062322/5697c00d1a28abf838cc98dd/html5/thumbnails/4.jpg)
1. Flexible Everything
2. Design for Mobile First
3. Design for Progressive Enhancement
&/or Graceful Degradation
4. Optimize Content Rather Than Support
Heuristics of Responsive Web Design
![Page 5: Heuristics of Responsive Web Design Aronya Waller & Nate Mudd IDIA 612.](https://reader035.fdocuments.us/reader035/viewer/2022062322/5697c00d1a28abf838cc98dd/html5/thumbnails/5.jpg)
Flexible Everything
• Fluid or Liquid Layouts
• Proportionally Scaled Images
• Media Queries
![Page 6: Heuristics of Responsive Web Design Aronya Waller & Nate Mudd IDIA 612.](https://reader035.fdocuments.us/reader035/viewer/2022062322/5697c00d1a28abf838cc98dd/html5/thumbnails/6.jpg)
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 */ }
![Page 7: Heuristics of Responsive Web Design Aronya Waller & Nate Mudd IDIA 612.](https://reader035.fdocuments.us/reader035/viewer/2022062322/5697c00d1a28abf838cc98dd/html5/thumbnails/7.jpg)
Flexible Everything -Proportionally Scaled Images
• Hiding and Revealing Portions of Images
• Deliver different images depending on device
• Foreground Images That Scale With the Layout
![Page 8: Heuristics of Responsive Web Design Aronya Waller & Nate Mudd IDIA 612.](https://reader035.fdocuments.us/reader035/viewer/2022062322/5697c00d1a28abf838cc98dd/html5/thumbnails/8.jpg)
Flexible Everything -Proportionally Scaled Images
Source: http://www.alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html
![Page 9: Heuristics of Responsive Web Design Aronya Waller & Nate Mudd IDIA 612.](https://reader035.fdocuments.us/reader035/viewer/2022062322/5697c00d1a28abf838cc98dd/html5/thumbnails/9.jpg)
Flexible Everything -Proportionally Scaled Images
![Page 10: Heuristics of Responsive Web Design Aronya Waller & Nate Mudd IDIA 612.](https://reader035.fdocuments.us/reader035/viewer/2022062322/5697c00d1a28abf838cc98dd/html5/thumbnails/10.jpg)
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
![Page 11: Heuristics of Responsive Web Design Aronya Waller & Nate Mudd IDIA 612.](https://reader035.fdocuments.us/reader035/viewer/2022062322/5697c00d1a28abf838cc98dd/html5/thumbnails/11.jpg)
Flexible Everything –Media Queries
@media screen and (max-width: 420px) {
.figure{margin-right: 3.317535545023696682%;
width: 48.341232227488151658%; }
![Page 12: Heuristics of Responsive Web Design Aronya Waller & Nate Mudd IDIA 612.](https://reader035.fdocuments.us/reader035/viewer/2022062322/5697c00d1a28abf838cc98dd/html5/thumbnails/12.jpg)
Design for Mobile First
• Multiple screen sizes & densities
• Performance optimization
• Device capabilities
![Page 13: Heuristics of Responsive Web Design Aronya Waller & Nate Mudd IDIA 612.](https://reader035.fdocuments.us/reader035/viewer/2022062322/5697c00d1a28abf838cc98dd/html5/thumbnails/13.jpg)
Design for Mobile First
• Consider Screen Size
• Know your users • Focus on core actions • Use scalable design
![Page 14: Heuristics of Responsive Web Design Aronya Waller & Nate Mudd IDIA 612.](https://reader035.fdocuments.us/reader035/viewer/2022062322/5697c00d1a28abf838cc98dd/html5/thumbnails/14.jpg)
Design for Mobile First
Source: http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes
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
![Page 15: Heuristics of Responsive Web Design Aronya Waller & Nate Mudd IDIA 612.](https://reader035.fdocuments.us/reader035/viewer/2022062322/5697c00d1a28abf838cc98dd/html5/thumbnails/15.jpg)
Design for Mobile First
• Focus on core actions
• Know your users
• Use scalable design
![Page 16: Heuristics of Responsive Web Design Aronya Waller & Nate Mudd IDIA 612.](https://reader035.fdocuments.us/reader035/viewer/2022062322/5697c00d1a28abf838cc98dd/html5/thumbnails/16.jpg)
Design for Mobile First
Source: http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes
![Page 17: Heuristics of Responsive Web Design Aronya Waller & Nate Mudd IDIA 612.](https://reader035.fdocuments.us/reader035/viewer/2022062322/5697c00d1a28abf838cc98dd/html5/thumbnails/17.jpg)
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
![Page 18: Heuristics of Responsive Web Design Aronya Waller & Nate Mudd IDIA 612.](https://reader035.fdocuments.us/reader035/viewer/2022062322/5697c00d1a28abf838cc98dd/html5/thumbnails/18.jpg)
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
![Page 19: Heuristics of Responsive Web Design Aronya Waller & Nate Mudd IDIA 612.](https://reader035.fdocuments.us/reader035/viewer/2022062322/5697c00d1a28abf838cc98dd/html5/thumbnails/19.jpg)
Source: http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
Design for Progressive Enhancement & Graceful Degradation
![Page 20: Heuristics of Responsive Web Design Aronya Waller & Nate Mudd IDIA 612.](https://reader035.fdocuments.us/reader035/viewer/2022062322/5697c00d1a28abf838cc98dd/html5/thumbnails/20.jpg)
Optimize Content Rather Than Support
• Structure Content First• Optimize for Context
• Responsive Images Test Page http://filamentgroup.com/examples/responsive-images/• Sencha.io Src http://www.sencha.com/products/io/
• Support vs. Optimize
![Page 21: Heuristics of Responsive Web Design Aronya Waller & Nate Mudd IDIA 612.](https://reader035.fdocuments.us/reader035/viewer/2022062322/5697c00d1a28abf838cc98dd/html5/thumbnails/21.jpg)
Examples of Responsive Designs
Good Responsive Experiencehttp://unstoppablerobotninja.com/
Good Responsive Experiencehttp://yiibu.com/
Bad Responsive Experiencehttp://ubalt.edu/
![Page 22: Heuristics of Responsive Web Design Aronya Waller & Nate Mudd IDIA 612.](https://reader035.fdocuments.us/reader035/viewer/2022062322/5697c00d1a28abf838cc98dd/html5/thumbnails/22.jpg)
Source: http://colly.com/
Examples of Responsive Designs
Good Responsive Experience
![Page 23: Heuristics of Responsive Web Design Aronya Waller & Nate Mudd IDIA 612.](https://reader035.fdocuments.us/reader035/viewer/2022062322/5697c00d1a28abf838cc98dd/html5/thumbnails/23.jpg)
Source: http://clearairchallenge.com/
Examples of Responsive Designs
Good Responsive Experience
![Page 24: Heuristics of Responsive Web Design Aronya Waller & Nate Mudd IDIA 612.](https://reader035.fdocuments.us/reader035/viewer/2022062322/5697c00d1a28abf838cc98dd/html5/thumbnails/24.jpg)
Source: http://calebacuity.us/
Examples of Responsive Designs
Good Responsive Experience
![Page 25: Heuristics of Responsive Web Design Aronya Waller & Nate Mudd IDIA 612.](https://reader035.fdocuments.us/reader035/viewer/2022062322/5697c00d1a28abf838cc98dd/html5/thumbnails/25.jpg)
Exercise
1. Go to the following websites:1. ubalt.edu2. medicare.gov3. att.com
2. Determine three core tasks a user would want to achieve when visiting the website from their mobile device
3. Resize your browser to 320 x 480 (approximate)4. How could the layout be optimized for this screen
size?
![Page 26: Heuristics of Responsive Web Design Aronya Waller & Nate Mudd IDIA 612.](https://reader035.fdocuments.us/reader035/viewer/2022062322/5697c00d1a28abf838cc98dd/html5/thumbnails/26.jpg)
Questions?
![Page 27: Heuristics of Responsive Web Design Aronya Waller & Nate Mudd IDIA 612.](https://reader035.fdocuments.us/reader035/viewer/2022062322/5697c00d1a28abf838cc98dd/html5/thumbnails/27.jpg)
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