future-proof responsive web design #rwd
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
FUTURE-PROOF RWD
ADAM CHAMBERS Senior Developer, Digital Surgeons !
@chambaz digitalsurgeons.com
FUTURE-PROOF RWD
FUTURE-PROOF RWD
Desktop Tablet Mobile
THE INTERNET
OF THINGS
• Elastic layouts
• Mobile first
• Progressive enhancement
• Modular & semantic
• Lightweight & performant
Future-proofing Responsive Web Designs.
Bourbon & Neat
Keep it relative
Elastic Layouts.• Rems
Font sizes
• Ems Structure, widths, heights, margins, padding
•% Structure, widths, heights, margins, padding
• Px Sprites, borders, rounded corners
What is an em?
“One em is equal to the computed value of the ‘font-size’ property of the element on which it is used”
What is an em?
body { font-size: 100%; }
1em = 16px
2em = 32px
body header { font-size: 2em; }
1em = 32px
2em = 64px
Elastic Layouts.• Rems
Font sizes
• Ems Structure, widths, heights, margins, padding
•% Structure, widths, heights, margins, padding
• Px Sprites, borders, rounded corners
Why not px?
Why ems?
Base font size 16px Base font size 40px
Absolute Typography.
Base font size 16px Base font size 40px
Relative Typography.
Px base media query Em based media query
Absolute / Relative Media Queries.
Start small
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”
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); }}
From the ground up
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”
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}
ResponsiveComments.com ––><!––
Modular & meaningful
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
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>
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>
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;}
Light & fast
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
Mixins.
• Mixins are invisible, reusable blocks of CSS
• Arguments and conditional logic
• Mixin libraries have no overhead
• Only use exactly what you require
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);}
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
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’);
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
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" }}
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
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, } }}
#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
Rendering Performance.
Painting Performance.
• Elastic layouts
• Mobile first
• Progressive enhancement
• Modular & semantic
• Lightweight & performant
Future-proofing Responsive Web Designs.
“Amazing last quote with something meaningful
and memorable.” #perfmatters
Follow me @chambazdigitalsurgeons.com
FUTURE-PROOF RWD