Module 08: Responsive Web Design

transcript

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

What’s the web? What’s a device?

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/

The stats (pewinternet.org) !

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

Go look at a favorite web site. Resize the browser, or look at it on your phone. !

What do you see? !

Go look at this page now. Resize the browser. !

The problem is easy once you see it

!="Deliver content suitable for the target viewport"

"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.)

The implementation can be hard !

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

What it is !!

ONE CODEBASE TO RULE THEM ALL

What it is !

1. Fluid grids/flexible, grid-based layout !

2. Media queries (in the CSS3 specifications) !

3. Flexible images and media !!

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

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 */ } !!!!

1. Fluid grids/flexible, grid-based layout !— Remember the grids? Those numbers aren’t coincidence. !!

From "Responsive Web Design", p. 50

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

2. Media queries !— in CSS: @media !— "like a test for your browser" !!!

http://www.w3.org/TR/css3-mediaqueries/

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%; } }

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)

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

3. Flexible images and media !!

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%; }

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

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

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/

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 !

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

Aaaaand sketch! Or code.

Next up:

Prototypes

ddt@twoangstroms.com

twitter web