HTML5, JavaScript, webdev

HTML5 On Mobile

This slideshow requires JavaScript.

It’s all about reading the map and see what other big gorillas are doing.

In the past few months, we saw that ‘web gorillas’ like Netflix, Facebook, Microsoft and others are putting their money on HTML5 for mobile. If you want to build an application that will run ‘everywhere’ – HTML5 is your best friend. Yesterday, jQuery Mobile moved to Beta, which is a great news for web developers. In a nutshell, jQuery Mobile is a touch optimized framework for smart phones (iPhone, Android, Palm, Windows phones and even Blackberry) & tablets (iPad, Android and others). It gives out of the box a unified user interface system across all popular mobile device platforms, built on jQuery and jQuery UI foundation. Since ‘Touch’ is the major way to interact with mobile web apps, here is a short summary of ‘the touch state of the union’:

What browsers are out there? well, you can use compatibility sites like: caniuse.com and PKK - quirksmode.org. In short, apple pushing their mobile Safari and just after them we have android browser. Opera mobile browser is also huge and you will want to check your app there as well. All these browsers should work with touch events web standard. Here are the main parts of the standard:
  • Core: touchstart touchmove touchend
  • Not: touchenter touchleave touchcancel
  • Touch lists: touches targetTouches changedTouches
  • Touch: target identifier x y

Some pro tips for mobile web developers:

    • Set a fixed viewport so when the user is double clicking we won’t have the zoom gesture. Here is the meta tag you need in the top of your page. However, I would recommend to leave the ability to zoom… it’s important feature that a lot of users want to have. In order to let them have it – remove: “user-scalable=no” from the tag.

<meta name="viewport"
content="width=device-width, height=device-height,
initial-scale=1.0, user-scalable=no">

    • If you need a custom hold & press event, override the default one

mySelector {
-webkit-touch-callout: none;
}

    • Hide the address bar. It will give your app a nice touch of ‘native’. Pss… jquery mobile is doing it for you by default.

setTimeout(function () {
window.scrollTo(0, 1);
}, 1000);


Other good sources:
Touch Gesture ref. guide and a great presentation my friend Boris created.
Standard