Mobile Web - Merging responsive and adaptive techniques
Upcoming SlideShare
Loading in...5
×
 

Mobile Web - Merging responsive and adaptive techniques

on

  • 1,659 views

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

Statistics

Views

Total Views
1,659
Views on SlideShare
1,278
Embed Views
381

Actions

Likes
3
Downloads
29
Comments
0

4 Embeds 381

http://opengroup-dev.localhost 356
http://localhost 18
https://twitter.com 5
http://qa40-lb.eng.ec2.socialinsoma.com 2

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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 Mobile Web - Merging responsive and adaptive techniques Presentation Transcript

  • 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