MOBILE WEB

Merging adaptive and responsive techniques

FRANCISCO M.S. FERREIRAAgile Software Engineer

@fmsf303

MOBILE WEB

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 5

Mobile web

Mobile web 6

Strategies

• Classic (No mobile optimization)

• Adaptive (Different versions for different targets)

• Responsive (Auto adjusting design)

ADAPTIVE VS RESPONSIVE

8

Adaptive web origins

Adaptive vs responsive

9

Adaptive web origins

Adaptive vs Responsive

10

Adaptive web

Adaptive vs Responsive

11

Responsive web origins

Adaptive vs Responsive

12

Responsive web origins

Adaptive vs Responsive

13

Responsive Web

Adaptive vs Responsive

14

Responsive Web

Adaptive vs Responsive

15

Responsive Web

Adaptive vs Responsive

16

Responsive Web

Adaptive vs Responsive

17

Intersection

Adaptive vs Responsive

18

Intersection

Adaptive vs Responsive

19

Intersection

Adaptive vs Responsive

20

Intersection

Adaptive vs Responsive

21

Intersection

Adaptive vs Responsive

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

• ‘w’ decreases– Similar journey– One code base

LESS PATHWAYS

Less pathways 23

Lesscss (.org)

Less pathways 24

Modularity (i.e.: topCategoryDeals.less)

Less pathways 25

Less structure

less/ - main.less - sharedVariables.less - widgets/ - navigationWidget.less - blogArticleWidget.less - commentBlockWidget.less - commentWidget.less

Less pathways 26

Less structure

less/ - main.less - sharedVariables.less - widgets/ - navigationWidget.less - blogArticleWidget.less - commentBlockWidget.less - commentWidget.less

Less pathways 27

Less structure

less/ - main.less - sharedVariables.less - widgets/ - navigationWidget.less - blogArticleWidget.less - commentBlockWidget.less - commentWidget.less

<link type="text/css" rel="stylesheet" href="/css/main.css" />

Less pathways 28

main.less

less/ - main.less - sharedVariables.less - widgets/ - navigationWidget.less - blogArticleWidget.less - commentBlockWidget.less - commentWidget.less

<link type="text/css" rel="stylesheet" href="/css/main.css" />

Less pathways 29

New structure

less/ - main.less - sharedVariables.less - devices/ - mobile.less - desktop.less - widgets/ - navigationWidget.less - blogArticleWidget.less - commentBlockWidget.less - commentWidget.less

Less pathways 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 31

Using less mixins

Less pathways 32

Using less mixins

less/devices/mobile.less

Less pathways 33

Using less mixins

less/devices/mobile.less

less/devices/desktop.less

RESPONSIFYING

35

Grid systems

Responsifying

36

Traditional grid system issues

Responsifying

37

Traditional grid system issues

Responsifying

38

Traditional grid system issues

Responsifying

Mobile

39

Traditional grid system issues

Responsifying

Extra Markup

LET’S TALK WIDGETS

Let’s talk widgets 41

A widget!

Let’s talk widgets 42

Widget golden rule

.widget {

width: 100%;

}

Let’s talk widgets 43

Parent sets child widgets width

.widget {

width: 100%;

> .widget {

width: 33%;

}

}

Let’s talk widgets 44

Very simple media queries

.widget {

width: 100%;

> .widget {

width: 33%;

@media screen and (max-width: 420px) {

width: 50%;

}

}

}

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

Everything is a widget

Let’s talk widgets 49

Nearly everything is a widget

Let’s talk widgets 50

Birds eye view

Let’s talk widgets 51

Modularity (i.e.: topCategoryDeals.less)

Let’s talk widgets 52

Modularity (i.e.: topCategoryDeals.less)

?

@fmsf303

franciscomsferreira.blogspot.com