Intel Confidential — Do Not Forward

Using Responsive Design in the Mobile WebHTML5DevConf

Chris Perkins - Intel

2

Introductory Equations

Someone told me that each equation I included in the book would halve the sales – Stephen Hawking

Speaker = Chris Perkins

Layout + Mobile Web = Challenging

Design Choices x Technologies x Libraries x Devices > Number.MAX_VALUE

3

Responsive Design

Power has to be insecure to be responsive – Ralph Nader

Designing a layout that works on a variety of screen sizes, orientations, and devices. The design responds to its environment.

vs. Adaptive Design

Includes

@media queries

%, em (vw & vh) coordinates

redirects

javascript

4

Click icon to add picture

@media queries

The Basics

@media

min-width: / max-width

orientation: landscape / portrait

and https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

device-width, aspect-ratio, etc.

only, not

print, screen, handheld, all, …

5

Click icon to add picture

Retina Images

background-image css property

Q: what about <img> tag? A: Use JS. Google “retina <img>”

<img src=“little_baby.jpg” data-src2x=“big_baby.jpg”>

6

Landscape / Portrait Only

You don’t change the course of history by turning the faces of portraits to the wall – Jawaharlal Nehru

Cordova config.xml (for Cordova CLI or PhoneGapBuild)

<preference name="orientation" value="portrait" />

Intel XDK

Projects Pane Settings (once for each desired platform)

Only for Builds (not Emulator or Previewing)

7

Click icon to add picture

layout

@media & float

Floating boxes float:left

min-width:250px

margin:0px

box-sizing:border-box

@media queries set width 25% for 1000px or greater

– 4 x 250 = 1000

33% for 750 – 1000– 3 x 250 = 750

8

@media & float : Frameworks and Tools

-

Grid Systems

Zurb Foundation (foundation.zurb.com)

Twitter Bootstrap

960.gs

Many others

Tools

Adobe Edge Reflow

Intel XDK (App Designer)

9

Click icon to add picture

layout

flexbox Much Simpler.

Just works.

Supposedly less well supported– Android 4.3 and earlier use “old” spec.

– May require –webkit prefix– Crosswalk OK

– IE 11 OK. IE 10 uses 2012 spec.– http://caniuse.com/#search=flexbox

10

Click icon to add picture

javascript & @media

- window.matchMedia(‘(max-width:

400px)’)

{ – media: {String}, – matches:{Boolean}, – removeListener:{Function}, – addListener:{Function} }

‘(max-width:400px) and (orientation:landscape)’ etc. OK

But no @media

11

redirect

JavaScript is only redirect solution for Cordova/PhoneGap apps

Issues

A full “restart” of app– At start: palatable– While running: difficult

– OK for phone versus tablet. – But bad choice for portrait vs. landscape.

Burden of transferring application state – via localStorage etc

deviceready

Summary: Single Page App is still your best friend.

12

Click icon to add picture

Vertical sizing

- Sizing of element vs text

vh, vmax/vmin not backward compatible on Android

em & rem

Zoom via meta– <meta name="viewport" content="initial-scale=2">

– Not well supported.– Tricky.

@viewport ?– Draft. Unsupported.

13

Links

-

https://github.com/cperkinsintel/responsive_design_pres

http://xdk-software.intel.com/

Intel Confidential — Do Not Forward