Your SlideShare is downloading. ×
Future-Proof Responsive Web Design #RWD
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Future-Proof Responsive Web Design #RWD

2,283

Published on

How can we build experiences for the devices of tomorrow? Explore the techniques for building performant, maintainable and future-proof responsive designs. …

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.

Published in: Design
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,283
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
27
Comments
0
Likes
6
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. FUTURE-PROOF RWD
  • 2. ADAM CHAMBERS Senior Developer, Digital Surgeons ! @chambaz digitalsurgeons.com
  • 3. FUTURE-PROOF RWD
  • 4. FUTURE-PROOF RWD
  • 5. Desktop Tablet Mobile
  • 6. THE INTERNET OF THINGS
  • 7. Future-proofing Responsive Web Designs. • Elastic layouts • Mobile first • Progressive enhancement • Modular & semantic • Lightweight & performant
  • 8. Bourbon & Neat
  • 9. Keep it relative
  • 10. Elastic Layouts. • Rems Font sizes • Ems Structure, widths, heights, margins, padding •% Structure, widths, heights, margins, padding • Px Sprites, borders, rounded corners
  • 11. What is an em?
  • 12. “One em is equal to the computed value of the ‘font-size’ property of the element on which it is used”
  • 13. What is an em? body { font-size: 100%; } body header { font-size: 2em; } 1em = 16px 1em = 32px 2em = 32px 2em = 64px
  • 14. Elastic Layouts. • Rems Font sizes • Ems Structure, widths, heights, margins, padding •% Structure, widths, heights, margins, padding • Px Sprites, borders, rounded corners
  • 15. Why not px?
  • 16. Why ems?
  • 17. Absolute Typography. Base font size 16px Base font size 40px
  • 18. Relative Typography. Base font size 16px Base font size 40px
  • 19. Absolute / Relative Media Queries. Px base media query Em based media query
  • 20. Start small
  • 21. 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”
  • 22. Min-width Media Queries. Max-width Min-width .responsive-element { padding: 0; @include span-columns(6); .responsive-element { padding: 1em; width: 100%; @include media(min-width: 48em) { padding: 0; @include span-columns(6); } } ! } @include media(max-width: 48em) { padding: 1em; width: 100%; }
  • 23. From the ground up
  • 24. 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”
  • 25. 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 }
  • 26. <!–– ResponsiveComments.com ––>
  • 27. Modular & meaningful
  • 28. 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
  • 29. Modular CSS. HTML CSS .product { width: 25%; padding: 2em; float: left; } .featured { width: red; } <div class=“product”> <!-— product markup —-> </div> ! <div class=“product featured”> <!-— featured product markup —-> </div>
  • 30. Modular Sass. SCSS %product { width: 25%; padding: 2em; float: left; } ! %featured { background: red; } HTML .product { @extend %product; } <div class=“product”> <!-— product markup —-> </div> ! ! .featured-product { @extend %product; @extend %featured; } <div class=“featured-product”> <!-— featured product markup —-> </div>
  • 31. Modular Sass. SCSS CSS %title { text-transform: uppercase; line-height: 3; color: #000; } .product-title, .cart-title { text-transform: uppercase; line-height: 3; color: #000; } ! .product-title { margin: 20px 0; @extend %title; } ! ! ! .cart-title { float: right; @extend %title; } .cart-title { float: right; } .product-title { margin: 20px 0; }
  • 32. Light & fast
  • 33. 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
  • 34. Mixins. • Mixins are invisible, reusable blocks of CSS • Arguments and conditional logic • Mixin libraries have no overhead • Only use exactly what you require
  • 35. 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); }
  • 36. 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
  • 37. 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’);
  • 38. 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
  • 39. 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" } }
  • 40. 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
  • 41. Gruntfile.js files: { // 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, } } }
  • 42. #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
  • 43. Rendering Performance.
  • 44. Painting Performance.
  • 45. Future-proofing Responsive Web Designs. • Elastic layouts • Mobile first • Progressive enhancement • Modular & semantic • Lightweight & performant
  • 46. “Amazing last quote with something meaningful and memorable.” #perfmatters
  • 47. FUTURE-PROOF RWD Follow me @chambaz digitalsurgeons.com

×