This presentation introduces responsive web design which allows websites to automatically adapt their layout to different screen sizes. It discusses using a flexible grid system, flexible images and media, and media queries to create a single adaptive design. The strategy is to use a linear mobile-first approach and progressively enhance the design for larger screens using media queries. This allows the site to work on any device while providing the best experience for each form factor.

1. Responsive Web Design
Ben MacNeill
ben.macneill@extension.org
Twitter:
@chillnc
Presentation at:
slideshare.net/chillnc/
Demo files:
extension.org/share/netc/rwd/

2. This presentation pulls from this excellent book:
Responsive Web Design
by Ethan Marcotte

3. What is Responsive
Web Design?

4. Flexible, Device-
Independent Design

5. Single Source
of Content

6. Why Responsive Design?
• Designing for specific devices — too many
• Siloed pages: /mobile/page.html
— trapped

7. Three Components
• A flexible grid-based layout
• Flexible images and media
• Media queries (CSS3)

8. The Grid
http://grids.heroku.com/

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

11. 960px page
940px
620px 300px
600px 280px

12. Traditional Fixed Grid
#page
{
margin:
36px
auto;
width:
960px;
}

13. Flexible Grid
#page
{
margin:
36px
auto;
width:
90%;
}
(90% is somewhat arbitrary)

14. 960px page
940px
620px 300px
600px 280px
How does 940px
translate to a flexible width?
It depends on its container.

15. Pixels to Percentages
target
÷
context
=
result
#title #page
940px 960px %

16. 940px
÷
960px
=
0.979166666666667
97.9166666666667%
target
÷
context
=
result

17. #page
{
margin:
36px
auto;
width:
90%;
}
#title
{
width:
97.9166666666667%;
//
940px
÷
960px
}

18. 960px page
940px
620px 300px
600px 280px
620px
÷
960px
=
0.645833333333333
300px
÷
960px
=
0.3125
600px
÷
620px
=
0.967741935483871
280px
÷
300px
=
0.933333333333333

19. End Result: Fluid Grid

20. Fluid to
a Fault
(we'll come
back to this
problem)

21. We also need
Fluid Typography
body
{font-­‐size:
100%}
24px
÷
16px
=
1.5em
h1
{font-­‐size:
1.5em}
target
÷
context
=
result

22. Three Components
• A flexible grid-based layout
• Flexible images and media
• Media queries (CSS3)

23. Flexible Images

24. Basic Markup
.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>

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

29. Flexible

30. Caveats
• max-width doesn't work in IE6
• Image scaling hiccups in IE7 & FF2

31. We don’t care
about IE6.

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

33. Three Components
• A flexible grid-based layout
• Flexible images and media
• Media queries (CSS3)

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

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

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

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

39. Default Viewport Reset Viewport
980px 320px

40. Fluid to
a Fault
(Remember?
I said we'd
come back
to this
problem.)
Answer:
Linearize

41. Need to remove Flexible Widths
#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
}

42. Target Tablets and Smaller
@media
screen
and
(max-­‐width:
768px)
{
//
css
goes
here
}
• This rule tells the browser to render the
enclosed CSS if the viewport is smaller
than 768px
*The iPad is 768px in portrait orientation

43. #main
{
float:left;
margin:
10px
1.041666666666667%;
width:
64.5833333333333%;
}
#other
{
float:right;
margin:
10px
1.041666666666667%;
width:
29.1666666666667%;
}
@media
screen
and
(max-­‐width:
768px)
{
#main,
#other
{
margin:
10px;
width:
auto;
}
}

44. Layout Responds to Resizing
769px 768px

45. More Linearization
for Smaller Devices
.image
{
width:
50%;
}
@media
screen
and
(max-­‐width:
480px)
{
.image
{
width:
auto;
}
}

46. 481px 400px

47. Going Larger
Design for larger page
@media
screen
and
(min-­‐width:
1200px)
{...}
Or limit your page size
#page
{max-­‐width:1024px}

48. Media Query Support
3.5+ 3+
9.5+ 9+
*can fill in some gaps with respond.js

49. Three Components
• A flexible grid-based layout
• Flexible images and media
• Media queries (CSS3)

50. The Strategy So Far
/*
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)
{...}

51. Potential Problems
• Some devices will not understand
media queries
• Some mobile devices will not
have javascript
However, a flexible layout provides a good fallback

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

53. 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)
{...}

54. Final Result:
Mobile First Responsive Design
example: http://ethanmarcotte.com/

55. 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.
Smaller tablets, like the Amazon Kindle (600×800) and Barnes &
600 pixels Noble Nook (600×1024), held in portrait mode.
768 pixels Ten-inch tablets like the iPad (768×1024) held in portrait mode.
Tablets like the iPad (1024×768) held in landscape mode, as well as
1024 pixels certain laptop, netbook, and desktop displays.
1200 pixels For widescreen displays, primarily laptop and desktop browsers.

56. Awesome RWD Examples
• http://responsivewebdesign.com/robot/
• http://letsembark.com/
• http://cognition.happycog.com/
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 article
http://www.alistapart.com/articles/responsive-web-design/
• Responsive design – harnessing the power of media queries
http://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

57. Thanks!
Ben MacNeill
ben.macneill@extension.org
Twitter:
@chillnc
Presentation at:
slideshare.net/chillnc/
Demo files:
extension.org/share/netc/rwd/