Responsive Web Design

extension.org/share/netc/rwd/Demo files:

slideshare.net/chillnc/Presentation at:

@chillncTwitter:

ben.macneill@extension.orgBen MacNeill

Responsive Web Designby Ethan Marcotte

This presentation pulls from this excellent book:

What is Responsive Web Design?

Flexible, Device-Independent Design

Single Source of Content

Why Responsive Design?

• Designing for specific devices — too many

• Siloed pages: /mobile/page.html  — trapped

Three Components

• A flexible grid-based layout

• Flexible images and media

• Media queries (CSS3)

The Grid

http://grids.heroku.com/

960px page, 60px column, 12 wide with 20px gutter

960px page

940px

620px

600px

300px

280px

#page  {   margin:  36px  auto;   width:  960px;}

Traditional Fixed Grid

#page  {   margin:  36px  auto;   width:  90%;}

Flexible Grid

(90% is somewhat arbitrary)

960px page

940px

620px

600px

300px

280px

How does 940px translate to a flexible width?It depends on its container.

target  ÷  context  =  result

Pixels to Percentages

940px 960px#title #page %

940px  ÷  960px  =  0.979166666666667

target  ÷  context  =  result

97.9166666666667%

#title  {   width:  97.9166666666667%;   //  940px  ÷  960px}

#page  {   margin:  36px  auto;   width:  90%;}

960px page

940px

620px

600px

300px

280px

620px  ÷  960px  =  0.645833333333333

300px  ÷  960px  =  0.3125

600px  ÷  620px  =  0.967741935483871

280px  ÷  300px  =  0.933333333333333

End Result: Fluid Grid

Fluid toa Fault

