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.
Most of the stuff we will be discussing today is pulled right out of Ethan Marcottes’s book “Responsive Web Design”, he did a blog post on the A List Apart website in 2010 and it go so much traction he decided to expand on the topic and write a book.
Almost every new client these days wants a mobile version of their website.
Or even worse a lot of people want a mobile app.
They recognize the potential of the App stores and want their content there.
On top of this there a new types of devices coming out every month with different resolutions, pixel densities and interfaces
Another thing to mention, Responsive Web Design and thinking about your layouts is relatively new. If you look at our references you’ll notice the oldest one is from 2008.
Finally, what we hope to show you is that with following a few techniques you can build a layout or design that can deliver a quality experice not matter what your viewers display sizes is
As a developer, this is particularly useful – I only have to maintain what set up code, also the content is updated once

3. The largest display size is 23 x larger than the smallest display
This graph outlines the 400 most popular devices between 2005 and This doesn’t even account for Tablets or TV top devices like AppleTV or GoogleTV. Also there are new “infotainment” consoles
The largest display size is 23 x larger than the smallest display
Source:

4. Heuristics of Responsive Web Design
Flexible Everything
Design for Mobile First
Design for Progressive Enhancement &/or Graceful Degradation
Optimize Content Rather Than Support
Because of such a new topic, the heuristics of Responsive Web Design are still being decided. From our research we’ve pulled the following:

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: %; /* 200px / 960px */ }
.headerText {font-size: 0.75em; /* 12px / 16px */ }
Most of us should be familiar with Flexible our Fluid layouts. This is the practice of using percents and “ems” as your unit of measurement rather than using finite values like pixels.
While this does allow the layout to resize based on screen size, it doesn’t necessary optimize the experience.
An em was originally equal to the size of the metal block used to cut a single letter of type for a specific font. It was roughly equivalent to the width of a capital letter “M”.

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
This image shows two of the techniques:
Hiding and Revealing Portions of Images – the image of the men in the chairs is in the background and keeps it size but is being cropped – this is done by making this image a background image in your stylesheet.
The logo on the other hand will scale proportionally to the device size because its max-width is set to 100%
Source:

9. Flexible Everything - Proportionally Scaled Images
Have the server deliver different images depending on device

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
A media query allows us to target not only certain device classes, but to actually inspect the physical characteristics of the device rendering our work.

11. Flexible Everything – Media Queries
@media screen and (max-width: 420px) {
.figure{
margin-right: %; width: %; }
A media query allows us to target not only certain device classes, but to actually inspect the physical characteristics of the device rendering our work.

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:

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

16. Design for Mobile First
Source:

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
The strategy is an attempt to subvert the traditional web design strategy known as "graceful degradation", wherein designers would create Web pages for the latest browsers that would also work well in older versions of browser software.
Great benefits for accessibility and SEO – “Google can’t search content that is brought up by javascript”
Unobtrusive Javascript:
Its ‘sSeparation of functionality (the "behavior layer") from a Web page's structure/content and presentation[1]
Best practices to avoid the problems of traditional JavaScript programming (such as browser inconsistencies and lack of scalability)
Progressive enhancement to support user agents that may not support advanced JavaScript functionality[2]
Example: Separation of functionality (the "behavior layer") from a Web page's structure/content and presentation[1]
Example

19. Design for Progressive Enhancement & Graceful Degradation
Source:

20. Optimize Content Rather Than Support
Structure Content First
Optimize for Context
Responsive Images Test Page
Sencha.io Src
Support vs. Optimize

21. Examples of Responsive Designs
Good Responsive Experience
Good Responsive Experience
Bad Responsive Experience

22. Examples of Responsive Designs
Good Responsive Experience
Source:

23. Examples of Responsive Designs
Good Responsive Experience
Source:

24. Examples of Responsive Designs
Good Responsive Experience
Source:

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
CalebAcuity Americas. (2011). Why us? [Website]. Retrieved from
Clean Air Works. (n.d.) Clean air commute challenge. [Website]. Retrieved from
Collison, S. (2011). The celebrated miscellany of Mr. Simon Collison. [Website]. Retrieved from
Frost, B. (2011, June 19). Mobile-first responsive web design. [Blog post]. Retrieved from
Hjerde, M. (2008, April 15). Mobile screen size trends. [Blog post]. Retrieved from
Keith, J. (2011, March 27). Context. [Blog post]. Retrieved from
Knight, K. (2011, January 12). Responsive Web Design: What It Is and How To Use It. [Blog post]. Retrieved from
Olsson, T. (2007, February 6). Graceful degradation & progressive enhancement. [Blog post]. Retrieved from
Sencha Inc. (2011). Sencha.io. [Computer software]. Retrieved from
Wroblewski, L. (2010, November 1). Mobile first. [Blog post]. Retrieved from