Your SlideShare is downloading. ×
0
Mobile Web - Merging responsive and adaptive techniques
Mobile Web - Merging responsive and adaptive techniques
Mobile Web - Merging responsive and adaptive techniques
Mobile Web - Merging responsive and adaptive techniques
Mobile Web - Merging responsive and adaptive techniques
Mobile Web - Merging responsive and adaptive techniques
Mobile Web - Merging responsive and adaptive techniques
Mobile Web - Merging responsive and adaptive techniques
Mobile Web - Merging responsive and adaptive techniques
Mobile Web - Merging responsive and adaptive techniques
Mobile Web - Merging responsive and adaptive techniques
Mobile Web - Merging responsive and adaptive techniques
Mobile Web - Merging responsive and adaptive techniques
Mobile Web - Merging responsive and adaptive techniques
Mobile Web - Merging responsive and adaptive techniques
Mobile Web - Merging responsive and adaptive techniques
Mobile Web - Merging responsive and adaptive techniques
Mobile Web - Merging responsive and adaptive techniques
Mobile Web - Merging responsive and adaptive techniques
Mobile Web - Merging responsive and adaptive techniques
Mobile Web - Merging responsive and adaptive techniques
Mobile Web - Merging responsive and adaptive techniques
Mobile Web - Merging responsive and adaptive techniques
Mobile Web - Merging responsive and adaptive techniques
Mobile Web - Merging responsive and adaptive techniques
Mobile Web - Merging responsive and adaptive techniques
Mobile Web - Merging responsive and adaptive techniques
Mobile Web - Merging responsive and adaptive techniques
Mobile Web - Merging responsive and adaptive techniques
Mobile Web - Merging responsive and adaptive techniques
Mobile Web - Merging responsive and adaptive techniques
Mobile Web - Merging responsive and adaptive techniques
Mobile Web - Merging responsive and adaptive techniques
Mobile Web - Merging responsive and adaptive techniques
Mobile Web - Merging responsive and adaptive techniques
Mobile Web - Merging responsive and adaptive techniques
Mobile Web - Merging responsive and adaptive techniques
Mobile Web - Merging responsive and adaptive techniques
Mobile Web - Merging responsive and adaptive techniques
Mobile Web - Merging responsive and adaptive techniques
Mobile Web - Merging responsive and adaptive techniques
Mobile Web - Merging responsive and adaptive techniques
Mobile Web - Merging responsive and adaptive techniques
Mobile Web - Merging responsive and adaptive techniques
Mobile Web - Merging responsive and adaptive techniques
Mobile Web - Merging responsive and adaptive techniques
Mobile Web - Merging responsive and adaptive techniques
Mobile Web - Merging responsive and adaptive techniques
Mobile Web - Merging responsive and adaptive techniques
Mobile Web - Merging responsive and adaptive techniques
Mobile Web - Merging responsive and adaptive techniques
Mobile Web - Merging responsive and adaptive techniques
Mobile Web - Merging responsive and adaptive techniques
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Mobile Web - Merging responsive and adaptive techniques

2,525

Published 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

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

No Downloads
Views
Total Views
2,525
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
39
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

    ×