O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
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
Próximos SlideShares
Carregando em…5
×

de

Mobile Web - Merging responsive and adaptive techniques Slide 1 Mobile Web - Merging responsive and adaptive techniques Slide 2 Mobile Web - Merging responsive and adaptive techniques Slide 3 Mobile Web - Merging responsive and adaptive techniques Slide 4 Mobile Web - Merging responsive and adaptive techniques Slide 5 Mobile Web - Merging responsive and adaptive techniques Slide 6 Mobile Web - Merging responsive and adaptive techniques Slide 7 Mobile Web - Merging responsive and adaptive techniques Slide 8 Mobile Web - Merging responsive and adaptive techniques Slide 9 Mobile Web - Merging responsive and adaptive techniques Slide 10 Mobile Web - Merging responsive and adaptive techniques Slide 11 Mobile Web - Merging responsive and adaptive techniques Slide 12 Mobile Web - Merging responsive and adaptive techniques Slide 13 Mobile Web - Merging responsive and adaptive techniques Slide 14 Mobile Web - Merging responsive and adaptive techniques Slide 15 Mobile Web - Merging responsive and adaptive techniques Slide 16 Mobile Web - Merging responsive and adaptive techniques Slide 17 Mobile Web - Merging responsive and adaptive techniques Slide 18 Mobile Web - Merging responsive and adaptive techniques Slide 19 Mobile Web - Merging responsive and adaptive techniques Slide 20 Mobile Web - Merging responsive and adaptive techniques Slide 21 Mobile Web - Merging responsive and adaptive techniques Slide 22 Mobile Web - Merging responsive and adaptive techniques Slide 23 Mobile Web - Merging responsive and adaptive techniques Slide 24 Mobile Web - Merging responsive and adaptive techniques Slide 25 Mobile Web - Merging responsive and adaptive techniques Slide 26 Mobile Web - Merging responsive and adaptive techniques Slide 27 Mobile Web - Merging responsive and adaptive techniques Slide 28 Mobile Web - Merging responsive and adaptive techniques Slide 29 Mobile Web - Merging responsive and adaptive techniques Slide 30 Mobile Web - Merging responsive and adaptive techniques Slide 31 Mobile Web - Merging responsive and adaptive techniques Slide 32 Mobile Web - Merging responsive and adaptive techniques Slide 33 Mobile Web - Merging responsive and adaptive techniques Slide 34 Mobile Web - Merging responsive and adaptive techniques Slide 35 Mobile Web - Merging responsive and adaptive techniques Slide 36 Mobile Web - Merging responsive and adaptive techniques Slide 37 Mobile Web - Merging responsive and adaptive techniques Slide 38 Mobile Web - Merging responsive and adaptive techniques Slide 39 Mobile Web - Merging responsive and adaptive techniques Slide 40 Mobile Web - Merging responsive and adaptive techniques Slide 41 Mobile Web - Merging responsive and adaptive techniques Slide 42 Mobile Web - Merging responsive and adaptive techniques Slide 43 Mobile Web - Merging responsive and adaptive techniques Slide 44 Mobile Web - Merging responsive and adaptive techniques Slide 45 Mobile Web - Merging responsive and adaptive techniques Slide 46 Mobile Web - Merging responsive and adaptive techniques Slide 47 Mobile Web - Merging responsive and adaptive techniques Slide 48 Mobile Web - Merging responsive and adaptive techniques Slide 49 Mobile Web - Merging responsive and adaptive techniques Slide 50 Mobile Web - Merging responsive and adaptive techniques Slide 51 Mobile Web - Merging responsive and adaptive techniques Slide 52 Mobile Web - Merging responsive and adaptive techniques Slide 53
Próximos SlideShares
Getting touchy - Introduction to touch (and pointer) events / jQuery Europe 2014 / Vienna 28.02.2014
Avançar
Transfira para ler offline e ver em ecrã inteiro.

4 gostaram

Compartilhar

Baixar para ler offline

Mobile Web - Merging responsive and adaptive techniques

Baixar para ler offline

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

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
  • geoffnet

    Oct. 21, 2014
  • oldsport

    Mar. 16, 2014
  • umbert10

    Mar. 11, 2014
  • richaankit

    Mar. 6, 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

Vistos

Vistos totais

5.415

No Slideshare

0

De incorporações

0

Número de incorporações

993

Ações

Baixados

43

Compartilhados

0

Comentários

0

Curtir

4

×