The document discusses responsive web design techniques for creating websites that work well across all device screens. It covers fluid layouts using relative units like percentages, media queries to apply styles conditionally based on screen width, and image optimization techniques like srcset and sizes attributes to serve the most appropriately sized image for different screens. The goal is to provide an optimal viewing experience for users on any device without needing separate mobile sites.

1. Using Responsive Web Design To
Make Your Web Work Everywhere
Chris Love
http://Love2Dev.com
@ChrisLove

2. Who Am I
• ASP.NET MVP
• ASP Insider
• Internet Explorer User Agent
• Author
• Speaker
• Tweaker, Lover of Web, JavaScript, CSS & HTML5
• @ChrisLove
• Love2Dev.com

3. High Performance Single Page Web
Applications
• Responsive Design
• Touch
• Mobile First
• SPA
• Extensible, Scalable Architecture
• Web Build and Workflow
• Goes Really Fast!
• ~395 Pages
• 20 Chapters
• $9.99
http://amzn.to/1a55L89

4. Slide Deck & Source Code
• Slide Deck – http://slidesha.re/19NZInK
• Source Code – http://GitHub.com/docluv

5. Compare Responsive vs Non- Responsive
• Atlanta Journal Constitution – http://ajc.com
• Adaptive – http://m.ajc.com
• Boston Globe – http://bostonglobe.com
• Responsive

10. What is Adaptive?
• Uses Server-Side Device Detection
• WURFL
• Separate Site
• Usually m.<domain>.com
• Requires maintaining 2 Code Bases
• In Theory You Can Make a ‘mobile’ optimized version
• In Reality A PITA
• Often 3rd party solution that scraped full site for content

11. Assuming User Needs
• You Can Determine User Expectations Based on Device
• Reality Most Mobile Activity Occurs on a Couch or Lean Back Scenario

12. Assuming User Needs
“I think the key is not to assume anything. We don’t really know what
our users have come to look at. So, we can’t say, “Oh, it’s okay. This
person is on a mobile, so we’re going to cut out a load of the content so
they can’t reach it.”
John Cleveley BBC News
http://responsivewebdesign.com/podcast/bbc.html

13. “this unspoken agreement to pretend that we had a certain size. And
that size changed over the years. For a while, we all sort of tacitly
agreed that 640 by 480 was the right size, and then later than changed
to 800:600, and 1024; we seem to have settled on this 960 pixel as
being this like, default. It’s still unknown. We still don’t know the size of
the browser; it’s just like this consensual hallucination that we’ve all
agreed to participate in: “Let’s assume the browser has a browser
width of at least 960 pixels.”
Jeremy Keith
bit.ly/1bhH6rw

14. “The emergence of ideas like “responsive design” and “future-friendly
thinking” are in part a response to the collective realization that
designing products that solve one problem in one context at a time is
no longer sustainable. By refocusing our process on systems that are
explicitly designed to adapt to a changing environment, we have an
opportunity to develop durable, long-lasting designs that renew their
usefulness and value over time.”
Wilson Miner
bit.ly/1fbq5lB

18. “Any attempt to draw a line around a particular device class has as
much permanence as a literal line in the sand. Pause for a moment and
the line blurs. Look away and it will be gone.
Let’s take the absolute best case scenario. You’re building a web app for
internal users for whom you get to specify what computer is purchased
and used. You can specify the browser, the monitor size, keyboard, etc.”
Jason Grigsby
bit.ly/KzJH9G

19. “How long do you think that hardware will be able to be found? Three years
from now when a computer dies and has to be replaced, what are the
chances that the new monitor will be a touchscreen?
By making a decision to design solely for a “desktop UI”, you are creating
technical debt and limiting the longevity of the app you’re building. You’re
designing to a collective hallucination. You don’t have to have a crystal ball
to see where things are headed.
And once you start accepting the reality that the lines inside form factors are
as blurry as the lines between them, then responsiveness becomes a
necessity.”
Jason Grigsby
bit.ly/KzJH9G

