future-proof responsive web design #rwd

49
FUTURE-PROOF RWD

Upload: digital-surgeons

Post on 27-Jan-2015

105 views

Category:

Design


0 download

DESCRIPTION

How can we build experiences for the devices of tomorrow? Explore the techniques for building performant, maintainable and future-proof responsive designs. Bio: Adam Chambers is a senior developer at Digital Surgeons, a full-service creative agency based in New Haven, Connecticut. Adam is the lead architect on the Gumby Framework project, creator of ResponsiveComments.js and a web standards enthusiast.

TRANSCRIPT

Page 1: Future-Proof Responsive Web Design #RWD

FUTURE-PROOF RWD

Page 2: Future-Proof Responsive Web Design #RWD

ADAM CHAMBERS Senior Developer, Digital Surgeons !

@chambaz digitalsurgeons.com

Page 3: Future-Proof Responsive Web Design #RWD
Page 4: Future-Proof Responsive Web Design #RWD

FUTURE-PROOF RWD

Page 5: Future-Proof Responsive Web Design #RWD

FUTURE-PROOF RWD

Page 6: Future-Proof Responsive Web Design #RWD

Desktop Tablet Mobile

Page 7: Future-Proof Responsive Web Design #RWD

THE INTERNET

OF THINGS

Page 8: Future-Proof Responsive Web Design #RWD

• Elastic layouts

• Mobile first

• Progressive enhancement

• Modular & semantic

• Lightweight & performant

Future-proofing Responsive Web Designs.

Page 9: Future-Proof Responsive Web Design #RWD

Bourbon & Neat

Page 10: Future-Proof Responsive Web Design #RWD

Keep it relative

Page 11: Future-Proof Responsive Web Design #RWD

Elastic Layouts.• Rems

Font sizes

• Ems Structure, widths, heights, margins, padding

•% Structure, widths, heights, margins, padding

• Px Sprites, borders, rounded corners

Page 12: Future-Proof Responsive Web Design #RWD

What is an em?

Page 13: Future-Proof Responsive Web Design #RWD

“One em is equal to the computed value of the ‘font-size’ property of the element on which it is used”

Page 14: Future-Proof Responsive Web Design #RWD

What is an em?

body { font-size: 100%; }

1em = 16px

2em = 32px

body header { font-size: 2em; }

1em = 32px

2em = 64px

Page 15: Future-Proof Responsive Web Design #RWD

Elastic Layouts.• Rems

Font sizes

• Ems Structure, widths, heights, margins, padding

•% Structure, widths, heights, margins, padding

• Px Sprites, borders, rounded corners

Page 16: Future-Proof Responsive Web Design #RWD

Why not px?

Page 17: Future-Proof Responsive Web Design #RWD

Why ems?

Page 18: Future-Proof Responsive Web Design #RWD

Base font size 16px Base font size 40px

Absolute Typography.

Page 19: Future-Proof Responsive Web Design #RWD

Base font size 16px Base font size 40px

Relative Typography.

Page 20: Future-Proof Responsive Web Design #RWD

Px base media query Em based media query

Absolute / Relative Media Queries.

Page 21: Future-Proof Responsive Web Design #RWD

Start small

Page 22: Future-Proof Responsive Web Design #RWD

Mobile first.• Often referred to by the misleading term “mobile first”

• It’s really just common sense to start small and work up

• Mobile browsing is fast overtaking desktop browsing

• Forces focus by embracing the constraints of smaller devices

• Lets call it “content first”

Page 23: Future-Proof Responsive Web Design #RWD

Min-width Media Queries.

Max-width.responsive-element { padding: 0; @include span-columns(6);! @include media(max-width: 48em) { padding: 1em; width: 100%; }}

Min-width.responsive-element { padding: 1em; width: 100%; @include media(min-width: 48em) { padding: 0; @include span-columns(6); }}

Page 24: Future-Proof Responsive Web Design #RWD

From the ground up

Page 25: Future-Proof Responsive Web Design #RWD

Progressive Enhancement.• Progressively enhance rather than gracefully degrading

• Starting simple and adding complexity causes far less headaches

• Load your advanced features when supported

• Just like our layouts, our functionality can grow and not shrink

• Lets call it “content first”

Page 26: Future-Proof Responsive Web Design #RWD

Progressive Enhancement.Cutting the mustard

// cutting the mustardif(‘querySelector’ in document && ‘localStorage’ in window && ‘addEventListener’ in window) {! // all the things}

Progressive Enhancement

