Mobile Web - Merging responsive and adaptive techniques

5,109 views

Published on

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

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,109
On SlideShare
0
From Embeds
0
Number of Embeds
991
Actions
Shares
0
Downloads
42
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • 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.
  • Mobile Web - Merging responsive and adaptive techniques

    1. 1. MOBILE WEB Merging adaptive and responsive techniques
    2. 2. FRANCISCO M.S. FERREIRA Agile Software Engineer @fmsf303
    3. 3. MOBILE WEB
    4. 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
    5. 5. Mobile web Mobile web 5
    6. 6. Strategies • Classic (No mobile optimization) • Adaptive (Different versions for different targets) • Responsive (Auto adjusting design) Mobile web 6
    7. 7. ADAPTIVE VS RESPONSIVE
    8. 8. Adaptive web origins We need a mobile site Adaptive vs responsive 8
    9. 9. Adaptive web origins We need a mobile site Story: build a mobile experience Adaptive vs Responsive 9
    10. 10. Adaptive web Adaptive vs Responsive 10
    11. 11. Responsive web origins We should have the same experience in mobile and desktop Adaptive vs Responsive 11
    12. 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. 13. Responsive Web Adaptive vs Responsive 13
    14. 14. Responsive Web Adaptive vs Responsive 14
    15. 15. Responsive Web Adaptive vs Responsive 15
    16. 16. Responsive Web Adaptive vs Responsive 16
    17. 17. Intersection Adaptive web Adaptive vs Responsive 17
    18. 18. Intersection Adaptive web Responsive Web Adaptive vs Responsive 18
    19. 19. Intersection Adaptive web Responsive Web w Adaptive vs Responsive 19
    20. 20. Intersection Adaptive web Responsive Web w Adaptive vs Responsive 20
    21. 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. 22. LESS PATHWAYS
    23. 23. Lesscss (.org) Less pathways 23
    24. 24. Modularity (i.e.: topCategoryDeals.less) Less pathways 24
    25. 25. Less structure less/ - main.less - sharedVariables.less - widgets/ - navigationWidget.less - blogArticleWidget.less - commentBlockWidget.less - commentWidget.less Less pathways 25
    26. 26. Less structure less/ - main.less - sharedVariables.less - widgets/ - navigationWidget.less - blogArticleWidget.less - commentBlockWidget.less - commentWidget.less Less pathways 26
    27. 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. 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. 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. 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. 31. Using less mixins Less pathways 31
    32. 32. Using less mixins less/devices/mobile.less Less pathways 32
    33. 33. Using less mixins less/devices/mobile.less less/devices/desktop.less Less pathways 33
    34. 34. RESPONSIFYING
    35. 35. Grid systems .content .row .col-md-6 .col-md-6 .row .col-md-12 .row .col-md-4 .col-md-4 .col-md-4 Responsifying 35
    36. 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. 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. 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. 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
    40. 40. LET’S TALK WIDGETS
    41. 41. A widget! .widget Let’s talk widgets 41
    42. 42. Widget golden rule .widget .widget { width: 100%; } Let’s talk widgets 42
    43. 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. 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. 45. Everything is a widget Let’s talk widgets 45
    46. 46. Everything is a widget Let’s talk widgets 46
    47. 47. Everything is a widget Let’s talk widgets 47
    48. 48. Everything is a widget Let’s talk widgets 48
    49. 49. Nearly everything is a widget Let’s talk widgets 49
    50. 50. Birds eye view Let’s talk widgets 50
    51. 51. Modularity (i.e.: topCategoryDeals.less) Let’s talk widgets 51
    52. 52. Modularity (i.e.: topCategoryDeals.less) Let’s talk widgets 52
    53. 53. @fmsf303 franciscomsferreira.blogspot.com

    ×