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.
15. “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
17. 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; } }
HTML5 for Tablets & Mobile DevicesThis 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.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.
http://www.quirksmode.org/blog/archives/2011/06/mobile_browser_9.html20% in India, 11% in Indonesia. Compares to 6% in US and UK.Unfortunately, development countries largely on Opera Mini and Nokia
Q1 2011 PC sales slide for first time (down 3%): http://www.businessinsider.com/trouble-for-microsoft-pc-market-tanks-in-q1-2011-4Smart Phone Q1 2011 shipments: http://www.pdasnews.com/articles/idc-smartphone-shipment-figures-for-q1-2011.htmlThis is a trend now. First time SmartPhones out shipped PCs was Q42010. Stories from that time:http://www.chrisumiastowski.com/smartphone-market-bigger-than-pc-market-what-does-it-meanhttp://www.readwriteweb.com/archives/smartphones_outsell_pcs.php
Density of pixel displays:http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density
http://www.webdesignerwall.com/tutorials/css3-media-queries/http://www.w3.org/TR/css3-mediaqueries/Code for targeting iPhone: http://perishablepress.com/press/2010/10/20/target-iphone-and-ipad-with-css3-media-queries/
http://matt.might.net/articles/how-to-native-iphone-ipad-apps-in-javascript/http://html5boilerplate.com/docs/#the-markuphttp://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html#//apple_ref/doc/uid/TP40008193Discussion of viewport and older mobile meta tags: http://davidbcalhoun.com/tag/handheldfriendly
Article on iPhone touch considerations: http://oreilly.com/iphone/excerpts/iphone-programming-user/touch-patterns.html
http://www.digitaltrends.com/mobile/smartphone-buyers-dont-care-about-4g-yet-study-shows/http://www.informationweek.com/news/mobility/3G/231000200Current generation of smartphone buyers not interest in paying premium for 4G or faster phones.