Tuesday, March 22, 2011

Mobile HTML5 by Scott Davis @ HTML5 user group

Mobile phones have become very pervasive.

Apple sold 4.1 macs in 4qtr 2010, 7.3 ipad, 9.1 ipod, 16.3 iphone : 35M mobile vs 4.1 laptops. mobile devices are outselling pcs for first time per IDC

Native vs HTML5 on mobile

  • Native app:

    • great way to sell the app, join one of the app store (apple, andorid marketplace, amazon). they take care of credit card processing etc
    • downside : vetting process
    • have to learn a new language/platform
  • html5

    • basecamp mobile is html5, netflix on other side has an army of developers for each platform
  • change a website a bit to be mobile friendly*

    • mobile resolution on phone is lower than desktop, tablets are closer
    • css3 can do media queries : have css classes based on resolution and web vs mobile
    • portrait vs landscape : css rules for portrait & landscape, cant force an orientation
    • use html5 form elements ( can use in web as they all default automatically to string even in legacy browers)
    • Modernizer library for detecting html5
    • href elemnets like tel:, sms: ( similar to mailto:) ( maps apps open up just with href to google maps)
    • touch & gesture events ( no hover events )
      • remember to cancel default event (which is scrolling), can do on divs
  • change a website a lot to be mobile friendly

    • Localviews, remote data, application cache, local storage
    • Localviews : all “pages” are divs, all “links” show or hide divs, all data is “Ajax call away”
    • application cache: has state, has programatic control
    • local storage: survives browser reboots, session storage cleans on browser reboot

No comments:

Post a Comment