The document discusses various techniques for responsive and adaptive web design, emphasizing the delivery of a single web experience that adjusts to different devices and browsers. It highlights methods like fluid grids, flexible images, and responsive typography, as well as tools such as media queries and CSS frameworks. Additionally, it covers best practices for coding, including the use of SASS mixins for flexbox layouts and the importance of optimizing for performance.

1. Squishy Pixels
by Varun Vachhar
designer/developer at rangle.io

2. Pixel-perfect
PSD to HTML/CSS

3. 2007

4. native &
m. domains

5. And Then
There Were iPads

6. 2010

7. We Had a Problem

8. Responsive
Web Design

9. Fluid Grids
Flexible Images

10. Responsive Web Design
Responsive design is a technique in which the same HTML
code is delivered to each device, but tweaks to CSS, allow
it to adjust to the screen's form factor.
– Ravi Pratap

11. Adaptive
Web Design

12. Adaptive Web Design

13. Adaptive Web Design
uses the components of progressive enhancement to
define design methods that focus on the user, not the
browser.

15. RESS: RWD + Server Side Components
Device Detection
Adaptive Layouts

16. Wat!

17. Progressive
Enhancement

20. Brad Frost
Future Friendly
Pattern Lab

21. Jeffrey Zeldman
Designing with Web Standards

22. The purpose behind responsive
design should be separated from
the specific techniques used to
achieve it.

23. Brad Frost
A single Web experience that
modifies based on the
capabilities of the device and
browser.

24. Responsive &
Adaptive
Web Design

25. Create A Single
Web Experience

27. Content

28. Mobile-First CSS

29. Well Structured
Meaningful Markup

30. Compress/Minimize!

31. Responsive Images
{
max-width: 100%;
background-size: cover;
background-size: contain;
}

32. Responsive Images

33. Picture Element
<picture>
<source src="responsive-obama-320.png">
<source src="responsive-obama-512.png" media="(min-width: 512px)">
<source src="responsive-obama-1024.png" media="(min-width: 1024px)">
<source src="responsive-obama-2048.png" media="(min-width: 2048px)">
<noscript><img src="responsive-obama-320.png"></noscript>
</picture>

34. Imager.js
<div style="width: 240px">
<div class="delayed-image-load"
data-src="/img/image.png"
data-alt="alternative text">
</div>
</div>
new Imager({ availableWidths: [200, 260, 320, 600] });

35. Imager.js
• lookup placeholder elements
• replace placeholders with transparent images
• update src attribute for each image and assign the best
quality/size ratio URL

36. Layouts

37. Adaptive Layouts
Content resizes at fixed break points

40. Flowtype.js
$('body').flowtype({
fontRatio : 30
});

41. Responsive Typography
Using Media Queries and px or em values
body {
font-size: 100%;
}
h1 {
font-size: 25em;
}
@media screen and (max-width: 50em) {
h1 {
font-size:2em;
}
}

42. Responsive Typography
Using Viewport CSS units
1vw = Equal to 1% of the width of the initial containing block
1vh = Equal to 1% of the height of the initial containing block
1vmin = Equal to the smaller of vw or vh
1vmax = Equal to the larger of vw or vh
W3C Values and Units Module Level 3

43. Using rem. markdotto.com/mdo.css is a great example
html {
font-family: "PT Serif", Georgia, "Times New Roman", serif;
font-size: 16px;
}
@media (min-width: 48em) {
html {
font-size: 21px;
}
}
h1 {
font-size: 2rem;
}

44. Responsive Tables
Squishing VS Grouping

46. Optimize Animations
for 60fps Everywhere

47. What Triggers Re-Layouts?
What Triggers Re-Paints?
How To Leverage the GPU?

48. Client Side Scripting

49. responsivenews.co.uk
BBC News developers
responsive design blog

50. Cutting The Mustard
2012 version by BBC

52. Migrating an Old Code Base

53. Migrating an Old Code Base

54. Flexbox!

56. Can I Use It?
Mobile
SASS mixins provide old flexbox spec too

57. Set Display Type
@mixin display-flex {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
}

58. Grow, Shrink & Basis
@mixin flex($fg: 1, $fs: null, $fb: null) {
-webkit-box-flex: $fg;
-webkit-flex: $fg $fs $fb;
-moz-box-flex: $fg;
-moz-flex: $fg $fs $fb;
-ms-flex: $fg $fs $fb;
flex: $fg $fs $fb;
}

59. Basis
Initial size
@include flex(0, 1, 50px);
@include flex(0, 1, auto);
@include flex(0, 1, auto);

60. Grow
Amount of the available space to fill
@include flex(0, 1, 25px);
@include flex(1, 1, auto);
@include flex(0, 1, 25px);

61. Shrink
How much to shrink
@include flex(0, 1, 50px);
@include flex(0, 2, 50px);
@include flex(0, 1, 50px);

62. !
@mixin flex-direction($value: row) {
@if $value == row-reverse {
-webkit-box-direction: reverse;
-webkit-box-orient: horizontal;
} @else if $value == column {
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
} @else if $value == column-reverse {
-webkit-box-direction: reverse;
-webkit-box-orient: vertical;
} @else {
-webkit-box-direction: normal;
-webkit-box-orient: horizontal;
}
-webkit-flex-direction: $value;
-moz-flex-direction: $value;
-ms-flex-direction: $value;
flex-direction: $value;
}

63. Alignment: Start, End &
Middle
@mixin align-self($value: auto) {
-webkit-align-self: $value;
-moz-align-self: $value;
@if $value == flex-start {
-ms-flex-item-align: start;
} @else if $value == flex-end {
-ms-flex-item-align: end;
} @else {
-ms-flex-item-align: $value;
}
align-self: $value;
}

65. It Depends!

66. Varun Vachhar
@winkerVSbecks
varun.ca
rangle.io