squishy pixels
DESCRIPTION
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 FlexboxTRANSCRIPT
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]