Mobile Web - Merging responsive and adaptive techniques

  • 2,025 views
Uploaded on

Presentation given at jQuery Europe 2014 …

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,025
On Slideshare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
34
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    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.

Transcript

  • 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
  • 5. Mobile web Mobile web 5
  • 6. Strategies • Classic (No mobile optimization) • Adaptive (Different versions for different targets) • Responsive (Auto adjusting design) Mobile web 6
  • 7. ADAPTIVE VS RESPONSIVE
  • 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
  • 23. Lesscss (.org) Less pathways 23
  • 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
  • 33. Using less mixins less/devices/mobile.less less/devices/desktop.less Less pathways 33
  • 34. RESPONSIFYING
  • 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. .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
  • 40. LET’S TALK WIDGETS
  • 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
  • 53. @fmsf303 franciscomsferreira.blogspot.com