Mobile web design: platform by platform

Web design for mobile
The type of phone will have a large bearing on the kind of audience using it

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/.