Recommended
More Related Content
Similar to RESPONSIVE DESIGN AND THE MODERN WEB APPLICATION
Similar to RESPONSIVE DESIGN AND THE MODERN WEB APPLICATION (20)
Recently uploaded
Recently uploaded (20)
RESPONSIVE DESIGN AND THE MODERN WEB APPLICATION
- 1. RESPONSIVE DESIGN AND THE MODERN WEB APPLICATION
- 4. ASSUMPTIONS BASED ON SCREEN SIZE
- 5. MOBILEFIRSTRESPONSIVEDESIGN ON THE GO NOT TOUCH INTERFACEHIGH RES IMAGES ASSUMPTIONS BASED ON SCREEN SIZE
- 6. IT’S ALL ABOUT DEFINING THE CONTEXT
- 7. Find store... 1 2 3 4 ... MOBILEFIRSTRESPONSIVEDESIGN ON THE GO Find store... 1 2 3 4 ... DEVICE CONTEXT
- 8. MOBILEFIRSTRESPONSIVEDESIGN CONTEXT Find store... 1 2 3 4 ... Find store... 1 2 3 4 ... Find store... 1 2 3 ... DEVICE CONTEXT
- 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. 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. 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. 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. 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. BUSINESS CONTEXT
- 17. MOBILEFIRSTRESPONSIVEDESIGN CONTEXT KNOWN IP-RANGE: AT THE AIRPORT BUSINESS CONTEXT
- 18. MOBILEFIRSTRESPONSIVEDESIGN CONTEXT KNOWN IP-RANGE: AT THE AIRPORT KNOWN FLIGHT NUMBER: LAST CHECK-IN BUSINESS CONTEXT
- 19. PUTTING IT ALL TOGETHER
- 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
- 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. 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. 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. 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. 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. 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. 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. CONSIDERATIONS REQUESTS ONLY ADAPTIVE TO SCREEN SIZE UX, SEO & ANALYTICS
- 30. ?