Upload
todd-anglin
View
7.931
Download
2
Tags:
Embed Size (px)
DESCRIPTION
The explosion of HTML5-ready tablets and mobile devices has been one of the primary forces behind HTML5’s rapid coming of age. Virtually all modern devices with a web browser have broad support for the technologies defined by HTML5, like Video, Geolocation, Offline Apps, Local Storage, and CSS3 styling, making them the perfect target for aggressive HTML5 development. Targeting the look-and-feel, touch-based input, and varying screen sizes of devices can be tricky, though. This session will introduce you to the essential concepts for targeting HTML5 devices, such as Media Queries and Viewport sizing, and provide you with the tips and tricks you need to successfully develop modern web apps for tablets and mobile devices today.
Citation preview
@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