MOBILE WEB

Merging adaptive and responsive techniques
FRANCISCO M.S. FERREIRA
Agile Software Engineer

@fmsf303
MOBILE WEB
What to expect from this talk?

• What is an adaptive web site
• What is a responsive web site
• Responsive web widgets
• ...
Mobile web

Mobile web

5
Strategies

• Classic (No mobile optimization)
• Adaptive (Different versions for different targets)
• Responsive (Auto ad...
ADAPTIVE VS RESPONSIVE
Adaptive web origins

We need a
mobile site

Adaptive vs responsive

8
Adaptive web origins

We need a
mobile site

Story: build a mobile experience

Adaptive vs Responsive

9
Adaptive web

Adaptive vs Responsive

10
Responsive web origins

We should have the
same experience in
mobile and desktop

Adaptive vs Responsive

11
Responsive web origins

We should have the
same experience in
mobile and desktop

It will also cut
maintenance costs!

Ada...
Responsive Web

Adaptive vs Responsive

13
Responsive Web

Adaptive vs Responsive

14
Responsive Web

Adaptive vs Responsive

15
Responsive Web

Adaptive vs Responsive

16
Intersection

Adaptive web

Adaptive vs Responsive

17
Intersection

Adaptive web
Responsive Web

Adaptive vs Responsive

18
Intersection

Adaptive web
Responsive Web

w

Adaptive vs Responsive

19
Intersection

Adaptive web
Responsive Web

w

Adaptive vs Responsive

20
Intersection

• ‘w’ increases
– Different user journey
– Bigger code base

Adaptive web
Responsive Web

w

• ‘w’ decreases...
LESS PATHWAYS
Lesscss (.org)

Less pathways

23
Modularity (i.e.: topCategoryDeals.less)

Less pathways

24
Less structure

less/
- main.less
- sharedVariables.less
- widgets/
- navigationWidget.less
- blogArticleWidget.less
- com...
Less structure

less/
- main.less
- sharedVariables.less
- widgets/
- navigationWidget.less
- blogArticleWidget.less
- com...
Less structure
<link type="text/css" rel="stylesheet" href="/css/main.css" />

less/
- main.less
- sharedVariables.less
- ...
main.less
<link type="text/css" rel="stylesheet" href="/css/main.css" />
less/
- main.less
- sharedVariables.less
- widget...
New structure

less/
- main.less
- sharedVariables.less
- devices/
- mobile.less
- desktop.less
- widgets/
- navigationWid...
What about mobile tweaks?

less/
- main.less
- sharedVariables.less
- devices/
- mobile.less
- desktop.less
- widgets/
- n...
Using less mixins

Less pathways

31
Using less mixins

less/devices/mobile.less

Less pathways

32
Using less mixins

less/devices/mobile.less

less/devices/desktop.less

Less pathways

33
RESPONSIFYING
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
.content

Traditional grid system issues

.content

.row
.col-md-6

.col-md-6

.row
.col-md-6

.col-md-6

.row
.row

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

Mob...
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...
LET’S TALK WIDGETS
A widget!

.widget

Let’s talk widgets

41
Widget golden rule

.widget

.widget {
width: 100%;
}

Let’s talk widgets

42
Parent sets child widgets width

.widget {
width: 100%;
.widget
.widget

.widget

.widget

.widget

.widget

.widget

> .w...
Very simple media queries
.widget
.widget

.widget

.widget

.widget

.widget

.widget {
width: 100%;

.widget

> .widget ...
Everything is a widget

Let’s talk widgets

45
Everything is a widget

Let’s talk widgets

46
Everything is a widget

Let’s talk widgets

47
Everything is a widget

Let’s talk widgets

48
Nearly everything is a widget

Let’s talk widgets

49
Birds eye view

Let’s talk widgets

50
Modularity (i.e.: topCategoryDeals.less)

Let’s talk widgets

51
Modularity (i.e.: topCategoryDeals.less)

Let’s talk widgets

52
@fmsf303

franciscomsferreira.blogspot.com
Upcoming SlideShare
Loading in...5
×

Mobile Web - Merging responsive and adaptive techniques

2,660

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
2,660
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
40
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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×