HTML5 for Tablets and Mobile
Upcoming SlideShare
Loading in...5
×
 

HTML5 for Tablets and Mobile

on

  • 8,837 views

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 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.

Statistics

Views

Total Views
8,837
Views on SlideShare
7,574
Embed Views
1,263

Actions

Likes
2
Downloads
67
Comments
0

5 Embeds 1,263

http://www.telerikwatch.com 1133
http://feeds.feedburner.com 90
url_unknown 34
http://www.newsblur.com 3
http://feedly.com 3

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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
  • Q1 2011 Worldwide DataiOS = 16.8%Android = 36%Symbian = 27.4%RIM = 12.9%MSFT = 3.6%Other = 3.3%Browser share stats (Q1 2011): http://www.quirksmode.org/blog/archives/2011/06/mobile_browser_9.html
  • Looks right.Feels right.Available anytime.“Installable.”In an app store?
  • When is a pixel not a pixel?Visual vs. Layout ViewPort
  • http://www.quirksmode.org/mobile/viewports2.htmlhttp://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.htmlhttps://developer.mozilla.org/en/Mobile/Viewport_meta_tag
  • https://developer.mozilla.org/en/Mobile/Viewport_meta_tag#A_pixel_is_not_a_pixel
  • 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.the-m-project.org/http://www.appcelerator.com/products/titanium-mobile-application-development/http://jquerymobile.com/http://jqtouch.com/http://www.sencha.com/products/touch/Good comparison:http://stackoverflow.com/questions/5063117/choosing-mobile-web-html5-framework
  • 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.
  • Motorola device images: http://mediacenter.motorola.com/imagelibrary/default.aspx?SubjectID=195LG images: http://www.lgnewsroom.com/ces2011/list.php?product_type=1HP Palm:http://www.hpwebos.com/us/company/media-library/media-library.html?checkbox-accept=acceptRIM/Blackberry:http://www.rim.com/newsroom/mediagallery/Apple: http://www.apple.com/pr/products/

HTML5 for Tablets and Mobile HTML5 for Tablets and Mobile Presentation Transcript

  • @toddanglin
  • 31% of all Internet use in Nigeria is mobile
  • The Internet is Mobile
  • 100m
    81m
  • Which devices matter?
  • iOS
    Android
    Symbian
    RIM
    MSFT

    KR
    WEBKIT
    98%
    USA
    69%
    UK
    58%
    CN
    32%
  • HTML5 standard maximizes reusability
  • considerations
    Native-ness
    Screen Size
    Interaction
    Look-and-feel
    Bandwidth
  • What is a “native” app?
  • When is a pixel not a pixel?
  • 320px
    980px
  • 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