HTML5 ARTICLE

October 23, 2012

Mobile Website vs. Native App vs. Mobile Web App

By TMCnet Special Guest
Tim Gray, content strategist with Blue Fountain Media. ,

If you aren’t already, it’s time to start thinking about building out mobile platforms for your business.

The mobile market (primarily smartphones and tablets) is booming, with over six billion mobile users worldwide. In the United States, which has a mature and steady market, 36.4 percent of the 234 million mobile users access the Internet from their phone, according to research firm comScore.

And this staggering growth is changing the way we access information:

  • There are 1.2 billion mobile Web users worldwide.
  • In the global market mobile devices account for 8.5 percent of Internet traffic.
  • And in the U.S., 25 percent of Web users access the internet through mobile only.

That’s a lot of incentive to optimize the delivery of your content to mobile platforms.

The question remaining is not whether you should migrate to mobile, but how?

The two most obvious choices are mobile websites and native apps. While many people would have trouble distinguishing one from the other in visual terms, there are some very important distinctions that must be made between them when planning a mobile strategy. And, of course, you could try a web mobile app that may be just as efficient for your needs, but cost significantly less.

Mobile Website vs. Native App vs. Mobile Web App

If you’re reading this you likely know the basics. If not, here is a quickie: on the most basic of levels, a mobile website is pretty much the same as any other website – it uses browser-based HTML pages that can be accessed by handheld devices and tablets. Unlike a website built for viewing on a desktop, the mobile site is designed to appear on a much smaller handheld display.

As for native apps, they are downloaded applications – from Apple’s App Store, Android (NewsAlert), Blackberry App World, etc. – that are installed on a mobile device and can’t be accessed within a browser. Note: the name is derived from the fact that these apps are written in the language of the operating system of the device they are installed on.

And lastly, but certainly not least, is the mobile web app: while they appear similar to the native app, they differ in the manner in which they are built and rendered. These apps viewed through a mobile web browser are built in HTML/CSS.

Mobile Website

There are three ways to approach building a mobile website:

  • Create a separate mobile website with its own URL that redirects mobile visitors.
  • Instead of the redirect use CSS files to make the same desktop URL available to mobile users.
  • Use responsive website design to create a website that adapts to browser window width by using CSS3 media queries.

Note: Google (News Alert) recently recommended responsive designas a best practice for mobile SEO when building out websites for smartphones. Advantages: Building a mobile website is pretty similar to building a website designed for the desktop. If you already have a website, and it’s you likely do, and you want to make it mobile-friendly, in 95% of cases, a mobile website will accomplish your goals, says Blue Fountain Media Chief Marketing Officer Alhan Keser.

Adding a mobile website will also improve Search Engine Optimization performance because your website will be placed in relevant mobile and local directories on search engines, which will increase overall visibility for you business.

Challenges: The need for speed. Even the best mobile website design is at the mercy of the networks being used to access it, and often network access and speed varies from location to location. Compounding the speed issue is the fact that mobile users are much more demanding than those accessing your site on a desktop. The latter tend not to be put off  much by an extra click here and there when a usability issue is encountered. On a mobile device, forget it.

If you don’t optimize its functionality, and end up making visitors work too hard and wait too long for information, they’re gone.

When you need one: Almost every business needs a mobile website, especially businesses that consumers are likely to search on the go: restaurants, retailers, entertainment, etc. There are exceptions, which we will see later with native apps. Remember, if you have a website, people can already view it on a mobile device, it just doesn’t look too good.

Mobile Web App

These mobile web apps look very much like native apps (see below) but can be built at a much faster and cheaper rate in HTML/CSS. In fact, a mobile web app can be launched just as quickly as website.  Because most Android-based products and iOS (iPhone (NewsAlert) and iPad) leverage sophisticated mobile browsers (ie. Mobile Chrome and Mobile Safari), mobile web apps are a great alternative to the much more expensive to build native app.

Advantages: The planning and launch of a mobile web app is similar to the average custom designed website, and ultimately produces a look and feel like the much more expensive and time-consuming native app. For the most part, it performs and functions just like a native app, only it is rendered through a mobile browser. Once a mobile web app is launched, it’s also easy to make edits and changes that are immediately available to the user.

Disadvantages: While overall, a mobile web app is usually the best bang for most business’s buck, there are some drawbacks to consider before going that rout; namely it provides access to only basic device functions,  such as location and media files. However, at least with Apple’s (News Alert) latest update – iOS 6, this appears to be changing. The new iOS 6 update now allows mobile web apps to access geolocation and camera features of hardware on the iPhone and iPad.  As of this report, the same couldn’t be said for Android devices, or earlier iPhone/iPad additions. It’s important to note that many, many people will never upgrade their OS until they purchase a new smartphone.

In addition, the browser can take up a bit of space on an already limited size display. Speed can also be an issue.

While this shouldn’t be a deal breaker for most businesses, it is reasonable to consider.

When you need one: The mobile web app differs from a mobile version of a website because it is designed specifically for the mobile platform. If you already have a website, a mobile web app can be built relatively easily using much of the same code.

Native App

As we’ve mentioned, the native app is written in the language of the operating system of the device it is installed on -Android, iOS, etc.  These apps are usually downloaded through an online store or marketplace – The App Store or Android Apps on Google Play- and installed directly onto the device.

Advantages: The native app can interface with the device’s native features, information and hardware (camera, GPS-location, etc.). Typically native apps perform faster than mobile web apps.

Disadvantages: The native app is costly and can take a good deal of time to develop.  You’ll also have to create a different app for each operating system you want it to work on because each must use the native programming language of the device: Java (Android), Objective-C (iOS), and Visual C++ (Windows Mobile).

Other long-term drawbacks include the app store approval process designed to assure user quality and safety can be cumbersome; and the manual downloading and installation of the apps means that many users will be operating on different versions.

When you need one: If you’re developing a game (Angry Birds, anyone?) or an app that fills a very narrow niche like a weather app, than the native app is ideal. The bonus developers receive is the ability to charge a download price, with the app stores handling the payment process – for a fee, of course.

ConclusionThe decision to go with native app, responsive design (that is the best mobile website option) or a mobile web app really depends on many business factors: objectives, target audience, technical requirements.

Of course, you can choose not to decide and build a native app and mobile web app. Remember, that’s what Facebook (NewsAlert) did. However, businesses with more modest budgets may need to chose an option and go with that one. Whatever you decide, it’s pretty much a foregone conclusion that the future of mobile is here.

Tim Gray is a content strategist with Blue Fountain Media.


Are you interested in learning more about HTML5? Then be sure to attend DEVCON5, in San Francisco, Calif. from November 27-29.  Stay in touch with everything happening at DevCon5: Follow us on Twitter.



Edited by Brooke Neuman





HTML5 RESOURCES

HTML 5 Demos and Examples

HTML 5 experimentation and demos I've hacked together. Click on the browser support icon or the technology tag to filter the demos.... Learn More

HTML5 GAMES

HTML5games.com is the largest and most comprehensive directory of HTML5 games on the internet... Learn More

The HTML5 test

How well does your browser support HTML5?... Learn More

Working Draft (WHATWG)

This is the Editor’s Draft from WHATWG. You can use it online or print the available PDF version... Learn More

HTML5 Flip Book

Free jQuery and HTML5 flip book maker for PDF to online page turning book conversion... Learn More