Mobile web design: platform by platform

30th May 2010 | 11:00

Mobile web design: platform by platform

iPhone, Android, Windows Phone, Web OS, Nokia and BB

Web design for mobile: the platforms explored

The mobile landscape is a complex and sometimes confusing place to be. Here we'll take a look at the most popular platforms, operating systems and app stores and offer some quick and easy tips to making the most out of the opportunities they offer.

Around 1.2 billion phones were sold last year, 174 million of which were smartphones. Symbian devices count for nearly 47 per cent of this market (with Nokia making up the majority of this figure), but they're losing market share to both Apple and Research in Motion (RIM), the company behind BlackBerry, which now have 14.4 per cent and 19.9 per cent respectively.

The fastest growing markets last year were Apple and Android, which grew by 6.2 per cent and 3.5 per cent respectively.

Smartphones enable consumers to download apps, and now there are app stores everywhere, courtesy of device manufacturers (eg Nokia's Ovi Store); OS developers (Android Market Place; Windows Marketplace for Mobile); operators (Vodafone's 360 Store; Orange's Application Shop) and Independents (GetJar; Handango). All are competing fiercely for eyeballs, clicks and sales.

At the moment, the Apple App Store is the undisputed champion; in January, it announced that three billion apps had been downloaded over the last 18 months. Others are catching up, though, with Nokia now proclaiming that it has broken the 1.5million app sales per day mark as of March.

The UK mobile scene According to the AdMob report on smartphone usage trends for January, 75 per cent of requests came from a combination of the Apple iPhone and iPod Touch. The next most popular were Nokia and HTC on 4.8 per cent and 4.7 per cent respectively.

With Apple firmly set with the top two handset models, it's left to HTC's Hero and Dream and Nokia's N95 to complete the top five UK smartphone handsets.

phone sales chart

DROID MILESTONE:Amazing statistics released by app analytics company Flurry report higher sales for Droid than iPhone in the first 74 days of sale

This isn't the situation all around the world, though. For example in India, 17 out of the top 20 web-accessing devices are Nokia phones. Nokia here has a market share of nearly 60 per cent, whereas Apple has just under two per cent.

Palm and the WebOS

Palm has a vision that the future of mobile will be built on the web. Last summer it launched a new mobile operating system called WebOS, built using web technologies such as HTML5, JavaScript and CSS.

A JavaScript framework provides access to standardised UI elements, device hardware and services, enabling relatively rapid turnaround times for applications. Last December, Palm launched the first mobile development environment hosted entirely in the browser, Project Ares.

Currently in beta, it provides you with a drag and drop interface builder, code editor, visual debugger, log viewer and source code integration. You can preview apps in the browser or launch them directly on the WebOS emulator (installed as part of the SDK). Project Ares works on the latest browsers including Safari (OS X & Windows), Firefox (OS X, Windows & Linux) and Chrome (Windows).

If you'd like to have a quick peek at all the UI elements, a handy app to check out (it comes as part of the SDK) is one that goes by the name of Style Matters. It comes complete with all the lovely code for you to start digging and getting your head around the visual parts of the framework.

The Palm SDK, development guides, tools and more can be downloaded from developer.palm.com.

Android

As a developer, you have more freedom on the Android platform compared to iPhone because you have the ability to change or replace some of the core functionality (eg a custom dialler).

The Android SDK runs on Windows, OS X and Linux. Applications are developed in Java, normally in the Eclipse Integrated Development Environment (IDE), using the Android Development Tool plug-in. Other IDEs such as IntelliJ or Emacs are an option, but Eclipse remains Google's recommendation. The SDK provides you with all the tools you need, including emulators.

The Google Android Market app count has more than doubled over the last four months, with the purchase rate having trebled in the same period of time. And even more manufacturers will be releasing Android-based devices this year.

However, it's not all rosy news for Android: fragmentation between devices is beginning to present an issue. Phones are being released with a range of Android firmware versions (1.5, 1.6, 2.0 and 2.1) with a variety of different software feature sets and hardware. For example, the Nexus One doesn't run some of the more popular games due to its different resolution screen. What's more, there's a range of different user experiences available, with HTC and Motorola having developed their own UIs.

It's also worth noting the success of the Motorola Droid (in the UK it's called the rather less catchy 'Motorola Milestone'), which outperformed the iPhone in terms of sales in the first 74 days from launch. Google's Nexus One, on the other hand, sold very few units, which could be due to a combination of bad marketing and the fact that you could only buy it online.

