How to Design a Progressive Web App

In many ways, PWA web design is similar to the way you design native apps. However, it still has some differences and special aspects. In this article, we will share our best Progressive Web App design practices and tips.

Tip 1. Focus on Progressive Web App design for both desktop and mobile

Below you can see the Progressive Web design of Twitter Lite for mobile.

When designing a PWA version for desktop, extend the grid, add some spacers (it is optional), and illustrations or photos.

As for a mobile version, choose the most popular features and content. Add the most required functionality to the navigation bar. This way users will have easy access to the commonly used functions.

Tip 2. Show interaction

When users tap a button, link, or menu section, allow them to see that the tap was recognized. For example, highlight the selected area with a different color.

Wego is a good example of a PWA showing interaction properly:

Tip 3. Retain the exact scroll position of the list

Suppose a user views a list of articles or products. They click on a specific item to learn more details. When returning to the list, the user should get back to the exact scroll position they were at. It would be a big mistake to redirect them to the top of the list.

Tip 4. Get rid of footer

Footer is a typical place for copyright notice, terms and conditions of use, links to social media accounts, and newsletter signup. All this content remains the same on every web page.

Footers sometimes take too much space which can be a serious issue for mobile devices with small screens. That is why native apps do not have footers. Therefore, you need to get rid of footer when designing a PWA. Create a navigation bar for the most important information instead.

The additional information that could not be fit into the navigation bar, can be moved to the menu. The example below by the Weather Channel illustrates how to do this the right way:

Tip 5. Add custom splash screens

A splash screen is another element that makes PWA websites even closer to native apps. Companies use them to place their logo, company’s name, or the motto. Thus, they increase brand visibility and make the user experience more engaging.

The splash screen of Codica’s PWA looks the following way:

Tip 6. Ensure smooth page loading

All image tags on your webpage require the dimension of the image. Otherwise, a browser will not layout the screen correctly and the content will be jumping. As a result, the user experience will be destroyed.

Instead, show a placeholder where a particular image should be. It can be a grey square or blurred thumbnail.

Let’s see how Jumia solved the issue with loading images in their PWA solution:

Conclusion

As you can see, in terms of design, Progressive Web Apps are pretty similar to native applications. It means that you need to adopt the app-like approach to offer a great user experience.

For more PWA design tips and tricks check our full article: Progressive Web App Design: 7 Tips for Great PWA UX and UI.