Module 08 in the one-week intensive for community college instructors, offered by MPICT.org.

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