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.
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.
With cross platform compatibility, web apps remain the ultimate medium for a product. Tell us about your project for a free consult.
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:
With progressive web applications however, designers and developers have finally found a way to bridge this gap because:
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:
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.
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.
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.
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.
Our award winning design team is experienced, collaborative and agile. Whether it’s for the web, mobile or other, we’ve got you covered.
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.
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.
I recently came across a really interesting article that shows how you can animate transitions between pages in PWAs.
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.