HTML5 for Tablets and Mobile

@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