Module 08: Responsive Web Design
•
0 likes•666 views
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.
Report
Share
Module 08: Responsive Web Design
- 4. Responsive Web Design What’s the web? What’s a device?
- 5. Responsive Web Design What’s the web? What’s a device?
- 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.