Whatterz


Building a presence on mobile? Here are your options

by Simon. Average Reading Time: about 6 minutes.

Everybody is talking about mobile and that’s not surprising. On average, mobiles account for 31% of website traffic according to Mobify. In 2013, Ofcom puts UK smartphone penetration at 58%, whilst 19% of the population own a tablet. Whilst mobile devices already outsell traditional desktop PCs, at the current pace of growth, tablet devices will outsell desktop PCs by 2015, according to IDC.

Mobile has become an indispensable part of our daily lives.

With many competing business models, technologies and systems, a perennial topic of conversation is which approach is better for mobile: websites and webapps, written in HTML5 and related Web technologies, housed on the Web and run across multiple platforms, devices and browsers; or native apps, downloaded to devices and built upon and designed specifically for iOS, Android and other mobile platforms.

In the face of the paradigm shift from desktop to mobile, organisations must engage with mobile or risk losing customers and all-important revenue. But what of the options? We have 5:

  1. Do nothing
  2. Build a mobile website
  3. Create a responsive website
  4. Go native
  5. Build a hybrid app

Do nothing

This isn’t an option we’d recommend, but there is a case for allowing your website to be rendered on mobile as it would on desktop. For devices such as Apple’s iPhone 5 and Samsung’s Galaxy S4, where users are used to panning and zooming, this may be acceptable. However, with this option you’re not optimising the experience for the user’s context of use, which is likely to negatively impact the user experience.

It’s difficult finding examples of this strategy, but they could include Apple and Last.fm.

Build a mobile website

Built with the same Web technologies as responsive and adaptive websites (i.e., HTML, CSS, JavaScript and a server-side language), mobile websites and apps tailor the experience to the mobile device, rather than simply reconfiguring the same content a desktop user would see. These are the classic m-dot and t-dot websites that you often find. The main distinction here is that you’re building and maintaining two separate sites: one for desktop and one for mobile.

Mobile websites work across any device that uses a modern Web browser such as Safari, Chrome and Opera, meaning access is relatively universal and cross-platform. As a consequence, mobile websites are often limited in functionality and user experience by what support is provided by the mobile browser and platform. Much like responsive websites, mobile websites won’t have access to device-specific features such as Near Field Communication (NFC), the camera and motion sensors, or the device’s native user experience.

Since mobile websites can be accessed by a broad range of modern mobile devices, this maximises the potential audience, but arguably less so than with responsive websites.

Popular examples of mobile websites include YouTube (m.youtube.com), Twitter (mobile.twitter.com) and Facebook (m.facebook.com).

Create a responsive & adaptive website

Responsive and adaptive websites follow what is called the One Web. One Web means making, as far as possible, the same information and services available to users whatever device it’s being viewed on, irrespective of whether that device is a feature phone, smartphone, tablet, smart TV, laptop, traditional desktop or other Web connected device.

However, One Web does not mean that exactly the same content is available in exactly the same form across all devices. This is where responsive and adaptive design comes into play. The context of mobile use, device capabilities, bandwidth issues and mobile network capabilities all affect the representation of the content.

Websites vary greatly in their focus. Some websites have a primarily mobile focus (e.g., location based services), some have a primarily mobile focus but have a complementary desktop aspect (e.g., for complex configuration tasks), and others have a primarily desktop focus but a complementary mobile aspect (e.g., for notifications and updates). Finally there will remain some websites and applications that have a primarily desktop focus (e.g., for large-scale imagery or high-definition video).

As experience designers we have a duty to provide the best possible experience in the context in which the website or service has the most appeal. Whilst websites may be more appropriately experienced in one context or another, it is good practice to provide a common experience, within the limitations of the device, and not exclude access from any particular class of device and/or user.

There are a significant number of websites that follow the responsive and/or adaptive paradigm, but fewer webapps. Examples of websites that follow this approach include Time, British Vogue, ISO (International Standards Organisation), Starbucks, Currys and Microsoft, whilst webapps include Mailchimp and Trello.

Go native

Native apps provide a fundamentally different experience compared to websites. Native apps are good when needing to take advantage of the platform’s hardware capabilities, affording the opportunity to use motion, environmental and position sensors, NFC, storage and hardware acceleration amongst others.

By following vendor-specific Human Interface Guidelines (HIGs), native apps offer a consistent user experience. However, that user experience will be different between different platforms (iOS, Android, Windows 8, etc.) since their HIGs are subtly, or sometimes extensively, different.

A fundamental limitation of native apps is the need to build an app for each platform on which you want a presence. Native apps aren’t cross-platform unlike websites. That can be a costly endeavour.

There are a plethora of native app examples that I could mention, but popular examples include Instagram, Facebook, Mint, Cut the Rope, Doodle Jump, Barclays and Skype.

Build a hybrid app

Hybrid apps are the middleman of the website or app debate. Built using products such as Appcelerator, Corona, PhoneGap and Sencha, a hybrid app is in essence a native application wrapping Web technologies (i.e., HTML, CSS and JavaScript). By building the app with Web technologies it’s quicker to develop and easier to publish to multiple platforms (i.e., Android or iOS) – develop once, deploy everywhere is the goal here.

As the app is essentially native you get access to hardware capabilities such as the camera and NFC but performance is often poorer than the fully native experience and the apps don’t often follow the platform’s HIGs.

Examples of hybrid apps include BBC Olympics, Tiny Terrors, tripcase, Kiva, TEDx and Maximuscle.

Which approach should you choose?

There are no absolutes in the argument between the Web, native and hybrid apps. What’s great about the Web is ubiquitous network availability, not that it runs within a browser. Websites are just services, and what you see in a browser is merely one possible interface to that service.

Frequently, but certainly not always, the best possible interface to that service is going to be a native app, not a Web app. That’s primarily because native apps have access to all that the web can achieve, but with the added benefit of being able to fully access the hardware on which the app resides.

Whilst current technology makes native apps a superior experience, this is only the case for as long as we’re stuck with current technology. We’ve all seen, and continue to see, the pace of technological change, so it follows that the Web experience on mobile devices will only get better and better. Indeed, the likes of Mozilla’s Firefox OS and Amazon’s Appstore are putting the Web and its technologies at the front and centre of the mobile experience.

This article has been tagged

, , , , , , , , , , , , , , , , , , , , , , , , , , ,

Other articles I recommend

The Annual Mobile Monday London Debate: HTML5 vs. Native apps

Last night, at Mobile Monday London (#MoMoLo), we saw the latest edition of the HTML5 versus Native Apps debate. That never ending debate where a bunch of ‘experts’ get together and pontificate over which platform is the best.

User Interface Guidelines for Mobile and Tablet Devices

The official user interface (UI) and user experience (UX) guidelines from the manufacturers, links to which you can find below, are a source of inspiration for mobile web and application design. Here, you will find guidelines, samples, tips, and descriptions of common mistakes. Many of the guidelines focus on native application development, but we can apply most parts of them to mobile web design.

What is a Mobile Payment?

Mobile payment is being adopted all over the world in different ways. Combined market for all types of mobile payments is expected to reach more than $600 billion globally by 2013, which would be double the figure as of February, 2011, while mobile payment market for goods and services, excluding contactless NFC transactions and money transfers, is expected to exceed $300 billion globally by 2013.