We've always recommended that clients thoroughly understand and evaluate the pros and cons of building a good mobile design upfront. Having a well-designed mobile story should be one of the top priorities when developing a great eCommerce experience. When working with customers on their mobile strategy, we've found the most successful results come from a combination of several design principles.

Before launching into the details of our approach, it helps to understand the terminology surrounding mobile design since people refer to the same concept by different names.


So, what do we mean by responsive and adaptive design?

When we talk about responsive design, we are referring to sites that maintain a single code-base that utilizes the following:

1.CSS media queries and breakpoints

2.Flexible images

3.Fluid layouts that can be dynamically resized with the screen

In general, the exact same content is delivered to multiple devices and viewports. This pattern promotes easier maintainability and is the primary choice for both developers and designers.

The definition for adaptive design on the other hand can be further broken down into two subcategories:

1.Adaptive Delivery

2.Adaptive Templating

When people talk about adaptive design, they are usually referring to Adaptive Templating wherein you have separate sites or templates which maintain their own HTML/CSS/JavaScript and are catered for a specific device (e.g. your typical m-dot subdomain). One of the biggest downsides to this approach lie in the costs of maintaining these separate sites (which we?ve seen in practice to be very costly). Despite this, there are some legitimate use cases for adaptive templating. For example, short-lived campaigns or marketing pages where long term maintenance is not an issue can easily be built using this strategy. Another practical example would be the checkout flow or any form heavy page that requires a user to fill out loads of information. Optimizing this experience for the device in this case would be highly beneficial and would definitely improve conversion rates.


Finally, the pattern that?s been gaining a lot of traction lately is Adaptive Delivery. The idea here is to use the server to detect the device or client side code to detect viewport size to provide more relevant contextual content. For example, merchandisers can cater their banner ads or boost certain search results based on the device their customers are coming from. The business implications of this feature is unbounded.


Industry trends toward RWD

Industry trends have shown that responsive web design (RWD) is quickly becoming the standard for best practice in mobile design. Google has even taken a stance and flat out said that responsive design is their recommended design pattern and has gone so far as to rank properly constructed SEO responsive sites higher.[1] So, why is there such hesitation in adopting this practice and why is there still a debate?

A recent report by Forrester Research states that: "Skills, budget, and legacy technology prevent responsive web design adoption."[2] With the ubiquity of mobile devices, companies that have a good mobile design have a strong competitive advantage over those that don't. So in today's current market, it's hard to imagine why an enterprise wouldn't invest heavily in this channel. As with all things, there is no 'one-size-fits-all' solution. Implementing responsive web design, does take more upfront effort and typically takes between 20% to 50% longer than traditional website designs[3].

In cases where budget is a concern, many have fallen back to outsourcing development and have gone down the route of full adaptive templating. We've found that in the long run, the long-term maintenance cost in doing this far outweighs any upfront cost to properly design a responsive site in the beginning. The good news: As more and more frameworks provide better support and templates for responsive web design, we foresee the opportunity cost and effort of producing a good responsive site upfront drastically drop in the near future.


Defining Your Responsive and Adaptive Strategy

Our philosophy for having a good mobile design strategy aims at having a consistent experience across all devices through a responsive design, with the optimizations and content personalization achieved through adaptive delivery. At Broadleaf, this philosophy drives our product roadmap enabling developers and designers the ability to build a good mobile foundation using our responsive and adaptive components.

Why not just stop at responsive?

We've seen the industry moving more and more towards personalized customization and there is no sign of things slowing down. For better or for worse, companies want to know: Who you are, where you are, what your interests are, what the speed of your connection is, along with a host of other things. This trend is being driven by customers that expect companies to deliver relevant information and a personalized experience. Custom personalized delivery is key, which is where adaptive delivery shines.

One example of this is user-agent detection (e.g., your browser knowing what size screen you're viewing). This allows one more data point in creating a personalized and customized shopping experience. Responsive design is not without its flaws and one of the major criticism is the potential of it being a performance bottleneck. This is where the 'adaptive' benefits can make up where responsive fails. For example, with Broadleaf's image server optimization capabilities, using Spring Mobile?s device detection, you can easily serve mobile-optimized images that responsive media queries in your design can respond to, greatly improving performance.


Strive for RESS (Responsive + Server Side Components)

The philosophy that we've been discussing here has a term in the industry and is often referred to as the RESS approach. RESS is yet another acronym that stands for Responsive + Server Side Components. This philosophy is an ideal solution that encompasses the best of both worlds and should be the benchmark that companies strive to achieve.


Here are some best practices for a good mobile design strategy, as influenced by research written by Forrester?s Mark Grannan:

1.Always start with a good responsive foundation by making all content available to customers on any device using Responsive Web Design

BUT..."Without exception, website experiences must meet customers' performance expectations. Your customer will simply abandon the site if the content takes too long to render, and this impatience will only get stronger."[4]

2.Adapt content (within a Responsive template) to deliver a personalized experience to suit a user's context through Adaptive Delivery

3.Adapt templates to suit a user's context in cases where optimizations are needed through Adaptive Templating.

4.For one-off/edge use cases, you may opt for specific Mobile or tablet sites when appropriate.


What does this mean for my eCommerce mobile site?

If you are in the position to re-platform and are considering a new mobile strategy, consider following the RESS approach.

At a minimum, strive to deliver the same content and experience to multiple devices starting with a well thought out responsive design. As marketers and merchandisers come up with campaigns to deliver a more personalized and customized experience, you can begin to focus on dynamically serving content through adaptive delivery. Finally, where optimizations and device specific templating are needed, selectively use adaptive templating.

View the 'Mobile Strategy: Responsive vs. Adaptive Web Design' web event here.

[1] https://developers.google.com/webmasters/mobile-si...

[2] The Benefits Of The Responsive Web Go Far Beyond Design - Forrester Research, Inc., March 31 2015

[3] Analyzing the Value of Responsive Web Design Can Be Messy - Forrester Research, Inc., June 6 2014

[4] Optimize Your Responsive Website Performance To Overcome Mobile Hurdles ? Forrester Research, Inc., June 16, 2014