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’:
- jquery mobile leading the pack – they are doing most of the ‘leg work’ for you and give you ability to run on lots of different devices.
- iPad support 11 simultaneous touches – very cool… imagen what you can do in your app with some many touch points.
- Native scrolling for mobile web apps and its first used in the wild – nice photo blog.
- Sencha framework and its touch gestures.
- Last but not least – for the iPhone (or iOS) web developer – here is a great blog post on the improvements we are going to have in iOS5.
- 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);
Discover more from Ido Green
Subscribe to get the latest posts sent to your email.
