squishy pixels

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

Upload: fitc

Post on 02-Dec-2014

317 views

Category:

Internet


0 download

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 Flexbox

TRANSCRIPT

Page 1: Squishy pixels

Squishy Pixelsby Varun Vachhar

designer/developer at rangle.io

Page 2: Squishy pixels

Pixel-perfectPSD to HTML/CSS

Page 3: Squishy pixels

2007

Page 4: Squishy pixels

native &m. domains

Page 5: Squishy pixels

And ThenThere Were iPads

Page 6: Squishy pixels

2010

Page 7: Squishy pixels

We Had a Problem

Page 8: Squishy pixels

ResponsiveWeb Design

Page 9: Squishy pixels

Fluid GridsFlexible Images

Page 10: Squishy pixels

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

Page 11: Squishy pixels

AdaptiveWeb Design

Page 12: Squishy pixels

Adaptive Web Design

Page 13: Squishy pixels

Adaptive Web Design

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

Page 14: Squishy pixels
Page 15: Squishy pixels

RESS: RWD + Server Side Components

Device DetectionAdaptive Layouts

Page 16: Squishy pixels

Wat!

Page 17: Squishy pixels

ProgressiveEnhancement

Page 18: Squishy pixels
Page 19: Squishy pixels
Page 20: Squishy pixels

Brad Frost

Future FriendlyPattern Lab

Page 21: Squishy pixels

Jeffrey ZeldmanDesigning with Web Standards

Page 22: Squishy pixels

The purpose behind responsive design should be separated from

the specific techniques used to achieve it.

Page 23: Squishy pixels

Brad Frost

A single Web experience that modifies based on the

capabilities of the device and browser.

Page 24: Squishy pixels

Responsive &Adaptive

Web Design

Page 25: Squishy pixels

Create A SingleWeb Experience

Page 26: Squishy pixels
Page 27: Squishy pixels

Content

Page 28: Squishy pixels

Mobile-First CSS

Page 29: Squishy pixels

Well Structured Meaningful Markup

Page 30: Squishy pixels

Compress/Minimize!

Page 31: Squishy pixels

Responsive Images{ max-width: 100%;

background-size: cover;

background-size: contain;}

Page 32: Squishy pixels

Responsive Images

Page 33: Squishy pixels

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>

Page 34: Squishy pixels

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] });

Page 35: Squishy pixels

Imager.js• lookup placeholder elements

• replace placeholders with transparent images

• update src attribute for each image and assign the best quality/size ratio URL

Page 36: Squishy pixels

Layouts

Page 37: Squishy pixels

Adaptive Layouts

Content resizes at fixed break points

Page 38: Squishy pixels
Page 39: Squishy pixels
Page 40: Squishy pixels

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

Page 41: Squishy pixels

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; }}

Page 42: Squishy pixels

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

Page 43: Squishy pixels

� � � � � � � � � � � � � � � � � � � � �

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;}

Page 44: Squishy pixels

Responsive TablesSquishing VS Grouping

Page 45: Squishy pixels
Page 46: Squishy pixels

Optimize Animations for 60fps Everywhere

Page 47: Squishy pixels

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

Page 48: Squishy pixels

Client Side Scripting

Page 49: Squishy pixels

responsivenews.co.ukBBC News developersresponsive design blog

Page 50: Squishy pixels

Cutting The Mustard

2012 version by BBC

Page 51: Squishy pixels
Page 52: Squishy pixels

Migrating an Old Code Base

Page 53: Squishy pixels

Migrating an Old Code Base

Page 54: Squishy pixels

Flexbox!

Page 55: Squishy pixels
Page 56: Squishy pixels

Can I Use It?Mobile

SASS mixins provide old flexbox spec too

Page 57: Squishy pixels

Set Display Type

@mixin display-flex { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -moz-flex; display: -ms-flexbox; display: flex;}

Page 58: Squishy pixels

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;}

Page 59: Squishy pixels

Basis

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

Page 60: Squishy pixels

Grow

Amount of the available space to fill

@include flex(0, 1, 25px);@include flex(1, 1, auto);@include flex(0, 1, 25px);

Page 61: Squishy pixels

Shrink

How much to shrink

@include flex(0, 1, 50px);@include flex(0, 2, 50px);@include flex(0, 1, 50px);

Page 62: Squishy pixels

!

@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;}

Page 63: Squishy pixels

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;}

Page 64: Squishy pixels
Page 65: Squishy pixels

It Depends!

Page 66: Squishy pixels

Varun [email protected]

Page 67: Squishy pixels
Page 68: Squishy pixels
Page 69: Squishy pixels
Page 70: Squishy pixels
Page 71: Squishy pixels