In the beginning, only app-store apps were 'apps'. Basically, it was a synonym for 'program', specifically for mobile devices. Eventually all programs started to be called 'apps' (even on desktop computers). Native apps would run like executable programs (downloaded from an app store, and installed to run on a device). Meanwhile, in the Web world, some sites started to behave more like self-contained programs than web pages (no more slow loading between pages, no more losing data at the end of a session, no more uncontrolled access points). Actually, all web pages are very app-y nowadays (with dynamic data grabbed from local databases, controlled data loading, or tabbed data sections). But there are still quite a few differences between web pages and web apps:

‍

SINGLE PAGE APPS

These started back in the early 2000s with AJaX technology (asynchronous javascript xml, which allowed web pages to run multiple data updates without reloading). After that came a string of JavaScript frameworks including JQuery and Backbone.js, then a move away from JavaScript entirely with Flash and Silverlight, before coming full circle in 2010 with the release of the robust Angular.js and later React.js. Today, Single Page Apps dominate our most used web applications — Facebook, Twitter, Gmail and Google Docs to name but a few.

Faster load times: HTML, CSS and script files are downloaded and parsed just once throughout the app’s lifespan (only data is transmitted back and forth), so navigation between pages is almost instantaneous.

‍

PROGRESSIVE WEB APPS

Examples of progressive web apps include the Starbucks online order menu, and the Flipboard and Uber mobile websites.

Faster load times: Thanks to 'service workers' (JavaScript written client-side proxies), progressive web apps also preload all web pages and assets, instantly displaying content to users while they browse rather than making a request for new content on each following page load (the median successive page load time for a PWA is 1.4 seconds; while the industry average is 6.2 seconds).

Immersive full screen: Progressive web apps can also run in ways that are indistinguishable from a native app. They can load from an app icon into a rich full-screen experience. With the help of a web app manifest file, they can also appear in all the areas you’d expect a native app to appear (app launcher, settings app, task switcher etc). Any links to the website from external sources can open in the progressive web app, and the app can send push notifications to users.

‍

MAKE IT PERFORMANT

Additional methods and technologies can make a web app 'extremely performant':

Lazy loading: It's not always beneficial for everything can be preloaded at once, specially where there is a lot of data (the preloading would take too long, even if subsequent navigation was fast). With lazy loading, the main sections can be preloaded, but images and other heavy elements load later in the sequence, or as the user scrolls. Content placeholders, or skeletons, can be used to construct a preloaded version of a page while content is loading.

Variable fonts: Using variable fonts offers typographic variation without forcing the user to download fonts in multiple weights. Check out variable fonts in action at vfonts.

Optimized SVGs: Vector icons and illustrations often add a lot of unnecessary bloat. This can be cleaned up considerably, with tools such as Google's SVGOMG.

Optimized images: The art of image optimization comes from the human eye judging the compression tool’s impact on image quality. Several algorithms and rendering techniques can significantly reduce the size of an image in ways that are invisible to the naked eye. Huge file savings can come without compromising image quality. There are also tools that help with this process, such as Google's Squoosh.

UI/UX: Paying careful attention to CTA size, colour, placement and micro-copy helps make the key actions more obvious and reduces thinking time. Patterns first seen in native apps, such the floating action button and fixed header bar, get the user moving quickly and translate well to any performant web app. A general rule of navigation is ‘out of sight, out of mind’. Patterns such as a Bottom Navigation Bar and Tabs successfully put primary user actions front and centre, while the traditional ‘hamburger’ menu has a lower engagement rate. Spotify found that by reducing the number of options in the tab bar to five increased the reach of Spotify’s programmed content. GooglePay allows shoppers to complete multiple checkout steps in a single tap, while one-tap sign in gets users into their account in the same way. Designing performant apps without the bloated code commonly associated with responsive websites, typically means designing 'mobile first'. 

‍

WHY NOT JUST MAKE A NATIVE APP?

App stores present a barrier to entry that fails to match the much broader reach of a search-driven web. The web has a number of key advantages that line up with the shortfalls of native apps, one being the capability of search engines to search content rather than simply the name of the brand (typical of app stores).

Security: Until recently, native apps tended to be more secure, and security has historically been a trump card of enclosed native applications. In order to rival native apps in this trait, web apps are beginning to offer a secure connection wherever users choose to browse, and HTTPS is becoming a requirement of progressive web apps.

A few examples:

Flipkart is one interesting example. They saw a need to reach potential customers in cities where less phone storage is becoming more common. In removing the requirement to download an app, 60% of customers who had previously uninstalled the app returned to use the Flipkart progressive web app.

Tinder’s progressive web app saw load times cut in half compared to its native app, resulting in longer session times, more messages and more swiping.

Already back in 2009, Google's VP of engineering Vic Gundotra heralded the web as “the dominant programming model of our time” (ie HTML has the ability to match previous advantages of hardware-based development).
And since 2016 Google has been pushing the concept of progressive web apps (user experiences that are reliable, fast and engaging).

‍

-----

I design web pages and single page apps interchangeably, at the same $ base rate for a standard site. Even a simple progressive web app can be relatively inexpensive. Contact me to get started with a dynamic and useful web presence.

-Sandro Alberti
Design

creative@sandroalberti.design

‍

‍

‍