Mobile web app development: Are we doing it properly?

More and more online products are being created with a mobile version and this is usually a scaled down version of the desktop product. The main website has been optimised for the smaller screen and takes into account touch screen capabilities. The mobile web apps differ from a mobile version of a website because they have been tailor-made for the mobile device, rather than scaled down from the desktop version. To understand how to develop into a productive mobile app development agency it is first essential to understand the difference between mobile and desktop.

Mobile vs. Desktop

There are four main differences between mobile platforms and the desktop version:

1. Smaller screens mean a whole new range of development and design challenges
2. Mobile device hardware is smaller and less resource-rich than desktop hardware
3. Touchscreen technology gives developers more scope and freedom than traditional input methods
4. Mobile device connectivity isn’t always as reliable and therefore data transfer can be slower

Although these points sound problematic they simply mean more scope and creativity is required in your web development projects. Below is a closer look at some development considerations to build the best possible mobile web app.

Small File Sizes

Everything mobile needs is to be smaller. This means smaller file sizes to handle the problems that occur with connectivity. Quicker experiences result in a more positive user experience and therefore keep your files small so pages can be loaded and engaged with as quickly as possible.

Handling Image Performance

Images need to be avoided wherever possible. They simply take up too much space and often don’t add much to the content the user requires. Where images are essential the following methods can be used to minimise their size.

Adobe Fireworks has the nifty little trick of allowing you to export 8-bit PNGs. This is something PhotoShop can’t do but you can simply open your regular 24-bit PNG in Fireworks and use the compression settings to set it to 8-bit with alpha transparency – ideal for mobile web app usage.

ImageAlpha is even simpler than Fireworks and allows you to drag your images into its main window and be tweaked to trim all excess data from the file.

Embrace CSS3

Mobile web browsers are much further advanced than they used to be and therefore developments built using CSS3 are the norm. CSS3 allows developers to render elements through code where previously an image would have been necessary. Colour gradients, drop shadows and the application of multiple backgrounds to HTML elements can be handled with ease and in a way which can help boost the performance of interface and speed up loading times. CSS3 also reduces the data transfer particularly of images and excess HTML mark-up.

Understand Hardware Acceleration

With the sheer number of Apple device users it pays to listen to their latest innovations. Hardware Acceleration is a feature of Safari 5 and it means that the browser can use additional hardware device capabilities to enhance the rendering of graphics, which should result in improved speedier user interfaces.

Hardware acceleration isn’t limited to Apple however and other brands including Firefox, Google and Opera have shared their support for the concept, which suggests they’ll soon incorporate it into their browsers too. This could revolutionise the way we render graphics for mobile users.

Offline Matters

When your users are reliant on unstable internet connections it pays to have an offline user experience planned too. This means offering them some sort of engagement even when they aren’t online, usually through HTML5 offline data storage means. Utilising this means that data is downloaded which allows for files to be cached locally and therefore even when there’s no connection data can still be saved.

All these elements pulled together should result in mobile web app development which you can be proud of and exceed your end-user’s expectations.