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.
22. 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”
25. 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”
26. Progressive Enhancement.
Cutting the mustard
Progressive Enhancement
// cutting the mustard
if(‘querySelector’ in document &&
‘localStorage’ in window &&
‘addEventListener’ in window) {
if(Modernizr.webp) {
// use webp images
} else if(Modernizr.svg) {
// ok use sag then
}
!
}
// all the things
!
if(Modernizr.geolocation) {
// geolocation wizardry
}
!
if(window.matchMedia(‘min-width: 48em’).matches) {
// all the things
}
29. 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
34. 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
35. Mixins.
• Mixins are invisible, reusable blocks of CSS
• Arguments and conditional logic
• Mixin libraries have no overhead
• Only use exactly what you require
37. 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
38. 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’);
39. 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
41. 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
43. #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