Mobile Web - Merging responsive and adaptive techniques

44 %
56 %
Information about Mobile Web - Merging responsive and adaptive techniques
Technology

Published on March 1, 2014

Author: franciscomsferreira

Source: slideshare.net

Description

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 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 • Building adaptive pathways with LESS Mobile web 4

Mobile web Mobile web 5

Strategies • Classic (No mobile optimization) • Adaptive (Different versions for different targets) • Responsive (Auto adjusting design) Mobile web 6

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! Adaptive vs Responsive 12

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 – Similar journey – One code base Adaptive vs Responsive 21

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 - commentBlockWidget.less - commentWidget.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 <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

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

New structure less/ - main.less - sharedVariables.less - devices/ - mobile.less - desktop.less - widgets/ - navigationWidget.less - blogArticleWidget.less - commentBlockWidget.less - commentWidget.less Less pathways 29

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

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

.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

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

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

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 > .widget { width: 33%; } } Let’s talk widgets 43

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

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

Add a comment

Related presentations

Related pages

Merging responsive and adaptive techniques for mobile web ...

In this high performance mobile web talk, Francisco Ferreira, an Agile Software Engineer at eBay, explains how Responsive Web fits with Adaptive ...
Read more

Mobile web - merging responsive and adaptive techniques by ...

The aim of this talk is to explain how the responsive web development lives within adaptive. By using simple techniques and highly specialized widget's we ...
Read more

Mobile Web - Merging responsive and adaptive techniques ...

... Merging responsive and adaptive techniques; Mobile Web - Merging responsive and adaptive ... Share Mobile Web - Merging responsive and adaptive techniques.
Read more

Responsive Web Layouts for Mobile Screens: Intro, Tips and ...

... responsive web design could be the ... Beautiful Boilerplate for Responsive Mobile Design; Going from adaptive ... I hope these tips and ...
Read more

Responsive Design Approaches For Mobile & Desktop

Collaborating Responsive Design Approaches For Mobile ... Here’s hoping the idea of merging responsive design techniques for ... Why Responsive Web ...
Read more

Csaba Palfi - kweekweek.com

Merging responsive and adaptive techniques for mobile web ...
Read more

HTML5DevConf: Francisco Ferreira, eBay: Mobile Web ...

The aim of this talk is to explain how the responsive web development lives within adaptive. By using simple techniques and highly specialized ...
Read more

jQuery Europe 2014, Vienna, 28th of February - 1st of ...

This talk will not only take a look at how the jQuery Mobile and ... adaptive techniques for mobile web. ... Merging responsive and adaptive techniques ...
Read more

Mobiconf - Experience the World of Mobile Development

AGENDA DAY 1 | DAY 2 Thursday. ... Mobile Web, merging responsive and adaptive techniques ... Tools and Techniques that help maintain a high quality code ...
Read more