@toddanglin
31% of all Internet use in Nigeria is
mobile
The Internet is Mobile
100m 81m
Which devices matter?
iOS Android Symbian RIM MSFT …
69%
USA
58%
UK
32%
CN98%
KRWEBKIT
HTML5 standard maximizes reusability
considerations
1.Native-ness2.Screen Size3.Interaction4.Look-and-
feel5.Bandwidth
What is a “native” app?
HTML5 “Native”Looks right. * Feels right. * Available offline. * Installable. * In App Store. X Runs everywhere. X
Premium APIs X
When is a pixel not a pixel?
980px320px
CSS pixelsvs.
Physical Pixels
“If the pixel density of the output device is very different from that of a
typical computer display, the user agent should rescale pixel values.”
- CSS 2.1
ViewPort• Configurable
<meta name="viewport" content="width=device-width, initial-scale=1.0">Optional: user-scalable=no
target-densitydpi=device-dpi (Android Only)
media queries• Target styles to specific devices…– And features!
/*These two rules do the same thing*/@media all and (min-width:500px) { … } @media (min-width:500px) { … }
/*Multiple conditions*/@media only screen and (min-width: 600px) and (max-width: 900px) { .class { background: #333; }}
<meta>• Rendering hints for mobile browsers
<meta name="viewport" content="width=device-width, initial-scale=1.0">Optional: user-scalable=no
target-densitydpi=device-dpi (Android Only)
<!--iOS specific--><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black" /><link rel="apple-touch-icon" href="./apple-touch-icon.png" />
It’s a Touch,Not a Click. Right?
Touch
• Events– touchstart– touchmove– touchend– touchcancel– gesturestart*– gesturechange*– gestureend*
touch
• Accuracy– Size– Shape– Placement– Overlapping
frameworks
Mobile Internet is unpredictable.
bandwidth
• Optimize design– Clicks/Screens– Graphics
• Selectively load resources
Future
• “Windows 8”• Chrome OS• Facebook
@htmlui
Resources
