This document discusses responsive web design. It begins by defining the problem of desktop designs being unusable on mobile devices and having separate mobile sites. It then describes the key aspects of responsive web design: 1) fluid grids and flexible layouts based on proportions rather than pixels, 2) media queries to deliver different styles based on screen size, and 3) flexible images that scale to fit their container. It encourages researching users and sketching out the mobile experience before developing with a responsive grid, media queries, and frameworks.

1. Responsive Web
Design

2. Credit to:
http://www.abookapart.com/
products/responsive-web-design
http://www.abookapart.com/
products/mobile-first

3. Also, too:
http://www.learningrwd.com

4. Responsive Web
Design
What’s the web? What’s a device?

5. Responsive Web
Design
What’s the web? What’s a device?

6. Responsive Web
Design
The stats
!
http://www.screenmedia.co.uk/our-practice/behind-the-scenes/2011/10/mobile-
web-browsing-will-soon-surpass-desktop-web-browsing-are-you-ready/

7. Responsive Web
Design
The stats (pewinternet.org)
!

8. Responsive Web
Design
ALWAYS: Do your
research on your
population. Different
income, regional, age
groups have different
relationships with
technology.
!

9. Responsive Web
Design
Go look at a favorite web site. Resize the
browser, or look at it on your phone.
!
What do you see?
!
!
!
!

10. Responsive Web
Design
Go look at this page now. Resize the browser.
!
!
!
!

11. Responsive Web
Design
The problem is easy once you see it
!=
"Deliver content suitable for the target viewport"

12. Responsive Web
Design
"Deliver content suitable for the target"
http://sender11.typepad.com/sender11/2008/04/mobile-screen-s.html
(Easy, right? This is from 2008. It’s gotten worse.)

13. Responsive Web
Design
The implementation can be hard
!

14. Responsive Web
Design
What it is — first, what problem does it solve?
!
— Desktop designs can be unusable or ugly on devices
!
— Mobile users may have different needs/goals
!
— Desktop designs may look terrible on high-resolution
!
— Designing/building/serving/maintaining multiple versions
of site (e.g.,"http://m.talkingpointsmemo.com")? No thanks.
!

15. Responsive Web
Design
What it is
!
!

16. Responsive Web
Design
ONE CODEBASE TO RULE THEM ALL

17. Responsive Web
Design
What it is
!
1. Fluid grids/flexible, grid-based layout
!
2. Media queries (in the CSS3 specifications)
!
3. Flexible images and media
!
!
!

18. Responsive Web
Design
!
1. Fluid grids/flexible, grid-based layout
!
— Instead of a layout based on pixels or percentage values, a
fluid grid is designed in terms of proportions.
!
— No to
#page { width: 960px } or #page { width: 100% }
!
—Yes to calculated percentage page values

19. Responsive Web
Design
!
1. Fluid grids/flexible, grid-based layout
!
!
http://blog.teamtreehouse.com/beginners-guide-
to-responsive-web-design
.column1 {
margin: 0 auto 24px;
width: 31.25% /* 300px/
960px */
}
!
!
!
!

20. Responsive Web
Design
!
1. Fluid grids/flexible, grid-based layout
!
— Remember the grids? Those numbers aren’t coincidence.
!
!
From "Responsive Web Design",p.50

21. Responsive Web
Design
!
1. Fluid grids/flexible, grid-based layout
!
— But note that a complex, three-column layout doesn’t
work well on a small mobile screen.
!
!

22. Responsive Web
Design
!
2. Media queries
!
— in CSS: @media
!
—"like a test for your browser"
!
!
!
http://www.w3.org/TR/css3-mediaqueries/

23. Responsive Web
Design
!
2. Media queries
!
!
!
!
!
— each query begins with a media type (here: screen)
— check the CSS spec for type names and info
— in CSS stylesheet
— can also be a class (".") or ID ("#")
— then the query (here: the name and value of "min-width"
and "1024px")
@media screen and (min-width: 1024px) {
body {
font-size: 100%;
}
}

24. Responsive Web
Design
!
2. Media queries
!
!
!
— could also place the media query in the HTML
!
— either serves a different (and, we hope, appropriate)
stylesheet to the browser, based on the receiving device’s
viewport (a term of art you’ll hear)
<link rel="stylesheet" href="wide.css"
media="screen and (min-width: 1024px)" />

25. Responsive Web
Design
!
2. Media queries
!
— can also deliver different styles of type (size, color, font
family), different margins, different colors, based on the
detected device’s screen
!
— can also show or hide content based on detected device

26. Responsive Web
Design
!
3. Flexible images and media
!
!

27. Responsive Web
Design
!
3. Flexible images and media
!
—The fix, thanks to Richard Rutter:
!
!
— if it happens to be wider than its container, then the max-
width: 100% directive forces the image’s width to match the
width of its container and snap into place
!
— also works for embed, object, video, etc.
img {
max-width: 100%;
}

28. Responsive Web
Design
!
3. Flexible images and media
!
— but:
!
!
(Marcotte’s words, not mine!)
!
— historically, this has not worked well with IE
!
— and still may not, depending on parent or ancestor div

29. Responsive Web
Design
Check the HTML and CSS source code on Ethan Marcotte’s http://
responsivewebdesign.com/robot/

30. Responsive Web
Design
Simplified, non-technical process for today
!
— Know your context and content
— Know your users’ contexts and needs
— Sketch out what steps mobile users would need to take to
get the information/experience they want
—Wireframe for that mobile experience
!
Mobile UI patterns:
— Browse your favorite UI pattern resource, including http://
www.mobile-patterns.com/

31. Responsive Web
Design
A more technical process
!
—Work with a responsive grid (http://responsify.it)
— Set your media queries
—Work with a mobile framework (Twitter Bootstrap, ZURB
Foundation, Skeleton)
— Hand-code your CSS/Javascript
!

32. Responsive Web
Design
Let’s go mobile
!
Keep in mind:
!
— mental models and user
needs/tasks
!
— what information relies on
what (and how to get back)

33. Responsive Web
Design
Aaaaand sketch! Or code.

34. Next up:
Prototypes
ddt@twoangstroms.com
twitter web