If the most dramatic moment of your design presentation was resizing your browser to show off how well your CSS code scales to a phone screen—you’re doing design wrong. It’s time to consider mobile it’s own channel and not just something you resize for. Responsive design is fine but consider that many interactions over mobile don’t just require repurposing of existing desktop content but full force overhauls.
The Adoption of Adaptive Design and the Rise of Progressive Web Apps
Mobile traffic is past its tipping point with roughly 52 percent of web traffic currently deriving from smartphones versus desktops – and counting. People are accessing sites and services with the expectation they will not only have the same functionality they would on desktops, but, more so today, that the sites will also use the functionality native to their devices without needing to download an app.
To date, forward-thinking ecommerce companies have worked to ensure their sites were primed for mobile viewing, turning to responsive web design (RWD) as the solution. Times are changing, however, and device-specific experiences are becoming the new requirement (e.g., touch gestures, speech recognition, mobile push notifications). Responsive design that delivers one size, fits none is now being replaced with two new ways of implementing mobile experiences that are faster and provide a better customer experience: adaptive and progressive design. While adaptive design requires more coding, it offers a whole range of other prioritizing features on mobile that customers crave versus receiving a shallow, shrunk-down version of the desktop site that leaves too much to be desired.
The Four Approaches
These are responsible for the mobile-dedicated sites of the world. They are easy to add to existing desktop experiences, but each change to the site requires both mobile and desktop updates. What’s more, Google frowns upon serving two different experiences as its crawlers must essentially read two sites because the content and code of mobile themes are separate.
Responsive design is client-side, meaning the whole page is delivered to the device browser (the client), and the browser then changes how the page appears in relation to the dimensions of the browser window.
The positives of RWD are often stated in that the sites are easy to maintain, and they provide a consistent experience across devices. On the other hand, one channel typically suffers. If mobile first, for example, then the desktop does not look quite right. If desktop first, then mobile is overloaded. Still, there is unified content and code, which minimizes the resource burden of catering to both desktop and mobile users.
Adaptive web design (AWD)
If a website doesn’t respond to your interaction, it’s not very responsive, and if it isn’t able to adapt to its surroundings (i.e. the device screen), it’s not very adaptive. Both of these can significantly impact the user experience.
The positives of AWD are often under-stated in that it delivers a device-specific experience and it improves website performance. AWD is not without its negatives though in that enterprises must manage separate code branches, which can add time to development and site updates – even though it uses a single content repository – still very much better than dedicated mobile sites. The content and code are both unified. Now, the mobile experience for both the end-user and the organization hosting the site itself, is becoming more mature.
Progressive web apps (PWA)
PWAs are user experiences that have the reach of the web, and the web reaches three times as many people as native apps. There is not a retailer alive who does not want to reach more people. Once they reach them, the users are presented with an app-like experience, using features of phone and browser to enhance mobile web experience – and quicker than other design options allow. PWAs do have their downfalls in that organizations need to manage separate code branches which can add time to development and site updates, but PWAs use a single content repository so it is still faster than updating mobile themes.
Why It’s Time to Move on from Responsive Web Design
While responsive web design is the de-facto mobile design approach these days, the negatives far outweigh the positives. Responsive sites send the entire website to a mobile device, which does nothing for user experience. This is called client-side (browser-side) rendering where a mobile browser is doing all the work. Adaptive Design is server-side rendering where the website decides which page elements to send to each browser and at what levels of quality.
With the risk of redundancy, one size doesn't fit all. Mobile first or desktop first means some experience will be second and customers are shopping on multiple devices in a continuous journey between devices. If retailers don't give the right experience in the context of the device someone is using, they will lose that customer engagement.
Why Adaptive and Progressive makes sense now
Technology is improving all the time and underlying technology is getting better and better to support adaptive and progressive approaches. AWD has so many positives from front-end development approaches that make it easier to maintain, front-end development approaches that make it faster, a single URL structure for search engine optimization (SEO) purposes and platforms that provide a mobile view for editors that can be integrated to an adaptive mobile strategy.
Still, the rising star in the game is progressive web apps which are changing how retailers and brands can create stand out ecommerce experiences online. They use stored customer data in the mobile browser like shipping addresses and credit card details, which allows for seamless checkout without loading separate pages. Using PWA, retailers are able to create fun experiences that behave like apps without developing mobile apps.
With times changing and technology evolving, consumer-savvy retailers would be right to ask if adaptive and responsive are right for their business. If device-specific features and experiences are important to the user experience and if users switch device during the journey, these new features are probably worth it.