Mobile Web - Merging responsive and adaptive techniques
•Als PPTX, PDF herunterladen•
4 gefällt mir•5,442 views
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.html
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (16)
Andere mochten auch
Andere mochten auch (20)
Ähnlich wie Mobile Web - Merging responsive and adaptive techniques
Ähnlich wie Mobile Web - Merging responsive and adaptive techniques (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Mobile Web - Merging responsive and adaptive techniques
- 1. MOBILE WEB Merging adaptive and responsive techniques
- 2. FRANCISCO M.S. FERREIRA Agile Software Engineer @fmsf303
- 3. 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 4
- 6. Strategies • Classic (No mobile optimization) • Adaptive (Different versions for different targets) • Responsive (Auto adjusting design) Mobile web 6
- 8. Adaptive web origins We need a mobile site Adaptive vs responsive 8
- 9. Adaptive web origins We need a mobile site Story: build a mobile experience Adaptive vs Responsive 9
- 10. Adaptive web Adaptive vs Responsive 10
- 11. Responsive web origins We should have the same experience in mobile and desktop Adaptive vs Responsive 11
- 12. Responsive web origins We should have the same experience in mobile and desktop It will also cut maintenance costs! Adaptive vs Responsive 12
- 13. Responsive Web Adaptive vs Responsive 13
- 14. Responsive Web Adaptive vs Responsive 14
- 15. Responsive Web Adaptive vs Responsive 15
- 16. Responsive Web Adaptive vs Responsive 16
- 17. Intersection Adaptive web Adaptive vs Responsive 17
- 18. Intersection Adaptive web Responsive Web Adaptive vs Responsive 18
- 19. Intersection Adaptive web Responsive Web w Adaptive vs Responsive 19
- 20. Intersection Adaptive web Responsive Web w Adaptive vs Responsive 20
- 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
- 22. LESS PATHWAYS
- 24. Modularity (i.e.: topCategoryDeals.less) Less pathways 24
- 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
- 31. Using less mixins Less pathways 31
- 32. Using less mixins less/devices/mobile.less Less pathways 32
- 34. RESPONSIFYING
- 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
- 37. .content Traditional grid system issues .row .col-md-6 .col-md-6 .row .col-md-12 .row .col-md-4 .col-md-4 .col-md-4 Responsifying 37
- 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
- 41. A widget! .widget Let’s talk widgets 41
- 42. Widget golden rule .widget .widget { width: 100%; } Let’s talk widgets 42
- 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
- 45. Everything is a widget Let’s talk widgets 45
- 46. Everything is a widget Let’s talk widgets 46
- 47. Everything is a widget Let’s talk widgets 47
- 48. Everything is a widget Let’s talk widgets 48
- 49. Nearly everything is a widget Let’s talk widgets 49
- 50. Birds eye view Let’s talk widgets 50
- 51. Modularity (i.e.: topCategoryDeals.less) Let’s talk widgets 51
- 52. Modularity (i.e.: topCategoryDeals.less) Let’s talk widgets 52
Hinweis der Redaktion
- 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.