Squishy Pixels with Varun Vachhar Presented at FITC's Web Unleashed Toronto 2014 Conference on September 17 More info at www.FITC.ca Adaptive Web Design and Responsive Web Design are often presented as competing design strategies. However, Adaptive Web Design is a superset of techniques aimed at crafting sites which provide an optimal user experience across multiple screen sizes. Responsive Web Design is just one such technique. In this session, Varun will cover the major techniques that make up the Adaptive Web Design strategy, how and when to choose these techniques for creating contextually-aware web experiences, and will give an introduction to building responsive layouts using CSS Flexbox. OBJECTIVE To demystify the world of multi-device and cross-platform web design. TARGET AUDIENCE Web designers and developers ASSUMED AUDIENCE KNOWLEDGE Intermediate HTML and CSS. Basic design knowledge. FIVE THINGS AUDIENCE MEMBERS WILL LEARN What is Adaptive/Responsive Web Design Where responsive design fits in an adaptive web design strategy Other techniques that are a part of an adaptive web design strategy How/when to pick from the various available strategies Introduction to layouts with CSS Flexbox

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