Recomendados
Recomendados
Más contenido relacionado
Similar a Modern Web App Responsive Design and Context Awareness
Similar a Modern Web App Responsive Design and Context Awareness (20)
Último
Último (20)
Modern Web App Responsive Design and Context Awareness
- 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. ?