Native Apps, Web Apps, and Hybrid Apps

Mobile: Native Apps, Web Apps, and Hybrid Apps

by Raluca Budiu on September 14, 2013

Topics:

• Applications
• Mobile & Tablet

Summary: Native and hybrid apps are installed in an app store, whereas web apps are mobile-optimized webpages that look like an app. Both hybrid and web apps render HTML web pages, but hybrid apps use app-embedded browsers to do that.

In the mobile realm, you’ll hear often terms like native app orweb app, or even hybrid app. What’s the difference?

Native Apps

Native apps live on the device and are accessed through icons on the device home screen. Native apps are installed through an application store (such as Google Play or Apple’s App Store). They are developed specifically for one platform, and can take full advantage of all the device features — they can use the camera, the GPS, the accelerometer, the compass, the list of contacts, and so on. They can also incorporate gestures (either standard operating-system gestures or new, app-defined gestures). And native apps can use the device’s notification system and can work offline.

Mobile Web Apps

Web apps are not real applications; they are really websites that, in many ways, look and feel like native applications, but are notimplemented as such. They are run by a browser and typically written in HTML5. Users first access them as they would access any web page: they navigate to a special URL and then have the option of “installing” them on their home screen by creating a bookmark to that page.

Web apps became really popular when HTML5 came around and people realized that they can obtain native-like–functionality in the browser. Today, as more and more sites use HTML5, the distinction between web apps and regular web pages has become blurry.

In 2011 Financial Times withdrew its native app from Apple’s App Store to circumvent subscription fees and maintain closer connection with their subscribers. Instead, it came out with an iPhone web app (app.ft.com):

                              

Financial Times web app for iPhone

Horizontal swiping on Financial Times' web app

Its web app is, in many ways, hard to distinguish from a native app. For instance, there are no visible browser buttons or bars, although it runs in Safari (when accessed from an iPhone). Users can swipe horizontally to move on to new sections of the app. And, due to browser caching, it’s even possible to read the newspaper offline.

These are all features that are available in HTML5. Also available are the GPS, the tap-to-call feature, and, there is talk about a camera API, although I haven’t seen any web app (or web page) that takes advantage of it so far. There are, however, native features that remain inaccessible (at least from now) in the browser: the notifications, running in the background, accelerometer information (other than detecting landscape or portrait orientations), complex gestures.

Of course, one can argue that many apps (native or otherwise) do not take advantage of those extra features anyhow. But if you really need those native features, you’ll have to create a native app or, at least, a hybrid app.

Hybrid apps

Hybrid apps are part native apps, part web apps. (Because of that, many people incorrectly call them “web apps”). Like native apps, they live in an app store and can take advantage of the many device features available. Like web apps, they rely on HTML being rendered in a browser, with the caveat that the browser is embedded within the app.

Often, companies build hybrid apps as wrappers for an existing web page; in that way, they hope to get a presence in the app store, without spending significant effort for developing a different app. Hybrid apps are also popular because they allow cross-platform development: that is, the same HTML code components can be reused on different mobile operating systems, reducing significantly the development costs. Tools such as PhoneGap and Sencha Touch allow people to design and code across platforms, using the power of HTML.

Walgreens provides two very similar hybrid apps– one for Android and the other for iPhone. Both apps have multiple sections and many native features such as access to notifications and aRefill by scan feature that uses the phone camera to refill prescriptions:

Walgreens app for Android

However, the Shop section in both the Android and iPhone apps uses a browser view that renders the corresponding page of the Walgreens mobile website. Here are three pages displaying the same content in the Android app, iPhone app, and mobile website:

Walgreens app for Android

Walgreens app for iPhone

Walgreens mobile website (m.walgreens.com)

As you can see, all these pages are the same, except for the top header, which is platform specific. The Back button on iOS is translated into a caret on Android; the logo is present on the web page, but not in the app. (The designers have correctly assumed that on the web people need the logo to orient themselves, since they are likely to land on a deep page without navigating through the homepage. In contrast, in their apps all navigation has to go through the homepage).

