Mobile Websites vs. Web Apps vs. Native Apps

The Mobile-First Approach

A few years ago, the idea of a responsive website was a big deal. Starting with a big screen and working down (rather than a mobile-first approach starting with a small screen and working up) was the norm. Some companies even created a specific mobile version of their websites or web apps with reduced functionality and styling.

On one hand: mobile users may not want all of the gratuitous huge image files and over-the-top styling, especially if they are using a data connection rather than wifi. But on the other, they still want to find what they are looking for. Hiding or removing still-useful information results in a poor experience. The running assumption for a while was that mobile was used for consumption of information, not "real" tasks such as airline ticket purchases.

It’s one thing to design a desktop experience and find creative ways to make it work for mobile, but it’s an entirely different thing to reimagine the entire design process by beginning with the smallest screen and scaling up.

Taking a mobile-first approach necessitates a lot of focus and attention on the needs of the user, and it requires the company to hone in on what is most essential about its message and its content. There’s no room for flashy widgets and vanity features. In a way, a mobile-first approach offers the chance to strip away distractions and distill the experience down to what really matters.

— Gabriel Shaoolian via Forbes, "The Shift From Mobile-Friendly To Mobile-First: What Your Brand Should Know"

Mobile Websites vs. Mobile Web Apps

Terminology can get a little funny in this section. First off is the differentiation between websites and web apps. There's a good discussion on StackOverflow on the differences, but the top (subjective) answer is:

A website is defined by its content, while a web application is defined by its interaction with the user. That is, a website can plausibly consist of a static content repository that's dealt out to all visitors, while a web application depends on interaction and requires programmatic user input and data processing.

For example, a news site would be a "website", but a spreadsheet or a collaborative calendar would be web "applications". The news site shows essentially the same information to all visitors, while the calendar processes individual data.

Practically, most websites with quickly changing content will also rely on a sophisticated programmatic (and/or database) backend, but at least in principle they're only defined by their output. The web application on the other hand is essentially a program that runs remotely, and it depends fundamentally on a processing and a data storage backend.

— Kerrek SB via StackOverflow, "What's the difference between a web site and a web application?"

If we use this definition, it's easy to see that a static website would be a whole lot easier to adapt from desktop to mobile than something heavily reliant on interaction. Once we add user input and interactivity, things get a bit more complex. Well-designed mobile web apps can perform the same tasks on desktop and mobile, such as adding a calendar event, posting on social media, or completing a purchase.

Mobile App Advantages

If mobile web apps have so much functionality, why switch to a native app?

They're used more

90% of mobile time is spent in apps, and only 10% browsing the rest of the internet. In the ecommerce space, the contrast is even more glaring: mobile app users spend an average 201.8 minutes per month shopping, compared to 10.9 minutes/month for website users.

— jmango360

Engaged customers switch to them

On the internet’s 30 most-visited mobile assets, browser and app visits are about even with apps holding a slight edge, which means that apps are used about as often as websites. This happens because most users start out using a website (or web app) before downloading a brand’s native mobile app. Once a certain level of engagement has been built, users switch to the app for better user experience and speed. In other words, mobile websites are better for driving initial awareness and engagement, but later funnel stages are best served by apps.

— jmango360

Not only that, but it's easier for companies to engage with their users. Native mobile notifications can draw attention to promotions, for example. Even having the app icon visible on a user's phone can boost engagement because...

They're "the new loyalty cards"

If the provider of a particular service has their app on my home screen, it is almost inevitable that I will use that provider when I require the service. Whether that’s booking a table in a restaurant or a flight, ordering a taxi, or shopping for groceries - that should be obvious.

That in turn means the following: Getting on, and staying on, the smartphone screen is the single most important thing your business can do to improve customer loyalty today.

— Swrve, "Why Mobile Apps Are The New Loyalty Cards"

Conversion rates are higher

According to Criteo, for retailers who generate sales on both mobile web and in-app:

• Advertisers with a shopping app generate 67% of transactions on mobile devices
• The share of transactions by environment is split with 33% on desktop, 23% on mobile web, and 44% in a mobile app
• The app conversion rate (buyers / product page viewers) is 3x the mobile web rate

— Criteo, "Global Commerce Review"

They work better with native mobile functionality

Cameras, GPS, phone dialing, and other features integrated into mobile devices aren't always well developed for responsive/mobile websites, even though APIs and libraries aimed to help solve these issues have been appearing lately.

— rubygarage, "Pros and Cons of Mobile Websites and Mobile Apps"

Mobile App Disadvantages

That's not to say that native mobile apps don't have drawbacks...

Platform-specific or cross-platform?

When you design a mobile app, you can create a platform-specific app or create something cross-platform that will work across many types of devices. Platform-specific versions allow you to truly tailor your app to the look-and-feel that users expect on their devices, but that also means maintaining 2 versions of your app and keeping their functionality the same (or as similar as possible).

To ensure proper functioning, a mobile application should meet the requirements of the particular operating system. This means that every platform – iOS, Android, and Windows – requires a separate app version.

It's possible to develop a cross-platform solution that's supposed to fit every operating system and device.

However, cross-platform application frameworks don't provide full support for every module and feature of each operating system. For instance, a cross-platform framework may not support 3D graphics, which in turn may lead to limitations in creating and displaying app designs. Restrictions like these may have an impact on the stability of app features, and may lead to sub-optimal functionality.

— rubygarage, "Pros and Cons of Mobile Websites and Mobile Apps"

Shortcuts can result in some strange situations, such as Snapchat pictures looking better on iPhones than Androids, even if the Android camera is of the same quality:

Snapchats from Androids are much worse than from iPhones. That's because it’s way easier to develop an app for iPhone. Developers only have to consider a few Apple devices. But for Android, there are hundreds of different phones — all with different screen sizes, running different versions of Android software.

Snapchat found a way around developing too many different versions of their Android app. Instead of taking an actual photo with your actual camera, the app just takes a screengrab of your camera view. This way, one image-capture method works on most Android phones, even if the picture is worse for it.

— Business Insider, "The real reason Snapchat photos taken on Android phones look terrible"

Cost: Time and Money

If you've already created a responsive website, maintaining your mobile website or mobile web app is just a part of maintaining your website. Sure, there are some mobile-specific things to watch out for, but for the most part, maintenance and new features are already part of the process.

Native mobile apps require development time to create, fix (because there are always bugs, even if you haven't found them yet), and update.

Disadvantages for Users

Apps can run in the background and use services such as GPS to send a notification when you are inside a store. This can be handy (or creepy, but we'll get to that in a moment) for users, but all of that background activity can also drain your battery. Some people choose to use the mobile web version instead, or even a "wrapper" app that just loads the mobile web version inside of a much lighter app. These users give up a little bit of convenience, but they reported better battery life and less data used. To combat this, some app developers are creating "Lite" versions of their apps without all the bells and whistles.

Privacy is also a growing concern on mobile devices, and some app permissions can be intrusive. When you install an application, you are providing a lot more information about yourself and the way you use technology. Ideally, a company developing an app keeps this in mind and only asks for the permissions it truly needs, then allows the user to still make use of the app (albeit occasionally with reduced fuctionality) when non-critical permissions are denied.