As an online agency, Brthrs specializes in developing websites and mobile applications. An app is installed on your device itself, while a website is loadable from the browser. Both solutions have advantages and disadvantages.
In recent years, the line between these two types of software has become increasingly blurred. Websites have become more and more like apps. Users expect minimalist interfaces and fast load times from the websites they visit. But, how do you offer visitors an optimal online experience?
That’s where the Progressive Web App (PWA) comes in. PWAs look like an app to the user, but can be used in the browser. So this is a website that behaves like an app. With the look and experience of an app, a PWA responds to increasing smartphone usage.
In this article, we take a closer look at the best practices for developing a Progressive Web App (PWA). Click to read more about the benefits of Progressive Web Apps or to learn more about choosing between a PWA and a native app.
1. Mobile first, desktop second
A Progressive Web App is a website masquerading as a mobile app. Therefore, it is incredibly important that the website is easy to use on all mobile devices and screen sizes. Developing websites for mobile devices is also known as responsive development.
The most important of these is that users of your PWA do not encounter unexpected barriers when they open the website on a tablet or phone. After all, the PWA is designed for your target audience, this way they can make the most of it.
An added benefit is Google’s “Mobile first” indexing of websites. Since 2018, Google has preferred the mobile user experience of websites over the desktop version. Thus, a responsive PWA benefits the online findability (SEO) of your website.
2. Simplify steps for users
Visitors not only expect your website to work flawlessly and load quickly, but they also want to perform as few actions as possible themselves. Therefore, it is important to make it as easy as possible for them to perform tasks.
Common uses in a PWA include filling out forms, making payments and logging in. All of these tasks can be made easier for your visitors.
Using the HTML “autocomplete” attribute, for example, allows visitors to quickly fill out forms. Input fields are automatically populated with data previously saved by the browser. Learn how to apply the autocomplete attribute in an accessible way in your PWA.
For making payments, you can offer several options in your PWA. For example, one visitor prefers iDeal, while another prefers to pay afterwards. Offering multiple options improves the user experience.
Another useful functionality is providing the ability to log in without a password. It is estimated that the average person has about 100 different accounts, all of which require a password. When logging in without a password, a verification code is sent to the user via email or SMS. This allows it to log in securely and quickly.
3. Keep it simple
In the 1960s, the U.S. Navy developed a design principle that is still widely used today: the KISS principle. KISS stands for “Keep It Simple, Stupid. KISS design means to design your PWA as simply as possible, without unnecessary bells and whistles.
Provide visitors to your PWA with the content they need, a clear Call to Action (such as a button or form) and the ability to request more information. This way, the visitor can decide what information the visitor needs.
4. Reduce load times with an app shell architecture
Progressive Web Apps are focused on providing websites as quickly as possible. Here, every second that can be saved counts. One way to reduce the load time of PWAs can be found in an app shell architecture.
An app shell architecture is a method of optimizing the user experience of PWAs. This is done by separating minimal HTML, CSS and JavaScript code (the app shell) from the dynamic content of the app.
For example, the content of pages in the PWA are dynamic content. Dynamic content differs on each page. Components of the app shell include the header, footer and navigation elements. These are the same on every page.
Because the footer, header and other parts of the app shell are the same on every page, the PWA does not need to reload them every time. These elements are loaded once, while dynamic content is reloaded with each new page view.
An app shell architecture helps a PWA provide a fast and reliable user experience.
5. Let the user install a shortcut
Earlier in this article, you read about Progressive Web Apps masquerading as normal apps. As a developer of PWAs, you can enhance this feeling by having the user install a shortcut on their mobile device.
This shortcut looks and works the same as the other icons on your cell phone. When you click on it, the (web) app is launched. The only difference is that a PWA opens in a browser; an app does not.
The phone shows the shortcuts (icons) for apps such as YouTube, Snapchat and Chrome
6. Take advantage of all additional opportunities
Implementing Progressive Web Apps has some advantages over using standard websites. By leveraging these features as much as possible, you increase the ease of use of your PWA.
Did you know that PWAs allow you to set up push notifications, for example? Like mobile applications, you can notify your app user of something via a message. For example, do this when your shop is on sale, a product is back in stock or when a promotion is about to expire.
In addition, a PWA can use a cell phone’s camera. Most websites do not have this capability. By using this feature, you make the PWA feel more like an app again.
7. Testing, testing and more testing
After delivering a website or app, you find out a well-known saying among developers: a website is never finished. As a website builder yourself, you regularly come across areas for improvement. But, the real source of feedback is your users.
Visitors to your PWA offer a wealth of information regarding improvements to your PWA. Consider, for example, better button placements or navigation elements for optimal use on mobile devices.
There are several ways to test a PWA. You can use software such as Google’s Lighthouse or Search Console for technical improvements. Other examples that can measure user experience include Hotjar or Microsoft’s Clarity.
But, to figure out some of your PWA’s problems, you need input from real users. Brthrs always tests developed PWAs with the target audience before they are delivered. This will prevent your PWA from having inaccessible or awkward elements after launch.
Having Progressive Web App Made
As a developer of websites, apps as well as Progressive Web Apps, Brthrs knows all about customized online solutions. We are happy to advise you on the choice between the many possibilities. Please contact us to schedule a no-obligation appointment, at our office in Utrecht or online, we will be happy to tell you more!
