Contenu connexe Similaire à Mobile Web - Merging responsive and adaptive techniques (20) Mobile Web - Merging responsive and adaptive techniques4. 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
4
6. Strategies
• Classic (No mobile optimization)
• Adaptive (Different versions for different targets)
• Responsive (Auto adjusting design)
Mobile web
6
12. Responsive web origins
We should have the
same experience in
mobile and desktop
It will also cut
maintenance costs!
Adaptive vs Responsive
12
21. Intersection
• ‘w’ increases
– Different user journey
– Bigger code base
Adaptive web
Responsive Web
w
• ‘w’ decreases
– Similar journey
– One code base
Adaptive vs Responsive
21
25. Less structure
less/
- main.less
- sharedVariables.less
- widgets/
- navigationWidget.less
- blogArticleWidget.less
- commentBlockWidget.less
- commentWidget.less
Less pathways
25
26. Less structure
less/
- main.less
- sharedVariables.less
- widgets/
- navigationWidget.less
- blogArticleWidget.less
- commentBlockWidget.less
- commentWidget.less
Less pathways
26
27. Less structure
<link type="text/css" rel="stylesheet" href="/css/main.css" />
less/
- main.less
- sharedVariables.less
- widgets/
- navigationWidget.less
- blogArticleWidget.less
- commentBlockWidget.less
- commentWidget.less
Less pathways
27
28. main.less
<link type="text/css" rel="stylesheet" href="/css/main.css" />
less/
- main.less
- sharedVariables.less
- widgets/
- navigationWidget.less
- blogArticleWidget.less
- commentBlockWidget.less
- commentWidget.less
Less pathways
28
29. New structure
less/
- main.less
- sharedVariables.less
- devices/
- mobile.less
- desktop.less
- widgets/
- navigationWidget.less
- blogArticleWidget.less
- commentBlockWidget.less
- commentWidget.less
Less pathways
29
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
30
36. .content
Traditional grid system issues
.content
.row
.col-md-6
.col-md-6
.row
.col-md-6
.col-md-6
.row
.row
.col-md-12
.col-md-12
.row
.row
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-4
Responsifying
36
38. Traditional grid system issues
.row
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.row
.col-md-4
Mobile
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-4
Responsifying
38
39. Traditional grid system issues
.row
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.row
.col-md-4 .col-xs-6
Extra Markup
.col-md-4 .col-xs-6
.col-md-4 .col-xs-6
.col-md-4 .col-xs-6
.col-md-4 .col-xs-6
.col-md-4 .col-xs-6
Responsifying
39
43. Parent sets child widgets width
.widget {
width: 100%;
.widget
.widget
.widget
.widget
.widget
.widget
.widget
> .widget {
width: 33%;
}
}
Let’s talk widgets
43
44. Very simple media queries
.widget
.widget
.widget
.widget
.widget
.widget
.widget {
width: 100%;
.widget
> .widget {
width: 33%;
@media screen and (max-width: 420px) {
width: 50%;
}
.widget
.widget
}
.widget
}
.widget
.widget
.widget
.widget
Let’s talk widgets
44
Notes de l'éditeur I came here to talk to you about mobile web. Multi screen web - You shouldn’t look at it as DESKTOP WEB AND MOBILE WEB Do demo here And less allows you to import the various modules I would like to propose a new structure let’s add a devices folder and two new less files, a mobile.less and a desktop.less You get a optimal CSS that contains only the things needed for mobile or desktop.