Is Your Mobile Experience Chaotic? Adaptive May Be The Answer
There is a classic scene in the 1935 Marx Brothers movie A Night at the Opera where three brothers are settling in to their small stateroom. Over the course of four minutes, a stream of visitors come to the room, including an engineer, his assistant, a pedicurist, and waiters bringing an extended food order. (The scene is available on YouTube, here.)
Eighty years later, this manic scene serves as visualized metaphor for what happens when browser-based web applications are rendered on the screens of mobile devices, especially smartphones. There is a crush of ungainly elements, many entirely unnecessary, that force their way in to the confined space of the device’s memory and screen, and cause far more disruption than is necessary.
In recent years, the consumer world has gone mobile. That means sales transactions – from initial search and comparison shopping through to payment – are increasingly carried out on mobile devices instead of desktop PCs. To wit, the 2014 holiday season saw a dramatic increase in mobile shopping over the previous year, with mobile transactions close to 1/3 of all eCommerce.
The Predecessors: M-dot and RWD
A few years ago, mobile users had to pinch and scroll their way through a legacy system of pages with unnavigable drop-down menus and tiny hyperlinks. To fix this obviously poor experience, many online businesses chose to create websites in duplicate, redirecting mobile users to an “m-dot” site. This involved creating two or three entirely separate applications.
Aside from the maintenance overhead of dealing with multiple web apps, problems arose with m-dot when designers chose to vary the mobile content and alter the customer experience depending on device. They did this for two reasons: first, they saw an opportunity to focus on what they assumed the user would need in the mobile context, and second, to minimize the amount of effort and expense required to maintain a mobile site. The results were mobile sites with dramatically rearranged and simplified navigation structure and limited access to content when compared with their desktop counterparts.
For these reasons, the m-dot sites largely did not succeed in improving the mobile experience for consumers. Customers who first visited a web app on a desktop computer and returned on a mobile device were confused by missing or rearranged pages or links. It was, in essence, an inconsistent experience.
Responsive Web Design (RWD) was developed to rectify this situation with a method for building a single web app that would display correctly on any screen size. The layout defined by RWD is based on a grid concept, using rows, columns, and breakpoints. For screens of different sizes, the grid rearranges to match the screen area, and the images and items continue to fall in line sequentially. These changes happen within the device itself – the “client side” in developer parlance.
The downside of RWD is that it’s very difficult to design a desktop site that includes all the desired features, content, and functionality that also works seamlessly on smaller screens. Given that all the HTML, CSS, and JavaScript files of the desktop presentation – that is, the “full payload” – will be downloaded by mobile browsers, the potential for slow performance grows. Even if what the user sees when visiting an RWD app is nothing like the crowded stateroom of the Marx brothers, that’s still exactly what’s happening behind the scenes. Content may be hidden from view or forced down below the fold, but it’s all stuffed in one way or another. This is a major detriment to performance and consistency.
Enter Adaptive Web Design
This is the age of “adapt or die”. Retailers and others who seek to interact successfully with the customer are beginning to realize that the prevailing browser-based mobile web solutions are no longer adequate. To truly present a great experience, the elements of a page must arrive not just quickly, but in an intelligent fashion – curated for the device and the network where it operates.
That’s exactly what can be accomplished with adaptive web design, a solution that builds on the grid-stacking concept of RWD but adds intelligence to the process. At the most basic level, AWD selectively serves content based on the user’s context, so unnecessary content never reaches the user. To make an analogy to the garment world: if RWD is like spandex, stretching to fit any body type but remaining essentially the same for every wearer (whether flattering or not), AWD is like having a massive wardrobe of easily interchangeable pieces in all shapes and sizes ready to construct an optimally flattering outfit on the fly.
The best way to observe how AWD modifies the customer experience is to check out a couple of examples. Take a look at these companies, both on your PC and on your mobile device, and observe how they have successfully translated the experience.
- Apple.com
- About.com
- Lufthansa.com
- USAtoday.com
In an age of consistently engaging customer experience, vendors have to choose their strategies carefully. Otherwise, they may end up just another stuffy, crowded room in a world where users want a clean, hospitable experience.