A short intro to the state of Responsive Web Design and a list of tools and techniques that can help us develop decent responsive websites.

1. Responsive Web
Design Workflow
The state of RWD and a...
JoomlaDay 2013

2. Definition

4. Definition
“The practice consists of a mix of flexible grids
and layouts, images and an intelligent use of
CSS media queries.“
-bit.ly/m3ap1L

5. Where we are

6. Where we are
5,210,000 - June 2012

7. Where we are
46,610,000 - June 2013

8. Where we are

9. Where we are

10. Where we are

11. Where we are

12. Where we are

13. Where we are

14. Where we are

15. Where we are

16. Where we are

17. Where we are

18. Browser Support
Where we are
~83% - June 2012
-bit.ly/GsHMm

19. Browser Support
Where we are
~91% - June 2013
-bit.ly/GsHMm

20. 7 8
(Far from) Browser Support
Kill these agent(s)
X
Where we are

21. Where we are
Don’t forget:
+ RWD =
-bit.ly/LsYjA6

22. Workflow

23. Philosophy of
breakpoints

24. Workflow > Philosophy of breakpoints
Jeremy Keith
“I don’t think it’s desirable to have a “standard”
handful of screen widths, any more than it’s
desirable to have a single rendering engine in
every browser“
-bit.ly/IyLnvL

25. Workflow > Philosophy of breakpoints
Stephen Hay
“We do have to start somewhere“
-bit.ly/1aZVILN

26. Workflow > Philosophy of breakpoints
-bit.ly/12BjSsO

27. SASS
Syntactically Awesome Stylesheets
.scss > .css
-bit.ly/3wRpzR

28. Workflow > SASS
$radius: 1px;
$golden: 1.618rem;
$shadow: 0 1px 12px rgba(0, 0, 0, 0.1);
a.call {
margin: $golden*2 auto;
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
Variables

29. Workflow > SASS
Mixins
@mixin rounded-shadowed{
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
-webkit-box-shadow: $shadow;
-moz-box-shadow: $shadow;
box-shadow: $shadow;
}
body.work figure img{
margin: $golden auto;
@include rounded-shadowed
}

30. Workflow > SASS
Nesting
table.hl {
margin: 2em 0;
td.ln {
text-align: right;
}
}
li {
font: {
family: serif;
weight: bold;
size: 1.2em;
}
}

31. Zen Grids
-bit.ly/AoG8vG

32. Workflow > Zen Grids
<div class="container">
<article class="content">
The main content. We like semantic HTML ordering.
</article>
<aside class="aside1">
An aside.
</aside>
<aside class="aside2">
Another aside.
</aside>
<footer class="footer1">
A footer.
</footer>
<footer class="footer2">
Another footer.
</footer>
</div>

33. Workflow > Zen Grids
.container {
@include zen-grid-container;
$zen-column-count: 7;
$zen-gutter-width: 10px;
width: 80%;
max-width: 1240px;
}
.aside1 { @include zen-grid-item(2, 1); }
.content { @include zen-grid-item(4, 3); }
.aside2 { @include zen-grid-item(1, 7); }
.footer1 { @include zen-grid-item(3, 5); }
.footer2 { @include zen-grid-item(4, 1); }

34. Workflow > Zen Grids
@include zen-grid-item(2, 1) @include zen-grid-item(4, 3)
@include
zen-grid-item(1, 7)
@include zen-grid-item(3, 5)@include zen-grid-item(4, 1)

35. Media

36. Workflow > Media
img{
width:auto; */ IE8 and below */
max-width: 100%;
height:auto; */ if you specify image width & height in your HTML */
}

37. -bit.ly/nid1yz
Workflow > Media
Chris Coyer & Paravel: FitVid.js

38. Workflow > Media
Almost there...

39. -bit.ly/yvfcXm
Workflow > Responsive Tables
<div data-picture data-alt="Look ma, many images!">
<div data-src="small.jpg"></div>
<div data-src="medium.jpg" data-media="(min-width: 400px)"></div>
<div data-src="large.jpg" data-media="(min-width: 800px)"></div>
<div data-src="largeX2.jpg" data-media="(min-width: 1000px) and (min-
device-pixel-ratio: 2.0)"></div>
</div>
Scott Jehl: picturefill.js

40. Responsive Typography

41. -bit.ly/ZzkdOZ
Workflow > Responsive Typography

42. -bit.ly/ZCE2nh
-Photo by Wilson Miner
Workflow > Responsive Typography
100% is NOT big

43. Workflow > Responsive Typography
html {
font-size: 62.5%; */ 16px*0.625=10px=1em */
line-height: 1.5;
}
p{
font-size: 16px; */ IE8 and below */
font-size: 1.6rem; */ rem=RootEM - 1.6*10px=16px */
}

44. @media all and (max-width: 768px) {
html {
font-size: 58%; */ 16px*0.58=9px */
}
}
*/ p{
font-size: 16px;
font-size: 1.6rem; */ 9*1.6=14.4px */
} */
Workflow > Responsive Typography

45. -bit.ly/Vr0RbL
Workflow > Responsive Typography

46. Responsive Navigation

47. -bit.ly/MSO7oL
Workflow > Responsive Navigation
>1024px
<1024px

48. -bit.ly/MSO7oL
Workflow > Responsive Navigation
Jason Weaver: flexnav.js
<div class="menu-button">Navigation</div>
<nav role="navigation">
<ul data-breakpoint="1024" class="flexnav">
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</nav>

49. Responsive Tables

50. Workflow > Responsive Tables
/* Attach the Table CSS and Javascript */
<link rel="stylesheet" href="responsive-tables.css">
<script src="stylesheet" href="responsive-tables.js"</script>
...
...
...
<table class=”responsive”>
<tr>...
ZURB: responsive-tables.js

51. Workflow > Responsive Tables

52. Workflow
-Philosophy of breakpoints
-SASS
-Zen Grids
-Media (images & video)
-Responsive Typography
-Navigation
-Tables

54. Yiannis Konstantakopoulos
porcupinecolors.com
twitter.com/yiannis_k