In this series of articles, I am going to walk you through an abstraction of the project we created (some details will be changed or left out, out of courtesy for our client), and shed some light on the peculiarities of developing hybrid mobile applications.
I am going to focus mainly on iOS development, but the basics are the same across all platforms. So let’s start with…
* Snappy UI or sluggish CPU hog
The first question you might ask is “but aren’t hybrid applications slower and more sluggish than native ones”, and the answer is that it depends entirely on how you go about coding the UI. Using the right techniques, and leveraging the power of the GPU present in high-end mobile devices will result in a satisfying user experience, while failure to follow best practices might indeed render your application slow and unresponsive.
Another important aspect of using iScroll is that many Android phones have a deficiency in displaying position: fixed elements. So in screens where we needed to display a static header and footer, we used absolute positioning, and made the central work area scrollable using iScroll. Thanks to the hardware acceleration, we didn’t experience any slowdown compared to “native” scrolling.
* Making the page play nice with mobile browsers
Speed is not all, there are some other things to remember when coding HTML for mobile platforms. Inadvertent scaling of the viewport can result in an unprofessional look, and even make your application borderline unusable. Few people are aware, but for example the mobile Safari will not display pages with 1:1 zoom by default, which means pixel-perfect screens put together specifically for the iPad will, by default, stretch off the screen when loaded.
To fix this problem, and to disable the pinch-to-zoom functionality built into the HTML viewport, you need to specify the following META tags:
<meta name="HandheldFriendly" content="True" />
<meta name="MobileOptimized" content="320" />
These tags will fix the first problem. The first one is for webkit-based devices (ie. iPhone and Android) while the second is for Microsoft devices. For the second tag, you need to set the screen width you optimized the page for.
And to disable pinch-to-zoom, set the following:
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=0" />
That’s all for today, next week I am going to go into some detail about the app, and show you what you need to do to start building PhoneGap apps in XCode.