Banana Republic is such another example of hybrid app; it has used the exact same design on Android and iPhone:

Banana Republic app for Android

Banana Republic app for iPhone

However, the Back button in the Android app ignores the fact that, unlike iPhones, Android devices come with a physical or virtual Back button. The tab bar at the bottom of the page works well in the iOS design, but is clunky and clearly non-native on Android.

Native, Web App, or Hybrid: Which Should You Choose?

Each of these types of apps has their advantages and disadvantages, as I’ve tried to point out. Let’s summarize them here.

Device features. Although web apps can take advantage of some features, native apps (and the native components of the hybrid apps) have access to the full paraphernalia of device-specific features, including GPS, camera, gestures, and notifications.

Offline functioning. A native app is best if your app must work when there is no connectivity. In-browser caching is available in HTML5, but it’s still more limited than what you can get when you go native.

Discoverability. Web apps win the prize on discoverability. Content is a lot more discoverable on the web than in an app: When people have a question or aninformation need, they go to a search engine, type in their query, and choose a page from the search results. They do not go to the app store, search for an app, download it, and then try to find their answer within the app. Although there are app aficionados who may fish for apps in app stores, most users don’t like installing and maintaining apps (and also wasting space on their device), and will install an app only if they expect to use it often.

Speed. Native apps win the speed competition. In 2012 Mark Zuckerberg declared that Facebook’s biggest mistake had been betting on the mobile web and not going native. Up to that point, the Facebook app had been a hybrid app with an HTML core; in 2012 it was replaced with a truly native app. Responsiveness is key to usability.

Installation. Installing a native or hybrid app is a hassle for users: They need to be really motivated to justify the effort. “Installing” a web app involves creating a bookmark on the home screen; this process, while arguably simpler than downloading a new app from an app store, is less familiar to users, as people don’t use bookmarks that much on mobile.

Maintenance. Maintaining a native app can be complicated not only for users, but also for developers (especially if they have to deal with multiple versions of the same information on different platforms): Changes have to be packaged in a new version and placed in the app store. On the other hand, maintaining a web app or a hybrid app is as simple as maintaining a web page, and it can be done as often or as frequently as needed.

Platform independence. While different browsers may support different versions of HTML5, if platform independence is important, you definitely have a better chance of achieving it with web apps and hybrid apps than with native apps. As discussed before, at least parts of the code can be reused when creating hybrid or web apps.

Content restrictions, approval process, and fees. Dealing with a third party that imposes rules on your content and design can be taxing both in terms of time and money. Native and hybrid apps must pass approval processes and content restrictions imposed by app stores, whereas the web is free for all. Not surprisingly, the first web apps came from publications such asPlayboy, who wanted to escape Apple’s prudish content censure. And buying a subscription within an iOS app means that 30% of that subscription cost goes to Apple, a big dent in the publishers’ budget.

Development cost. It’s arguably cheaper to develop hybrid and web apps, as these require skills that build up on previous experience with the web.NN/g clients often find that going fully native is a lot more expensive, as it requires more specialized talent. But, on the other hand, HTML5 is fairly new, and good knowledge of it, as well as a good understanding of developing for the mobile web and hybrid apps are also fairly advanced skills.

User Interface. Last but not least, if one of your priorities is providing a user experience that is consistent with the operating system and with the majority of the other apps available on that platform, then native apps are the way to go. That doesn’t mean that you cannot provide a good user experience with a web app or a hybrid app–it just means that the graphics and the visuals will not be exactly the same as those with which users may be already accustomed.

(These issues are discussed in further depth in our full-day training course Mobile Websites and Apps: Essential Usability Principles for Mobile Design, while many more detailed screen-design issues are covered in the seminarVisual Design for Mobile and Tablet.)

To summarize, native apps, hybrid apps, or web apps are all ways to cater to the needs of the mobile user. There is no unique best solution: each of these has their strengths and weaknesses. The choice of one versus the other depends on each company’s unique needs.