Progressive Web is the New Responsive


A common misconception about progressive web and Responsive Web Design (RWD) is that they are competing approaches. This article shows how the two approaches are actually highly complementary, and part of the evolution of the web towards an elevated customer experience.

Tech Trouble

My favorite client quote on this challenge came from an honest exchange on why retailers tend to favor and stop at RWD:

“Responsive is great for my tech team, but sub-optimal for the end user.”

Responsive web rose to popularity because it allowed technical teams to solve a mobile problem with the minimal effort. Retailers know that responsive isn’t good enough for their customers, but moving beyond RWD is tough for their technical teams.

With responsive, every customer is given the lowest common denominator experience. This leaves money on the table by not catering to customers beyond this base-device experience. However, RWD shouldn’t be discounted completely, because it solves several problems well:

  • Handling of layout management
  • Detecting of different devices
  • Improving SEO via a single URL (as opposed to an older m.dot approach)

The Experts Weigh In

Analyst firms such as Forrester have identified several trends that show how the web is evolving. Among them:

  • RWD has reached saturation – 87% of digital experience-makers embrace it [paywall: Embrace Responsive+ Web Design, Forrester, July 2016]
  • New web standards and innovation have unlocked traditionally native features for use on browsers (not just apps), such as cameras, touch ID, and bluetooth
  • A shift in customer expectations to prefer app-like (i.e. contextual and functional) experiences on the web

Whereas RWD used to be an aspirational approach, we now see it as the minimum baseline for an ecommerce experience, because of the growth of mobile ecommerce traffic in 2016. With that in mind, Forrester recommends a Responsive+ approach [paywall: Embrace Responsive+ Web Design, Forrester, July 2016] that builds on top of RWD.

Responsive web design imageEmbrace Responsive+ Web Design, Forrester, July 2016

In this scenario, Adaptive is a technique that generally encompasses device-specific code to further optimize a customer experience above and beyond RWD.

Above and Beyond

Progressive Web Apps” is a term coined by Google for “app-like” websites that are reliable, fast, and engaging. Unlike native apps, Progressive Web Apps are initially accessed through the web browser instead of being downloaded to a device. It works on all browsers, but the functionality is enhanced on browsers that support more advanced underlying technology.

To be considered Progressive Web Apps by Google, the site must provide a high-quality, app-like user experience by being secure and responsive, working offline, and loading quickly.

Taking it one step further, we are proposing an ideal approach to a mobile experience that builds on Responsive and Adaptive techniques with a progressive enhancement philosophy.

Progressive Mobile is a technology strategy invented by Mobify, and applies to both web and apps. It combines the philosophy of progressive enhancement along with a framework to quickly build PWA-compliant web experiences for retailers and their customers.

Mobify’s Progressive Mobile goes beyond Google’s requirements for Progressive Web Apps, incorporating open-source and proprietary technology that enables a number of benefits specifically for retailers.

Progressive web graphic

The main difference between the two models is a further layer of granularity that enables optimizing not just based on device, but on context and capability. For example, when a customer is navigating a retailer’s website on an Android device via the latest Chrome browser, we should expect:

  • RWD setting base style and fluid layout for the mobile device
  • Adaptive techniques to add/remove components and content for the mobile device
  • Progressive capabilities on a checkout page to recognize browser capabilities and user permissions to autofill forms based on auto-detected location, a one-touch checkout flow using credit cards already stored via PaymentRequest API or Android Pay, and to send a web push notification confirming the customer’s order
  • Further Progressive capabilities in a native app environment that can leverage beacons, GPS, and camera capabilities

In this case, we are giving the customer a truly optimized experience, far beyond what RWD can offer on its own. By combining tried and true RWD techniques with new Progressive concepts, we bring the benefits of Responsive and Progressive together to deliver a commerce experience that customers truly love.

We hope this clears up any confusion around Responsive, Progressive Mobile, and Progressive Web Apps. Be sure to get in touch if you have any questions!

Leave a Reply

Be the First to Comment!

Notify of
avatar