Apple

To write an iPhone or iPodTouch app, you'll have to get used to the Objective-C programming language. This can take time for those unfamiliar with it, but having prior knowledge of object oriented concepts and the C language will be a big benefit.

There are also a number of tools on the market that enable you to code in different languages and then either compile down to Objective-C or provide access to the native Objective-C calls via special bridges, such as Titanium by Appcelerator (JavaScript, HTML and CSS); Flash CS5 by Adobe, which will include a packager for iPhone; Elips Studio 3 from OpenPlug; and the open source PhoneGap project.

We rule

PAY AS YOU GO:'We Rule', a Farmville-style game by ngmoco is free, but features in-app purchasing

The performance of the apps that these tools create may not be entirely 100% when compared to a totally native app, but they're getting very close in some situations.

It shouldn't be forgotten that a very competent browser exists on these devices. For a web developer, it's a lovely place to be, writing mobile web apps in HTML5 and CSS3, with the ability of offline storage and advanced transitions blurring the boundary between native apps and browser based alternatives. It may only be a matter of time before the major native APIs can be accessed easily from within the browser.

Check out developer.apple.com/iphone for human interface guidelines, getting started videos, sample code and the SDK.

The Windows Phone(s)

With only 693 apps in Microsoft's store at time of writing, there are large gaps for developers to fill and monetise. Its upcoming app store for Windows Phone 7 devices has been designed to reward apps that deliver a high quality of experience rather than filtering first on price (with a focus on quality, there's also a certification process to getting your app in the marketplace).

There's also an optional Trial API for freemium business models, which enables the developer to program their own conditions for the 'try before you buy' experience. This is most commonly based on either time or experience, but you as the developer have the flexibility to develop your own set of custom rules, which could be quite interesting.

Windows marketplace sneak peak

SNEAK PEAK:A peek into how the app marketplace on a Windows Phone 7 will look

In terms of legacy applications, developers should expect to rewrite from the ground up as so much has changed (eg UI best practices and underlying architecture). Developers will need to use either one or a combination of Silverlight, XNA frameworks and the .NET Compact Framework to develop the apps.

Windows Phone 7 is being targeted to consumers for now, leaving the enterprise market with 6.5 (which has still got a few updates due), which might still be a viable market for enterprise apps for the next year or so.

Although the phone has a release date of late 2010, Microsoft has already announced free development tools (Visual Studio 2010 Express and Expression Blend). To get started, visit developer.windowsphone.com. Also check windowsteamblog.com/blogs/wpdev/ for the latest blog articles.

Nokia

Nokia's Ovi Store is currently selling 1.5million apps a day, with growth of sales accelerating rapidly as it begins to capitalise on its market share. The latest version features a redesigned user interface and an upgraded rating system, with the new requirement that users must download an app before they can rate or comment on it.

There's still lots for Nokia to do, though, such as adding functionality to push app update announcements down to your device à la Apple. At last count, the Ovi store supports 112 devices, including S40, S60 3rd Edition (N95, N73) and S60 5th Edition.

Developers have reported that the S60 5th Edition phones drive the majority of the sales (N97, N97 mini, 5800 XpressMusic and 5530 XpressMusic), in part due to the Ovi store app coming embedded on more recent devices.

In terms of development choices, you have a few: Web RunTime (WRT), native Symbian, Java and Flash. Very broadly speaking, Java is used if you want to support a large number of devices (including the older ones) and especially for games, Symbian has been used for utilities (due to access to low-level APIs and hardware), Flash for more graphically rich touch apps and WRT for apps such as Facebook.

In my view, WRT is the future: it's got access to an increasing number of device APIs, is web standards-based (apps essentially run in a browser without the chrome) and it's relatively simple and quick to create apps using HTML, JavaScript and CSS.

To create visual effects in WRT you're going to need to use a JavaScript library such as jQuery, which has a small footprint of under 20kb, making it ideal for working on mobile. There's also a jQuery-based UI library called Guarana UI specifically built for Nokia WRT devices.

It makes sense to re-use existing knowledge where possible so when it comes to building WRT apps, web developers out there already have all the skills they need. Check out www.forum.nokia.com/devices and filter by 'Ovi Store' to see a list of all currently supported devices. The web store-front can be accessed at store.ovi.com.

RIM

BlackBerry App World has been known to be unattractive and buggy but a recent update focuses on improving the efficiency and performance (rather than adding new front-end features). Its app catalogue is far smaller than Android's or the iPhone's.

