RESPONSIVE DESIGN AND THE MODERN WEB APPLICATION

625 views

Published on

Presentation from a local frontend meetup describing the need for and concept of Responsive Web Design 2.0.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
625
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
4
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

RESPONSIVE DESIGN AND THE MODERN WEB APPLICATION

  1. 1. RESPONSIVE DESIGN AND THE MODERN WEB APPLICATION
  2. 2. RESPONSIVE DESIGN
  3. 3. MOBILEFIRSTRESPONSIVEDESIGN
  4. 4. ASSUMPTIONS BASED ON SCREEN SIZE
  5. 5. MOBILEFIRSTRESPONSIVEDESIGN ON THE GO NOT TOUCH INTERFACEHIGH RES IMAGES ASSUMPTIONS BASED ON SCREEN SIZE
  6. 6. IT’S ALL ABOUT DEFINING THE CONTEXT
  7. 7. Find store... 1 2 3 4 ... MOBILEFIRSTRESPONSIVEDESIGN ON THE GO Find store... 1 2 3 4 ... DEVICE CONTEXT
  8. 8. MOBILEFIRSTRESPONSIVEDESIGN CONTEXT Find store... 1 2 3 4 ... Find store... 1 2 3 4 ... Find store... 1 2 3 ... DEVICE CONTEXT
  9. 9. MOBILEFIRSTRESPONSIVEDESIGN CONTEXT Find store... 1 2 3 4 ... Find store... 1 2 3 4 ... Find store... 1 2 3 ... GEOLOCATION AVAILABLE AND CHANGING: ON THE MOOVE! DEVICE CONTEXT
  10. 10. MOBILEFIRSTRESPONSIVEDESIGN CONTEXT Find store... 1 2 3 4 ... Find store... 1 2 3 4 ... Find store... 1 2 3 ... GEOLOCATION AVAILABLE AND CHANGING: ON THE MOOVE! DODGY CONNECTION: SERVE LO-RES IMAGES DEVICE CONTEXT
  11. 11. DEVICE CONTEXT MOBILEFIRSTRESPONSIVEDESIGN CONTEXT Find store... 1 2 3 4 ... Find store... 1 2 3 4 ... Find store... 1 2 3 ... GEOLOCATION AVAILABLE AND CHANGING: ON THE MOOVE! DODGY CONNECTION: SERVE LO-RES IMAGES TOUCH SCREEN: SUPPORT GESTURES
  12. 12. DEVICE CONTEXT MOBILEFIRSTRESPONSIVEDESIGN CONTEXT Find store... 1 2 3 4 ... Find store... 1 2 3 4 ... Find store... 1 2 3 ... GEOLOCATION AVAILABLE AND CHANGING: ON THE MOOVE! DODGY CONNECTION: SERVE LO-RES IMAGES HARDWARE ACCESS: INTEGRATE WITH CONTACTS TOUCH SCREEN: SUPPORT GESTURES
  13. 13. DEVICE CONTEXT MOBILEFIRSTRESPONSIVEDESIGN Find store... 1 2 3 4 ... Find store... 1 2 3 4 ... Find store... 1 2 3 ... CONTEXT GEOLOCATION AVAILABLE AND CHANGING: ON THE MOOVE! DODGY CONNECTION: SERVE LO-RES IMAGES HARDWARE ACCESS: INTEGRATE WITH CONTACTS WEBGL AVAILABLE: SHOW 3D STREET VIEW TOUCH SCREEN: SUPPORT GESTURES
  14. 14. BUSINESS CONTEXT
  15. 15. MOBILEFIRSTRESPONSIVEDESIGN AT THE AIRPORT BUSINESS CONTEXT
  16. 16. MOBILEFIRSTRESPONSIVEDESIGN CONTEXT BUSINESS CONTEXT
  17. 17. MOBILEFIRSTRESPONSIVEDESIGN CONTEXT KNOWN IP-RANGE: AT THE AIRPORT BUSINESS CONTEXT
  18. 18. MOBILEFIRSTRESPONSIVEDESIGN CONTEXT KNOWN IP-RANGE: AT THE AIRPORT KNOWN FLIGHT NUMBER: LAST CHECK-IN BUSINESS CONTEXT
  19. 19. PUTTING IT ALL TOGETHER
  20. 20. MOBILEFIRSTRESPONSIVEDESIGN KNOWN IP-RANGE: AT THE AIRPORT KNOWN FLIGHT NUMBER: LAST CHECK-IN CONTEXT GEOLOCATION AVAILABLE AND CHANGING: ON THE MOOVE! DODGY CONNECTION: SERVE LO-RES IMAGES HARDWARE ACCESS: INTEGRATE WITH CONTACTS WEBGL AVAILABLE: SHOW 3D STREET VIEW DEVICEBUSINESS ... TOUCH SCREEN: SUPPORT GESTURES
  21. 21. MOBILEFIRSTRESPONSIVEDESIGN CSS&MEDIAQUERIESWEBCOMPONENTS
  22. 22. RESPONSIVE WEB DESIGN 2.0 “We want to be able to build truly responsive user interfaces, without letting content and functionality targeting a specific screen size, affect the performance of another - no matter how rich it is.”
  23. 23. RESPONSIVE WEB DESIGN 2.0 Components will be aware of all their own prerequisites: • Content - Data source (JSON) • Layout - Client side template and styling (HTML & CSS) • Behaviour - Functionality layer if needed (JS)
  24. 24. RESPONSIVE WEB DESIGN 2.0 Components will be aware of all their own prerequisites: • Content - Data source (JSON) • Layout - Client side template and styling (HTML & CSS) • Behaviour - Functionality layer if needed (JS) • RWD2 - Configurable breakpoints (to match other RWD concepts in place)
  25. 25. RESPONSIVE WEB DESIGN 2.0 Components will be aware of all their own prerequisites: • Content - Data source (JSON) • Layout - Client side template and styling (HTML & CSS) • Behaviour - Functionality layer if needed (JS) • RWD2 - Configurable breakpoints (to match other RWD concepts in place) AngularJS will give us almost all we need to contain these on a per element basis in a structured way: <section ng-controller="SomeComponentController" // Model ng-include="'/some/component/template.html'" // Layout ng-click="handleComponentClick($event);" // Behaviour />
  26. 26. RESPONSIVE WEB DESIGN 2.0 Include the module: Set up breakpoints matching your CSS: Assign the breakpoints to your DOM: github.com/mordendk/rwd20 app.config(function(responsiveServiceProvider) { responsiveServiceProvider.addBreakpoint('small', 0, 600); responsiveServiceProvider.addBreakpoint('medium', 600, 960); responsiveServiceProvider.addBreakpoint('large', 960, 1600); responsiveServiceProvider.addBreakpoint('xlarge', 1600, 99999); }); var app = angular.module('app', ['rwd20']); <section class="related-column" responsive-breakpoint="'large'"> <!-- Element only initialized when 960 < window.innerWidth <= 1600 --> </section>
  27. 27. RESPONSIVE WEB DESIGN 2.0 Components will be aware of all their own prerequisites: • Content - Data source (JSON) • Layout - Client side template and styling (HTML & CSS) • Behaviour - Functionality layer if needed (JS) • RWD2 - Configurable breakpoints (to match other RWD concepts in place) AngularJS will give us almost all we need to contain these on a per element basis in a structured way: <section ng-controller="SomeComponentController" // Model ng-include="'/some/component/template.html'" // Layout ng-click="handleComponentClick($event);" // Behaviour responsive-breakpoint="'large'" // Breakpoint />
  28. 28. RESPONSIVE WEB DESIGN 2.0 // Simple image for small screens <img responsive-breakpoint="'small'” ng-src="/images/planet.png" /> RWD2 Components: // Heavy SVG for medium screens and up // (deferred d3, topojson, planetary and data) <canvas planet="/json/planet.json" responsive-breakpoint="'medium,large'" /> // Optional related column // (deferred template, json and images) <section model="/json/news.json" ng-include="'/partials/news.html'" responsive-breakpoint="'large'" /> jsallthethings.com/dev/rwd20-demo
  29. 29. CONSIDERATIONS REQUESTS ONLY ADAPTIVE TO SCREEN SIZE UX, SEO & ANALYTICS
  30. 30. ?

×