How to Design Amazing & Progressive Web Apps

What comes to mind when you think about leading a progressive life? It’s a life that aims to be far better than it previously was. Progressive web applications (PWAs) work kind of in the same way. They are web applications made with the intention to offer user experiences that are far superior to the experiences offered by traditional web apps.

To illustrate this further, here is how Google defined progressive web apps when it first launched them back in 2015:

By “app like” Google means native mobile applications (the kind you would download from Google’s Play Store or Apple’s App Store). With this in mind, think of PWAs as applications that run in a web browser, but look and perform very similar to the native applications installed on your smartphone.

PWAs have gathered a lot of momentum in web development trends this year. For web design, a software development methodology that finally begins to blur the line between web and native mobile apps has the potential to become extremely popular.

Progressive Web Applications

PWAs have enabled developers to overcome the most common challenges associated with web application development. For example (for developers), it makes perfect sense to create applications that don’t require users to go through the hassle of looking for it in an app store, downloading it, then installing it before they can use it.

With nothing but a URL for an access point, a PWA eliminates these steps. Secondly, it spares developers from creating different versions of the same app for multiple platforms which reduces cost and development time. If you were to develop an app natively for iOS and Android, you would need to code it twice (in Objective-C or Swift for iOS and Java for Android). However, with a PWA, you simply design & develop it to support modern web browsers, make it responsive, and you have all the platforms covered.

Before we share some tips on designing progressive web applications, let’s look at how they are different from traditional web & native mobile applications. This will help us better understand why they have been creating such a buzz as of late.

PWAs vs. Web Apps

It is generally accepted that the experience websites is not as rich as native web apps. Sure, a website can display a lot of information at once; but when it comes to showing only the most relevant content on smaller screens with interactivity built in, web applications are often preferred. It is why web app development took off as it did.

However, while web applications are optimized for mobile use, they still can’t seem to shake the “webby” experience entirely. For example, they can’t:

• Take advantage of most of your phone’s hardware (like the gyroscope)
• Work without an Internet connection

With progressive web applications however, designers and developers have finally found a way to bridge this gap because:

• They can be used without an internet connection, sort of: PWAs utilize the application shell architecture (the minimal HTML, CSS, and JavaScript required) and service workers (a programmable proxy that works independently of your app) to allow offline use.
• The service worker caches the content of the app and its shell separately. This means that the last loaded UI will still be available in offline mode as it’s loaded from the device’s local cache.
• You can send web Push Notifications with them: PWAs, with help from push APIs and service workers, can receive notifications from a server, a feature that has been missing on the mobile web.

PWAs vs. Native Mobile Applications

Progressive web applications aim to offer native mobile app like experiences. For example, both of them can receive push notifications and run offline.

On the flipside there are some capabilities that native mobile apps don’t offer, but PWAs do, such as:

• Installation: A PWA can be accessed on any web browser via a URL. You can save it as a shortcut on your mobile’s home screen. To download a native app however, you need to visit the App store, search for the app, and download it in order to be able to use it.
• Discoverability: Google identifies PWAs as applications (since they can be accessed via URL) which makes them as discoverable as web apps, a benefit that native applications don’t share. You can apply SEO tactics to help your PWA stand out from other apps on the web, rather than depending on primarily the number of app downloads and good reviews that native mobile app developers rely on to gain visibility.
• Updates: Progressive web applications always serve the latest version. You don’t need to do anything to ensure that you are up to date. The experience is always fresh. With native apps however, you have to download app updates from the App store.

These benefits don’t imply that PWAs can replace the native experience altogether. For example, a progressive web app can’t use your device’s telephony feature like SMS, or your contact list. If designers hope to make the best of the trend, they must focus on efforts that are plausible.

Let’s look at what you need to keep in mind while designing your next progressive web application.

Designing your Next Progressive Web App

At this point, we know that progressive web apps mimic the qualities of both web and native applications. To make the most of this unified experience designers should therefore identify features that are the best of both worlds, and focus efforts accordingly.

Pay Attention to Icons

Mobile app designers pay special attention to icon design. And since your PWA– by adding it to the homescreen– will sit next to the rest of the native apps, some thought should be given to its icon design too.

There is a good reason for this. A user might hesitate to tap on an icon that has a different appearance amidst the native app icons on their phone. First impressions are always extremely important, and an app’s icon is the very first impression it makes on the user.

To make your PWA icons blend in with the rest of the apps in your device, it must be flexible to fit within different platforms– such as Android, iOS and Windows– and accommodate stylistic elements (its shape, how it looks with/without backgrounds or in different colors, etc.).

A good way to do this is to make the design of your PWA’s icon match– or at least come close to– the visual standard of native app icons. One source of inspiration are Google’s Material Design guidelines Google’s Material Icons.

Adopt an Offline First Approach

In a recent post, we discussed how ‘good design’ is all about anticipating user needs. Designers and developers are doing a fantastic job at it. Take the applications in your mobile phone as an example.

At some point in time, developers had anticipated that people would like web applications to still be operable on their smartphone even if connectivity was unavailable. That is where native mobile and progressive web apps come into existence.

When you think about it, making some features accessible in offline mode has its benefits. Take for example the Facebook app, where you can view your newsfeed even without an internet connection. Obviously, this won’t be with the latest updates, but still. You always have the option to refer back to a post that you had seen earlier.

Progressive web apps haven’t advanced that far, at least not yet. Like traditional web applications, they can’t take advantage of a platform’s hardware. But designers can still use their offline capabilities, like implementing service workers to cache certain content, to their advantage.

First off, focus on adding value to the user experience, and then decide what information your progressive web application can provide in offline-mode that accomplishes this.

Take the Air Berlin progressive web app for example, which caches traveler boarding passes after an initial web check in. This capability allows the airline’s passengers to access their boarding passes offline should they need to show or review it again at the airport where they may not have Wi-Fi or Cellular Data access.

You can adopt a similar approach for your own application. A PWA of an online retail store can cache content like your shopping wish list, which would allow you to view them again while offline (perhaps when you are at the mall).

The aim of adopting an offline first approach is to give a perception that the entire app is stored on your phone, and only the latest content updates will be downloaded.

Give transition feedback immediately

When I used a web application on my smartphone for the first time, I immediately noticed how unresponsive the experience was compared to native applications. I was interacting with it, but the app wasn’t interacting back.

When I tapped on a button, the only way I knew the app had registered it was when I saw the browser’s page loading animation and then eventually jumping to a new page a few seconds later. All in all, the whole experience seemed more like I was browsing a website.

The primary aim of a progressive web app is to give the impression that it works locally on a device, much like native apps. So the interactions within it must at least come close to the native experience as well.

Here is a good place to start.

Mobile application designers incorporate features like touch feedback and gradual page transitions to keep users informed of their actions or imply changes of state to make the overall experience smooth and more intuitive.

• Touch Feedback: Take inspiration from applications like the Facebook app. When you click on a friend’s name on your newsfeed, it highlights this area in grey for a split second to inform you that the tap was recognized.
• Page Transitions: Unlike web apps, page transitions in native mobile applications are smoother. You can look at the Uber app for example, where these transitions are animated. Swipe left or tap on the menu icon and the menu slides in from the left. Use the same trick for your progressive web app.

I recently came across a really interesting article that shows how you can animate transitions between pages in PWAs.

Wrapping Up

All in all, progressive web apps are doing a pretty good job of bridging the gap between web and native experiences. With a full screen experience on a mobile phone along with web push notifications, you can engage your users to use your PWA more.

If you believe quality and user centricity needs to be ensured in your products, don’t forget to check out this post on how easily you can make it happen with an agile development process.