Devices are as unique as their users. Detecting the end user’s platform is a fruitless expenditure that often leads to wrong assumptions. Maintaining multiple web applications for different platforms is not cost effective and stressful. Responsive web design is a way to design your applications for devices of all shapes, sizes and resolutions. This session covers a definition, examples and how to execute a proper mobile first responsive design. We will also cover how to use responsive images to ensure your application performs well.

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

2. My Bio
ASP.NET MVP
ASP Insider
Edge User Agent
Web developer 25 years
Author & Speaker
@ChrisLove
Love2Dev.com

3. Slide Deck & Source Code
Source Code
http://GitHub.com/docluv
Slide Deck
http://slideshare.net/docluv/
presentations

4. Responsive Web Design
Introduced by Ethan Marcotte 2010 - bit.ly/178an9e

5. Design responds
to the
screen size
Responsive web design

6. Optimal
viewing
experience
& easy
navigation
Responsive web design

7. Minimal resizing,
panning, and
scrolling
Responsive web design

8. http://bit.ly/20p5Qc0

9. Why Responsive Web
Design?

10. SEO
Hayley Francis
http://bit.ly/1VcJXNY
“Google not only recommends RWD as the
best way to target mobile users, but also favors
mobile-optimized sites when presenting
results for searches made on a mobile device.”
http://bit.ly/1VcJXNY

11. SEO
“Mobile websites can suffer from a high bounce rate if
the content they offer is too stripped down, or too
dissimilar from the content offered on the desktop site.
Google will interpret this high bounce rate as a sign
that a website isn’t offering relevant content to users,
which is likely to lead to a drop in rankings.”
Hayley Francis
http://bit.ly/1VcJXNY

12. Single Web Site/App
Consistent Content = Happy Users

13. Single Web Site/App
Easier to Maintain Code

14. Single Web Site/App
Reduce number of devices used to
accomplish a goal

15. 60% adults use at least 2 devices every day
40% have changed device through an activity
http://bit.ly/22jCR95

16. Not Mobile Friendly Loses Customers
User Frustration leads
to Lower Engagement
Rates

17. Not Mobile Friendly Loses Customers
Lower Brand Image

18. Responsive Best Practices

19. Design responds to the screen size

20. Viewport as a Whole Scales

21. No matter how
small
No Horizontal Scrollbars

22. Predict Page Flow in each Viewport

23. No Hard Limits on Block Width

24. Don’t Cut Off Text Unpredictably

25. Don’t Wrap Menus

26. Use Shorter Menus

27. Use Hamburger & Standard Icons

28. Make Images Responsive
Scale
or
Crop

29. Watch for Horizontal Scrollbar

30. Key to Intelligent Responsive Design
Content-driven Design

31. Key to Intelligent Responsive Design
What parts of the page
become unimportant
as the viewport gets
smaller?

32. Key to Intelligent Responsive Design
Design Mobile First
and Increase Viewport

33. Responsive Design
Can you spot responsive websites?

40. Don’t Assume User Needs

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

42. 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

43. “[We had] 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 changed to
800:600, and 1024; we seem to have settled on this
960 pixel as being this like, default. It’s still unknown
… 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.”
bit.ly/1bhH6rw
Jeremy Keith
Co-founder - Clearleft
Blog - adactio

44. “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.”
bit.ly/1SMKcwR
Wilson Miner
TheManual.org
“Perennial Design”

52. “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.”
bit.ly/KzJH9G
Jason Grigsby
Co-Founder of
CloudFour.com &
MobilePortland.com
Co-Author of Head First
Mobile Web

53. “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

54. Responsive Web Design
Tactics & Tools

55. Fluid Grid
Flexible
Media
Media
Queries

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

62. Chrome Device Mode
https://developers.google.com/web/tools/chrome-
devtools/iterate/device-mode/

63. Emulate your site across different
screen sizes and resolutions,
including Retina displays.

64. Responsively design by visualizing
and inspecting CSS media queries.

65. Evaluate your site’s performance
using the network emulator,
without affecting traffic to other
tabs.

66. Set the Viewport
Responsive option
Manually size to test and plan for unknown devices
Or Chose A Specific Device
Most popular devices

67. Chrome Device Mode Presets
• Sets the correct "User Agent" (UA) string.
• Sets the device resolution and DPI (device pixel ratio).
• Emulates touch events (if applicable).
• Emulates mobile scrollbar overlays and meta viewport.
• Autosizes (boosts) text for pages without a defined
viewport.

68. Emulation Toggle States & Orientation
Default Browser UI with Chrome navigation bar
with open keyboard

70. Slide Deck & Source Code
Source Code
http://GitHub.com/docluv
Slide Deck
http://slideshare.net/docluv/
presentations