Using Responsive Design in the Mobile Web

1. Using Responsive Design in the Mobile Web
HTML5DevConf
Chris Perkins - Intel
Intel Confidential — Do Not Forward

2. 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. 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. @media queries
4
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. Retina Images
5
 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. 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. layout
7
@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. 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. layout
9
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. javascript & @media
10
-
 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. 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. Vertical sizing
12
-
 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. 13
Links
-
 https://github.com/cperkinsintel/responsive_design_pres
 http://xdk-software.intel.com/

14. Intel Confidential — Do Not Forward