Download - Squishy pixels
Squishy Pixelsby Varun Vachhar
designer/developer at rangle.io
Pixel-perfectPSD to HTML/CSS
2007
native &m. domains
And ThenThere Were iPads
2010
We Had a Problem
ResponsiveWeb Design
Fluid GridsFlexible Images
Responsive Web DesignResponsive 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
AdaptiveWeb Design
Adaptive Web Design
Adaptive Web Design
uses the components of progressive enhancement to define design methods that focus on the user, not the browser.
RESS: RWD + Server Side Components
Device DetectionAdaptive Layouts
Wat!
ProgressiveEnhancement
Brad Frost
Future FriendlyPattern Lab
Jeffrey ZeldmanDesigning with Web Standards
The purpose behind responsive design should be separated from
the specific techniques used to achieve it.
Brad Frost
A single Web experience that modifies based on the
capabilities of the device and browser.
Responsive &Adaptive
Web Design
Create A SingleWeb Experience
Content
Mobile-First CSS
Well Structured Meaningful Markup
Compress/Minimize!
Responsive Images{ max-width: 100%;
background-size: cover;
background-size: contain;}
Responsive Images
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>
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] });
Imager.js• lookup placeholder elements
• replace placeholders with transparent images
• update src attribute for each image and assign the best quality/size ratio URL
Layouts
Adaptive Layouts
Content resizes at fixed break points
� � � � � � � � � � � � � � � � � � � � �Flowtype.js$('body').flowtype({ fontRatio : 30});
Responsive Typography
Using Media Queries and px or em valuesbody { font-size: 100%;}
h1 { font-size: 25em;}
@media screen and (max-width: 50em) { h1 { font-size:2em; }}
Responsive Typography
Using Viewport CSS units
1vw = Equal to 1% of the width of the initial containing block1vh = Equal to 1% of the height of the initial containing block1vmin = Equal to the smaller of vw or vh1vmax = Equal to the larger of vw or vh
W3C Values and Units Module Level 3
� � � � � � � � � � � � � � � � � � � � �
Using rem. markdotto.com/mdo.css is a great examplehtml { font-family: "PT Serif", Georgia, "Times New Roman", serif; font-size: 16px;}@media (min-width: 48em) { html { font-size: 21px; }}h1 { font-size: 2rem;}
Responsive TablesSquishing VS Grouping
Optimize Animations for 60fps Everywhere
What Triggers Re-Layouts?What Triggers Re-Paints?How To Leverage the GPU?
Client Side Scripting
responsivenews.co.ukBBC News developersresponsive design blog
Cutting The Mustard
2012 version by BBC
Migrating an Old Code Base
Migrating an Old Code Base
Flexbox!
Can I Use It?Mobile
SASS mixins provide old flexbox spec too
Set Display Type
@mixin display-flex { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -moz-flex; display: -ms-flexbox; display: flex;}
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;}
Basis
Initial size@include flex(0, 1, 50px);@include flex(0, 1, auto);@include flex(0, 1, auto);
Grow
Amount of the available space to fill
@include flex(0, 1, 25px);@include flex(1, 1, auto);@include flex(0, 1, 25px);
Shrink
How much to shrink
@include flex(0, 1, 50px);@include flex(0, 2, 50px);@include flex(0, 1, 50px);
!
@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;}
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;}
It Depends!
Varun [email protected]
