Responsive Web Design
Credit to:
http://www.abookapart.com/products/responsive-web-design
http://www.abookapart.com/products/mobile-first
Also, too:
http://www.learningrwd.com
Responsive Web Design
What’s the web? What’s a device?
Responsive Web Design
What’s the web? What’s a device?
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/
Responsive Web Design
The stats (pewinternet.org) !
Responsive Web Design
ALWAYS: Do your research on your population. Different income, regional, age groups have different relationships with technology. !
Responsive Web Design
Go look at a favorite web site. Resize the browser, or look at it on your phone. !
What do you see? !
!
!!
Responsive Web Design
Go look at this page now. Resize the browser. !
!
!!
Responsive Web Design
The problem is easy once you see it
!="Deliver content suitable for the target viewport"
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.)
Responsive Web Design
The implementation can be hard !
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. !
Responsive Web Design
What it is !!
Responsive Web Design
ONE CODEBASE TO RULE THEM ALL
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 !!
!
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
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 */ } !!!!
Responsive Web Design
!
1. Fluid grids/flexible, grid-based layout !— Remember the grids? Those numbers aren’t coincidence. !!
From "Responsive Web Design", p. 50
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. !!
Responsive Web Design
!
2. Media queries !— in CSS: @media !— "like a test for your browser" !!!
http://www.w3.org/TR/css3-mediaqueries/
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%; } }
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)" />
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
Responsive Web Design
!
3. Flexible images and media !!
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%; }
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
Responsive Web Design
Check the HTML and CSS source code on Ethan Marcotte’s http://responsivewebdesign.com/robot/
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/
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 !
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)
Responsive Web Design
Aaaaand sketch! Or code.