Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Mobile Web - Merging responsive and adaptive techniques

5.347 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

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

×