Embed Size (px)
DESCRIPTION
Presentation from a local frontend meetup describing the need for and concept of Responsive Web Design 2.0.
Citation preview
RESPONSIVE DESIGNAND THE MODERN WEB APPLICATION
RESPONSIVE DESIGN
MO
BILE
FIR
ST R
ESPO
NSI
VE D
ESIG
N
ASSUMPTIONS BASED ON SCREEN SIZE
MO
BILE
FIR
ST R
ESPO
NSI
VE D
ESIG
N
ON THE GO NOT TOUCH INTERFACEHIGH RES IMAGES
ASSUMPTIONS BASED ON SCREEN SIZE
IT’S ALL ABOUT DEFINING THE CONTEXT
Find store...
1 2 3 4 ...MO
BILE
FIR
ST R
ESPO
NSI
VE D
ESIG
N
ON THE GO
Find store...
1 2 3 4 ...
DEVICE CONTEXT
MO
BILE
FIR
ST R
ESPO
NSI
VE D
ESIG
N
CONTEXT
Find store...
1 2 3 4 ...
Find store...
1 2 3 4 ...
Find store...
1 2 3 ...
DEVICE CONTEXT
MO
BILE
FIR
ST R
ESPO
NSI
VE D
ESIG
N
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
MO
BILE
FIR
ST R
ESPO
NSI
VE D
ESIG
N
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
DEVICE CONTEXT
MO
BILE
FIR
ST R
ESPO
NSI
VE D
ESIG
N
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
DEVICE CONTEXT
MO
BILE
FIR
ST R
ESPO
NSI
VE D
ESIG
N
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
DEVICE CONTEXT
MO
BILE
FIR
ST R
ESPO
NSI
VE D
ESIG
N
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
BUSINESS CONTEXT
MO
BILE
FIR
ST R
ESPO
NSI
VE D
ESIG
N
AT THE AIRPORT
BUSINESS CONTEXT
MO
BILE
FIR
ST R
ESPO
NSI
VE D
ESIG
N
CONTEXT
BUSINESS CONTEXT
MO
BILE
FIR
ST R
ESPO
NSI
VE D
ESIG
N
CONTEXT
KNOWN IP-RANGE: AT THE AIRPORT
BUSINESS CONTEXT
MO
BILE
FIR
ST R
ESPO
NSI
VE D
ESIG
N
CONTEXT
KNOWN IP-RANGE: AT THE AIRPORT
KNOWN FLIGHT NUMBER: LAST CHECK-IN
BUSINESS CONTEXT
PUTTING IT ALL TOGETHER
MO
BILE
FIR
ST R
ESPO
NSI
VE D
ESIG
N
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
DEV
ICE
BUSI
NES
S...
TOUCH SCREEN: SUPPORT GESTURES
MO
BILE
FIR
ST R
ESPO
NSI
VE D
ESIG
N
CSS
& M
EDIA
QU
ERIE
SW
EB C
OM
PON
ENTS
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.”
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)
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)
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 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>
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/>
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
CONSIDERATIONSREQUESTS
ONLY ADAPTIVE TO SCREEN SIZEUX, SEO & ANALYTICS
?