Store wars

STORE WARS:The potential for opportunity on platforms other than Apple is huge. You can keep an eye on the numbers at distimo.com/report

An interesting observation of BlackBerry app usage is that users are more likely to play games than use utility-based apps. This could be due to the rise of consumer market, where teenagers have chosen BlackBerry devices for their ability to text using the very usable QWERTY keyboards and BlackBerry Messenger (BBM).

Billing at the moment is limited to PayPal, so there's an extra step for users whilst making an app purchase. Network operator billing is apparently planned for later this year.

BlackBerry App World has a number of nice little features: you can flag specific customer reviews for Admin review by RIM, which helps to raise the quality of reviews quite substantially; the web storefront features unique URLs for each app; and it's also well integrated to a number of social networks, which helps when making app recommendation to each other.

At Mobile World Congress this year, RIM announced that it plans to introduce the WebKit browser into its BlackBerry phones. It's a browser that gets a 100 per cent score on the ACID 3 test and provides a welcome speed boost over the current browsing experience.

The BlackBerry Developer Portal contains a lot of information at na.blackberry.com/eng/developers/.

Web design for mobile: operators and indies

The operators

Vodafone, Orange, O2, T-Mobile and 3 already sell applications, specifically selected for their customer and handset range. This isn't a new feature, though, as they've had the ability to sell content for some time. For example, Vodafone Live was launched way back in 2002, although it was more of a portal than an app store as such. The success of Apple, Google and Nokia app stores have made operators realise that they need to compete.

One initiative announced earlier this year was a universal app store, with key backers involving the network operators: Telefonica, Orange, AT&T, China Mobile, India's Bharti Airtel and Japanese operator NTT DoCoMo as well as device manufacturers: Sony Ericsson, Samsung and LG. Their aim is not to compete with Apple but to focus on the lower end of a largely untapped market by focusing on standards like BONDI and JIL.

Samsung 360

CO-OPERATION:The Samsung H1 is a tailor-made Vodafone 360 phone, but the 360 experience is also available on a range of Nokia phones too

Last September, Vodafone launched a service titled 'Vodafone 360' to replace Vodafone Live. It's a collection of services that allows close integration of social network information such as Twitter and Facebook into your phone experience and includes an app store.

Vodafone has recently announced that it has over 7,000 applications available to customers – 2,000 more titles than Orange, which also launched an app store late last year. The operators have a lot of work to do though, as companies like Tesco are specifically choosing device manufacturer app stores over network operators (at least for the initial launch).

There are a number of advantages, such as a lesser requirement on porting because they can focus on a narrower range of handsets on the same platform. This in turn allows these big brands to publish the app sooner rather than later.

The indies

Are the independent app stores worth considering? Well, just going on downloads, the mobile internet messaging (IM) brands such as Nimbuzz and mig33 have roughly 30million and 23million respectively on GetJar alone. Additionally, GetJar are currently recording 50million downloads per month throughout their store with support for over 2,000 phones. So, what's the catch?

GetJar at this point doesn't have the functionality to charge for apps, so essentially your app will be available for free. To make the most out of your download numbers and generate revenue you'll currently have to employ in-app advertising. GetJar has mentioned in the past that it's working on a payment mechanism, but we'll have to wait for this.

It's certainly worth noting that PocketGear – who recently bought Handango, making it the third largest app store in the world – already has a payment system in place.

Where to start

There's a lot of choices to make when it comes to building your app for mobile devices. My suggestion would be to start off with what you feel most familiar with. If you have a web-standards background, start experimenting with HTML5 and CSS on iPhone, Palm Pre and Android browsers.

Although emulators help a lot, there's nothing like testing your application on a real device, where you start to understand what a user experience in a 2G-only zone is like. If you fancy creating an native-esque app using your web skills, look into using one of the packaging tools like PhoneGap or Elipse that enables you to publish to a number of mobile platforms.

----------------------------------------------------------------------------------------------------

First published in .net Issue 202

Liked this? Then check out Why the mobile web must mirror the desktop

Sign up for TechRadar's free Weird Week in Tech newsletter
Get the oddest tech stories of the week, plus the most popular news and reviews delivered straight to your inbox. Sign up at http://www.techradar.com/register

Follow TechRadar on Twitter * Find us on Facebook

web design mobile phones
Share this Article
Google+

Apps you might like:

Most Popular

Edition: UK
TopView classic version