(we'll come back to thisproblem)

We also need Fluid Typographybody  {font-­‐size:  100%}

24px  ÷  16px  =  1.5em

target  ÷  context  =  result

h1  {font-­‐size:  1.5em}

Three Components

• A flexible grid-based layout

• Flexible images and media

• Media queries (CSS3)

Flexible Images

.image  {float:  right;margin-­‐bottom:  0.5em;margin-­‐left:  01.6666666666667%;/*  10px  ÷  600px  */width:  50%;  /*  300px  ÷  600px  */

}

<p  class="image"><img  src="turtle.jpg"  />

</p>

Basic Markup

img  {max-­‐width:  100%;}

Flexible

Caveats

• max-width doesn't work in IE6

• Image scaling hiccups in IE7 & FF2

We don’t careabout IE6.

Is it okay to stop caring about IE7?

• IE7 user base (2.3% - 3.5% May 2012)

• Google stopped supporting in Aug 2011

• Facebook began phasing out support in Dec 2011

• Microsoft is discontinuing support in July 2013

• Flexible images work, just somewhat degraded

Three Components

• A flexible grid-based layout

• Flexible images and media

• Media queries (CSS3)

In the Beginning...Media Types

<link  rel="stylesheet"  href="main.css"  media="screen"  /><link  rel="stylesheet"  href="paper.css"  media="print"  /><link  rel="stylesheet"  href="tiny.css"  media="handheld"/>

• Early phones had poor browsers

• Media Types proved too broad

Media Query

@media  screen  and  (min-­‐width:  1024px)  {body  {font-­‐size:  100%;}

}

• Contains two components: media type and (query)

• The query contains a feature and a value

• Can be placed right in your stylesheet

Short Detour:Reseting the Viewport

• Modern mobile browsers pretend that web pages are desktop-browser size (~900px)

• They render them at that size

• Then shrink the resulting page to fit in the device window

Override the Default  <meta  name="viewport"  

content="initial-­‐scale=1.0,  width=device-­‐width"  />

• Makes width of the browser’s viewport equal to the width of the device’s screen

Default Viewport980px

Reset Viewport320px

Fluid toa Fault(Remember? I said we'd come back

to this problem.)

Answer:Linearize

#main  {float:left;margin:  10px  1.041666666666667%;// 10px ÷ 960px

width:  64.5833333333333%; // 620px ÷ 960px}

#other  {float:right;margin:  10px  1.041666666666667%;// 10px ÷ 960px

width:  29.1666666666667%; // 280px ÷ 960px}

Need to remove Flexible Widths

@media  screen  and  (max-­‐width:  768px)  {//  css  goes  here

}

Target Tablets and Smaller

*The iPad is 768px in portrait orientation

• This rule tells the browser to render the enclosed CSS if the viewport is smaller than 768px

@media  screen  and  (max-­‐width:  768px)  {   #main,  #other  {     margin:  10px;     width:  auto;   }}

#main  {float:left;margin:  10px  1.041666666666667%;width:  64.5833333333333%;  }

#other  {float:right;margin:  10px  1.041666666666667%;width:  29.1666666666667%;  }

769px 768px

Layout Responds to Resizing

@media  screen  and  (max-­‐width:  480px)  {   .image  {     width:  auto;   }}

.image  {width:  50%;

}

More Linearization for Smaller Devices

481px 400px

Going Larger

@media  screen  and  (min-­‐width:  1200px)  {...}

#page  {max-­‐width:1024px}

Design for larger page

Or limit your page size

Media Query Support

3.5+ 3+

9+9.5+

*can fill in some gaps with respond.js

Three Components

• A flexible grid-based layout

• Flexible images and media

• Media queries (CSS3)

/*  desktop  styles  for  flexible  grid  and  media  */#page  {...}

/*  media  queries  targeting  different  breakpoints  */@media  screen  and  (max-­‐width:  768px)  {...}

@media  screen  and  (max-­‐width:  480px)  {...}

The Strategy So Far

Potential Problems

• Some devices will not understand media queries

• Some mobile devices will not have javascript

However, a flexible layout provides a good fallback

Mobile First

• Have your design default to a simple, small-screen layout (very linear)

• Progressively enhance the design using media queries as the viewport resolution increases

• If a browser lacks media query support (and javascript isn't available as a fix), they get the attractive, single-column layout

The Revised Strategy/*  default,  linear  layout  */#page  {width:  auto;max-­‐width:  700px;}

/*  media  queries  build  a  flexible  layout  and  enhance  at  different  breakpoints  */@media  screen  and  (min-­‐width:  600px)  {...}@media  screen  and  (min-­‐width:  860px)  {...}@media  screen  and  (min-­‐width:  1024px)  {...}

Final Result:

Mobile First Responsive Design

example: http://ethanmarcotte.com/

Common Breakpoints

320 pixels For small screen devices, like phones, held in portrait mode.

480 pixels For small screen devices, like phones, held in landscape mode.

600 pixels Smaller tablets, like the Amazon Kindle (600×800) and Barnes & Noble Nook (600×1024), held in portrait mode.

768 pixels Ten-inch tablets like the iPad (768×1024) held in portrait mode.

1024 pixels Tablets like the iPad (1024×768) held in landscape mode, as well as certain laptop, netbook, and desktop displays.

1200 pixels For widescreen displays, primarily laptop and desktop browsers.

More Reading• Responsive Web Design – Ideas, Technology, and Examples

http://www.onextrapixel.com/2012/05/17/responsive-web-design-ideas-technology-and-examples/

• Ethan Marcotte's original articlehttp://www.alistapart.com/articles/responsive-web-design/

• Responsive design – harnessing the power of media querieshttp://googlewebmastercentral.blogspot.co.uk/2012/04/responsive-design-harnessing-power-of.html

• Responsive Web Design (The book)http://www.abookapart.com/products/responsive-web-design

Awesome RWD Examples• http://responsivewebdesign.com/robot/

• http://letsembark.com/

• http://cognition.happycog.com/

Thanks!

extension.org/share/netc/rwd/Demo files:

slideshare.net/chillnc/Presentation at:

@chillncTwitter:

ben.macneill@extension.orgBen MacNeill