22. Responsive Web Design
• Introduced by Ethan Marcotte 2010 - bit.ly/178an9e
• Web Design Approach To Create An Optimal Viewing Experience
Across All Browser ViewPorts
• Fluid Layouts
• Media Queries
• Minimal if any JavaScript Required

23. Mobile First
• Determine The Most Important Information
• Expand From There
• Start Responsive Design Mobile First
• You will be doing yourself a favor
• Code is much easier to write and maintain

24. Fluid Layout
• Stretch as the Browser ViewPort Changes
• Browser’s Viewable Area Inside the Chrome
• Serve as the Foundation for the Web Application Layout
• Great Way To Create Native Like Experience

26. Media Queries
@media (min-width: 600px) {
/* Selectors & Rules */
}
@media (min-width: 820px) {
/* Selectors & Rules */
}
@media (min-width: 1080px) {
/* Selectors & Rules */
}

27. Responsive Navigation
• Use Media Queries to Optimize Rendering
• Show and Hide Content Based on ViewPort Dimensions
• Create A Mobile Friendly View
• Optimize for Large Screens Without Device Detection

29. Responsible Web Design
• Practice of Providing Appropriate Content by Context
• Primarily to Limit Image and Content Affects over Mobile
• Can Involve JavaScript
• Can Also be Used as a Design Technique

30. matchMedia
• Allows You To Bind JavaScript Callbacks to MediaQuery Breakpoints
• Available in All Modern Browsers (IE 10+)
• Eliminated Need to Bind to Resize Event

31. matchMedia
window.matchMedia("(min-width: 400px)").addListener(function (e) {
if(e.matches)
{
console.info("the view port is at least 400 pixels wide");
}else{
console.info("the view port is not at least 400 pixels wide");
}
});

33. The Image Problem
• Images Account for Majority of Downloaded Content
• That means images cost you and your users money
• http://whatdoesmysitecost.com/
• Screen Diversity Means Variety of Image Sizes & Quality
• Screen Size
• Screen Resolution
• Bandwidth Consideration
• Art Direction

34. The Image Problem – Solutions
• Srcset –
• Allows you to specify image source based on viewport width and screen
resolution
• Sizes
• Allows you to specify how wide an image should render compared to the
available viewport
• Picture Element
• Good for Art Direction
• Browsers are implementing as we speak!

35. The Image Problem – Read More
• http://responsiveimages.org/
• http://www.html5rocks.com/en/tutorials/responsive/picture-
element/
• Jason Grigsby Responsive Images Series
• http://blog.cloudfour.com/responsive-images-101-part-8-css-images/

36. SrcSet
<img class="product-grid-photo" alt="sun"
src=" /display/sun.jpg"
srcset="/thumb/sun.jpg 116w,
/mobile/sun.jpg 300w,
/display/sun.jpg 400w,
/originals/sun.jpg 1000w">

37. Sizes
<img class="product-grid-photo" alt="sun"
src=" /display/sun.jpg"
srcset="/thumb/sun.jpg 116w,
/mobile/sun.jpg 300w,
/display/sun.jpg 400w,
/originals/sun.jpg 1000w"
sizes="(max-width: 480px) 100vw,
(max-width: 900px) 33vw, 254px">

38. vw unit
• Not a Fun German Car
• Refers to Viewport Width
• 1 vw === 1% of the current viewport width

39. PICTURE ELEMENT
<picture>
<source media="(min-width: 650px)" srcset="images/kitten-
large.png">
<source media="(min-width: 465px)" srcset="images/kitten-
medium.png">
<!-- img tag for browsers that do not support picture element -->
<img src="images/kitten-small.png" alt="a cute kitten">
</picture>

40. PICTURE ELEMENT - Type
<picture>
<source type="image/svg+xml" srcset="logo.xml">
<source type="image/webp" srcset="logo.webp">
<img src="logo.png" alt="ACME Corp">
</picture>

42. Thank You!
• Responsive Design
• Touch
• Mobile First
• SPA
• Extensible, Scalable Architecture
• Web Build and Workflow
• Goes Really Fast!
• ~395 Pages
• 20 Chapters
• $9.99
http://amzn.to/1a55L89