Design & User Experience

As frontend developers, we are responsible for the end-user experience. We implement designs, create animations and set up validation rules for forms. We have numerous responsibilities.

Great talk/article from Chris Coyier: ooooops I guess we’re* full-stack developers now

Responsive Web Design

Pay attention to detail. Do a mobile first design. And always think about edge-cases. Making a perfect responsive web app takes time and a lot of testing. Don’t underestimate real device testing. It’s the one which can provide you with the most valuable feedback.

Typically, apps are supposed to be optimized for mobile phones, tablets and desktop. Today, there are too many different devices with different screen sizes. Ideally, you should cover the most typical devices, like iPhones or Samsung/Android.

Online cross-browser testing tools

Progressive Web Apps

Progressive web apps are just like a normal web, but with superpowers.

Progressive web apps are designed to work on any browser that is compliant with web standards. As with other cross-platform solutions, the goal is to help developers build cross-platform apps more easily than they would with native apps. According to Google Developers, the characteristics of a PWA are:

  • Progressive — Works for every user, regardless of browser choice, and uses progressive enhancement principles.

  • Responsive — Fits on any device: desktop, mobile, tablet or whatever comes out next.

  • Performant — Scrolling is smooth. Quick response time. Rapid caching. Running on 60ps.

  • Network independent — Service workers allow offline usage or usage on low-quality network connections.

  • App-like — Feels like an app to the user, with app-style interactions and navigation.

  • Fresh — Always up to date due to the service worker update process.

  • Safe — Served via HTTPS to prevent security issues.

  • Discoverable — Identifiable as an “application” by manifest.json and service worker registration, and discoverable by search engines.

  • Re-engageable — Ability to use push notifications to maintain engagement with the user.

  • Installable — Provides home screen icons, without the use of an App Store.

  • Linkable — Can easily be shared via a URL and does not require complex installation.

Business Value

Research by AppInstitute (September 25, 2017) provided some key statistics and benefits of PWAs. According to the research, progressive web apps result in the following:

  • 68% increase of mobile traffic

  • 15x improvement of load and installation speed

  • 25x reduced usage of device storage

  • 52% average conversion increase

  • 78% average session increase

  • 137% engagement increase

  • 42.86% lower bounce rate when compared to that of mobile websites

  • 133.67% increase in page views

As of today, we can assume those numbers are even higher. Put simply, PWAs are less expensive but, at the same time, more profitable.

The Business Perspective — Progressive Web Apps says that the types of businesses best suited for PWAs are:

  • E-Commerce businesses

  • News & media organizations

  • Bloggers & influencers

  • Social Media businesses

  • Review websites

  • Any business that focuses on text, image and video content as its primary offering

Articles

PreviousGreat UX/UINextSEO, SMO

Last updated