if(Modernizr.webp) { // use webp images} else if(Modernizr.svg) { // ok use sag then}!if(Modernizr.geolocation) { // geolocation wizardry}!if(window.matchMedia(‘min-width: 48em’).matches) { // all the things}

Page 27: Future-Proof Responsive Web Design #RWD

ResponsiveComments.com ––><!––

Page 28: Future-Proof Responsive Web Design #RWD

Modular & meaningful

Page 29: Future-Proof Responsive Web Design #RWD

Sassy Modularity.• I’m sure we all agree that modularity is essential

• Maintainability is essential in future proof applications

• Placeholders are invisible, reusable blocks of CSS

• Extend placeholders into classes for performant modularity

• Sass allows us to create semantic, content driven classes

Page 30: Future-Proof Responsive Web Design #RWD

Modular CSS.

CSS HTML

.featured { width: red;}

.product { width: 25%; padding: 2em; float: left;}

<div class=“product”> <!-— product markup —-></div>!<div class=“product featured”> <!-— featured product markup —-></div>

Page 31: Future-Proof Responsive Web Design #RWD

Modular Sass.

SCSS HTML

%product { width: 25%; padding: 2em; float: left;}!%featured { background: red;}

.product { @extend %product;}!.featured-product { @extend %product; @extend %featured;}

<div class=“product”> <!-— product markup —-></div>!<div class=“featured-product”> <!-— featured product markup —-></div>

Page 32: Future-Proof Responsive Web Design #RWD

Modular Sass.SCSS%title { text-transform: uppercase; line-height: 3; color: #000;}!.product-title { margin: 20px 0; @extend %title;}!.cart-title { float: right; @extend %title;}

CSS.product-title,.cart-title { text-transform: uppercase; line-height: 3; color: #000;}!.product-title { margin: 20px 0; }!.cart-title { float: right;}

Page 33: Future-Proof Responsive Web Design #RWD

Light & fast

Page 34: Future-Proof Responsive Web Design #RWD

Monolithic Frameworks.

• Frameworks are essential for rapid development

• Providing building blocks for your application

• Large overhead and code bloat

• Pick and choose exactly what you require

Page 35: Future-Proof Responsive Web Design #RWD

Mixins.

• Mixins are invisible, reusable blocks of CSS

• Arguments and conditional logic

• Mixin libraries have no overhead

• Only use exactly what you require

Page 36: Future-Proof Responsive Web Design #RWD

Mixin Libraries..product { @include span-columns(4);}!

%outer-container { @include outer-container();}!

.product-container { @extend %outer-container;}

@mixin btn($color) { @extend %btn; background-color: $color;}!

.product-btn { @include btn(#c0392b);}!

.delete-btn { @include btn(#d54445);}

Page 37: Future-Proof Responsive Web Design #RWD

jQuery.

• jQuery is a fantastic library for cross browser development

• Do you really need the entire 100kb?

• Not just page weight but call stack size

• Native JavaScript support is actually pretty good

Page 38: Future-Proof Responsive Web Design #RWD

Vanilla JS.

var products = document.querySelectorAll(‘.product’);!

var featuredProduct = document.querySelector(‘.featured-product’);!

[].forEach.call(products, function(product) { // do something with each product});!

featuredProduct.classList.add(‘active’);featuredProduct.classList.remove(‘active’);featuredProduct.classList.contains(‘active’);

Page 39: Future-Proof Responsive Web Design #RWD

Bower.

• Dependency management for the front end

• Micro-libraries over monolithic frameworks

• Small libraries that serve a single purpose

• Pick and choose exactly what you require

Page 40: Future-Proof Responsive Web Design #RWD

Bower.json{ "name": "Digital Surgeons", "version": "1.0.0", "private": true, "dependencies": { "normalize-scss": "~2.1.3", "responsive-comments": "~1.2.1", "html5-polyfills": "*", "matchmedia": "~0.1.0", "headroom.js": "~0.3.9", "raf.js": "~0.0.3", "respond": "~1.4.2", "html5shiv": "~3.7.0", "slider": "https://github.com/cferdinandi/slider.git", "swiper": "~2.4.3", "move.js": "https://github.com/visionmedia/move.js.git#~0.3.3", "imagesloaded": "~3.1.4" }}

Page 41: Future-Proof Responsive Web Design #RWD

Grunt.

• Task runner and build processes for the front end

• Package your front end code for production

• Compile, minify, concatenate, optimise

• If at all possible, automate it

Page 42: Future-Proof Responsive Web Design #RWD

Gruntfile.jsfiles: { // global JS ‘js/dist/global.js’: [ ‘bower_components/raf.js/raf.min.js’, ‘bower_components/html5-polyfills/classList.js’, ‘bower_components/responsive-comments/responsive-comments.js’, ‘bower_components/anim/anim.min.js’, ‘bower_components/headroom.js/dist/headroom.js’, ‘js/src/global.js’ ], // global JS + page specific ‘js/dist/home.js’: [ ‘bower_components/swiper/dist/idangerous.swiper.js’, ‘bower_components/eventEmitter/EventEmitter.min.js’, ‘bower_components/eventie/eventie.js’, ‘bower_components/imagesloaded/imagesloaded.js’, ‘js/dist/global.js’, ‘js/src/slider.js’, ‘js/src/home.js’ ]}

watch: { scripts: { files: [‘js/src/*.js’], tasks: [‘uglify’], options: { spawn: false, livereload: true } }, css: { files: ‘sass/*.scss’, tasks: [‘sass’], options: { livereload: true, } }}

Page 43: Future-Proof Responsive Web Design #RWD

#perfmatters.

• Performance is no longer just load time, it’s a feature

• Rendering performance is essential in a world of client side apps

• Use Chrome’s extensive Dev Tools to profile and optimise

• Make your application run fast and smoothly over time

Page 44: Future-Proof Responsive Web Design #RWD

Rendering Performance.

Page 45: Future-Proof Responsive Web Design #RWD

Painting Performance.

Page 46: Future-Proof Responsive Web Design #RWD

• Elastic layouts

• Mobile first

• Progressive enhancement

• Modular & semantic

• Lightweight & performant

Future-proofing Responsive Web Designs.

Page 47: Future-Proof Responsive Web Design #RWD
Page 48: Future-Proof Responsive Web Design #RWD

“Amazing last quote with something meaningful

and memorable.” #perfmatters

Page 49: Future-Proof Responsive Web Design #RWD

Follow me @chambazdigitalsurgeons.com

FUTURE-PROOF RWD