mobile web - merging responsive and adaptive techniques
DESCRIPTION
Presentation given at jQuery Europe 2014 Helpers: Widget Based Architecture - http://franciscomsferreira.blogspot.co.at/2014/02/widget-based-architecture-mobile-web.html Less Mixins to leverage browser detection - http://franciscomsferreira.blogspot.co.at/2013/12/less-pathways-using-mixins-browser.htmlTRANSCRIPT
MOBILE WEB
Merging adaptive and responsive techniques
FRANCISCO M.S. FERREIRAAgile Software Engineer
@fmsf303
MOBILE WEB
Mobile web 4
What to expect from this talk?
• What is an adaptive web site
• What is a responsive web site
• Responsive web widgets
• Building adaptive pathways with LESS
Mobile web 5
Mobile web
Mobile web 6
Strategies
• Classic (No mobile optimization)
• Adaptive (Different versions for different targets)
• Responsive (Auto adjusting design)
ADAPTIVE VS RESPONSIVE
8
Adaptive web origins
Adaptive vs responsive
9
Adaptive web origins
Adaptive vs Responsive
10
Adaptive web
Adaptive vs Responsive
11
Responsive web origins
Adaptive vs Responsive
12
Responsive web origins
Adaptive vs Responsive
13
Responsive Web
Adaptive vs Responsive
14
Responsive Web
Adaptive vs Responsive
15
Responsive Web
Adaptive vs Responsive
16
Responsive Web
Adaptive vs Responsive
17
Intersection
Adaptive vs Responsive
18
Intersection
Adaptive vs Responsive
19
Intersection
Adaptive vs Responsive
20
Intersection
Adaptive vs Responsive
21
Intersection
Adaptive vs Responsive
• ‘w’ increases– Different user journey– Bigger code base
• ‘w’ decreases– Similar journey– One code base
LESS PATHWAYS
Less pathways 23
Lesscss (.org)
Less pathways 24
Modularity (i.e.: topCategoryDeals.less)
Less pathways 25
Less structure
less/ - main.less - sharedVariables.less - widgets/ - navigationWidget.less - blogArticleWidget.less - commentBlockWidget.less - commentWidget.less
Less pathways 26
Less structure
less/ - main.less - sharedVariables.less - widgets/ - navigationWidget.less - blogArticleWidget.less - commentBlockWidget.less - commentWidget.less
Less pathways 27
Less structure
less/ - main.less - sharedVariables.less - widgets/ - navigationWidget.less - blogArticleWidget.less - commentBlockWidget.less - commentWidget.less
<link type="text/css" rel="stylesheet" href="/css/main.css" />
Less pathways 28
main.less
less/ - main.less - sharedVariables.less - widgets/ - navigationWidget.less - blogArticleWidget.less - commentBlockWidget.less - commentWidget.less
<link type="text/css" rel="stylesheet" href="/css/main.css" />
Less pathways 29
New structure
less/ - main.less - sharedVariables.less - devices/ - mobile.less - desktop.less - widgets/ - navigationWidget.less - blogArticleWidget.less - commentBlockWidget.less - commentWidget.less
Less pathways 30
What about mobile tweaks?
less/ - main.less - sharedVariables.less - devices/ - mobile.less - desktop.less - widgets/ - navigationWidget.less - blogArticleWidget.less - commentBlockWidget.less - commentWidget.less
Less pathways 31
Using less mixins
Less pathways 32
Using less mixins
less/devices/mobile.less
Less pathways 33
Using less mixins
less/devices/mobile.less
less/devices/desktop.less
RESPONSIFYING
35
Grid systems
Responsifying
36
Traditional grid system issues
Responsifying
37
Traditional grid system issues
Responsifying
38
Traditional grid system issues
Responsifying
Mobile
39
Traditional grid system issues
Responsifying
Extra Markup
LET’S TALK WIDGETS
Let’s talk widgets 41
A widget!
Let’s talk widgets 42
Widget golden rule
.widget {
width: 100%;
}
Let’s talk widgets 43
Parent sets child widgets width
.widget {
width: 100%;
> .widget {
width: 33%;
}
}
Let’s talk widgets 44
Very simple media queries
.widget {
width: 100%;
> .widget {
width: 33%;
@media screen and (max-width: 420px) {
width: 50%;
}
}
}
Let’s talk widgets 45
Everything is a widget
Let’s talk widgets 46
Everything is a widget
Let’s talk widgets 47
Everything is a widget
Let’s talk widgets 48
Everything is a widget
Let’s talk widgets 49
Nearly everything is a widget
Let’s talk widgets 50
Birds eye view
Let’s talk widgets 51
Modularity (i.e.: topCategoryDeals.less)
Let’s talk widgets 52
Modularity (i.e.: topCategoryDeals.less)
?
@fmsf303
franciscomsferreira.blogspot.com