Responsive and Adaptive Web Design for Retail

In this blog, I'd like to talk about some of the e-commerce-specific challenges around responsive web design, including three key factors that have led to the challenges with retailers mentioned within the Forrester report followed by a discussion of ways to address each of these challenges in order to provide an exceptional responsive and adaptive web design experience.

1. Aging legacy platforms
The core technology stack used by all of the major e-commerce platforms remains largely unchanged since its inception roughly 10-15 years ago. A monolithic application server is used to render the entire user interface using technologies like JSPs, ASPs, or PHP on the server to deliver a fully-rendered HTML page to the client. In some cases, more modern web 2.0 technologies like AJAX have been used to supplement the fully-rendered HTML page and provide a more dynamic user experience, but the bulk of the page rendering still takes place on the server side.

Rendering the UI on the server side is not a cheap operation. By utilizing JSPs, ASPs, or PHP as the core user interface technology, retailers are forced to have very large environments in order to scale to meet the needs of their consumers. With the rise of mobile and tablet devices, these problems have only become magnified: more users are accessing the e-commerce sites, driving the need for more scale, and these users are on devices where lightning-fast response times are expected.

Enter responsive design. Adding the additional resources that are necessary in order to make a page responsive adds an additional performance drain onto an already heavily taxed software stack; but is the root of the problem truly the responsive design, or is it applying the responsive design on top of an already aging system that is incredibly challenging to tune and scale?

Some e-commerce platforms, like WebSphere Commerce, have begun the process of modernizing their platforms in order to handle the new paradigm by adding access to the platform via RESTful services. For this reason, we believe that WebSphere Commerce is the platform of choice as e-commerce moves into supporting newer technologies and putting the power in the hands of the developers by allowing them to utilize the UI technology stack of their choice in order to build cutting-edge e-commerce sites.

2. Use of mobile-unfriendly technology
Responsive and adaptive web design is a great tool in the mobile toolkit, but it is not a silver bullet that will solve all of your mobility problems. By combining it with a true mobile platform like IBM Worklight, however, we gain the ability to deliver a mobile-friendly UI that is capable of being shared across all delivery platforms:

• Desktop web
• Tablet web
• Mobile web
• Installable tablet application
• Installable mobile application

By designing the UI in a componentized and mobile-friendly fashion and by utilizing modern JavaScript frameworks like Backbone, Angular, and React, we can achieve a seamless UI experience across the entire omni-channel. In addition, we can share UI components across multiple implementations, driving down development costs and providing a consistently branded user experience regardless of the platform.

Developing user interfaces on server-rendered UI technologies does not allow re-use in a similar fashion. A server-side UI technology choice cannot provide an adequate user experience in an installable application since the entire user interface lives on the server rather than the client. As retail moves forward and providing mobile applications becomes an absolute necessity, choosing to build user interfaces on the server side will lead to retailers supporting multiple user interfaces which will then provide an inconsistent experience across the omni-channel and drive up development costs since multiple display tiers on different technology stacks will need to be supported.

3. Legacy desktop functionality
Many retailers look into responsive and adaptive design and decide against it because of the seemingly insurmountable challenge of replacing a user interface that is many years old and has embedded business logic spread throughout every nook and cranny. This avenue is incredibly risky and retailers' hesitation with this approach is certainly not misguided; any new software implementation will have challenges in Version 1 and thus replacing the entire stack at once is not recommended.

Instead of replacing everything at one time, we use a staggered approach centered around improving the mobile and tablet experience first and then migrating off of the legacy desktop UI over time. This approach allows retailers the flexibility to roll out their responsive solution over time by starting with mobile, tablet, or both. By focusing on providing an excellent mobile and tablet experience to their users, retailers can increase conversions on these two platforms, which are approaching 50% of all traffic for retail, while leaving the desktop site unchanged. Over time, more and more desktop features can be incorporated into the responsive mobile and tablet site until the time comes for a full migration over to the new solution and a sunset of the legacy desktop-only user interface.

Toys R' Us is an excellent example of this strategy in action. Viewing www.toysrus.com on a desktop browser produces a website catering to desktop dimensions only, whereas viewing m.toysrus.com produces a fully responsive site that serves both mobile and tablet devices but can also expand to suit the needs of the desktop user. One can assume that it's only a matter of time before Toys R' Us has made a full transition to the responsive site, providing customers a consistently branded experience and saving all of the IT-related costs necessary for maintaining multiple, siloed user interfaces.

Responsive and adaptive web design is the future of retail. The caution, however, is that selecting the correct technology stack and choosing a rollout strategy that minimizes risks is absolutely vital. Simply shoe-horning responsive web design into your existing legacy UI is insufficient--the technologies selected must be mobile-friendly in order for your project to be successful in engaging today's mobile shoppers.