Key Takeaways

A New Approach To Web Development Emerges

In the age of the splinternet, eBusiness leaders must now support optimized commerce experiences across an increasingly complex landscape of web-enabled touchpoints. It is no wonder that they are intrigued by responsive design, a new approach to web development intended to support optimized web experiences from a single front-end code base.

Responsive Design Is A Philosophy Not A Technology

Responsive design is an approach to web development that forces user experience developers to design and optimize from the outset for all touchpoints they need to support, regardless of screen size or device orientation. It is enabled by technology, but the execution of a responsive site requires a new paradigm in the approach to web development.

The Path To Responsive Design Isn’t Without Obstacles

Responsive design simplifies many of the challenges that eBusiness teams face today with their web technology architecture. However, there are implications, challenges, and downsides eBusiness professionals must be aware of to ensure success.

Understanding Responsive Design: What eBusiness Teams Need To Know About The Future Of Multitouchpoint Web Design 

Why Read This Report

The splinternet has created a headache for eBusiness leaders who must now support optimized commerce experiences across an increasingly complex landscape of web-enabled touchpoints. Maintaining separate code bases and web development teams for desktop, tablet, and mobile experiences is costly, but has been a necessary evil for many. Others have outsourced their mobile commerce development and maintenance to a solution provider or interactive agency, but this approach can be costly and limits control and flexibility. It is no wonder that eBusiness professionals are intrigued by responsive design, a new approach to web development intended to support optimized web experiences from a single front-end code base. This document sets out to explain what responsive design is and isn’t, as well as why it will become strategically important to many eBusiness teams.

Responsive Design Is A Philosophy, Not A Technology

So what is responsive design, and does it really solve the challenge of supporting web experiences across multiple touchpoints? First of all, responsive design is not a technology, it’s a philosophy — an approach to web development that forces user experience developers to design and optimize from the outset for the touchpoints they need to support, regardless of screen size, orientation, or device. Instead of forcing a smartphone user to pinch, zoom, or scroll to view content designed for consumption on the desktop, a responsive site responds within the constraints of the device to deliver an experience that is contextual to the size of the screen as sites like Sony.com and Spoonful.com demonstrate (see Figure 1). The concept is enabled by technology — a new feature in CSS3 known as “media queries” that allows capable browsers to detect the size of the user’s screen — but the execution of a responsive site requires a new paradigm in the approach to web development.

The Business Case For Responsive Design Has eBusiness Leaders Intrigued

Today, it is common to find that eBusiness leaders have either outsourced the development and maintenance of their mobile sites or created a standalone mobile development group. Both approaches require additional overhead and costs to support the Web on mobile devices. Additionally, with tablet ownership expected to reach 112.5 million US consumers by 2016, many eBusiness teams are now focusing on the development of tablet-optimized sites (see Figure 2). However, the prospect of creating yet another code base and support structure for tablet devices fills these teams with fear as more frequent updates are required, costs threaten to escalate, and the risks associated with maintaining a consistent and robust experience increase.

This is where responsive design plays its trump card: The ability to deliver optimized web experiences across any web-enabled touchpoint. It is an intriguing proposition for eBusiness leaders faced with supporting eCommerce on desktops, notebooks, tablets, and smartphones as well as other emerging devices like connected TVs and in-store kiosks. Responsive design simplifies many of the challenges that eBusiness teams face today with their web technology architecture by providing:

A single code base for all web experiences. At the heart of responsive design lies a new feature in CSS3: “media queries.” Media queries empower web developers to apply a specific style-sheet to a page based on the screen size (sometimes referred to as a viewport) of the touchpoint. Subsequently, they can support multiple touchpoints, screen sizes, and orientations from a single set of web templates simply by developing the appropriate styling conventions for each touchpoint via CSS3.

A single site for all web experiences. With a single code base, IT must only create a single site with a single set of web infrastructure to support that site. No longer are separate sites required for the desktop, tablet, and mobile experiences. Those eBusiness teams using enterprise commerce platforms can simplify their site management configurations, while those with homegrown solutions will likely be able to reduce their hosting and infrastructure expenses.

A reduction in maintenance risks and release cycle times. The cost of regression testing with each release increases when supporting multiple touchpoints.. For those eBusiness teams with separate desktop, tablet, and mobile sites, the QA cycle required to push out a new release is a major burden on both budget and pace of innovation. The actual device testing across different devices types, screen sizes, operating systems, and browser versions is the most costly part of this. With a responsive site, the code base is identical across all devices so the developers know exactly where they made changes and where the problems are likely to be, lowering the risk. As a consequence, they can shift to simply “smoke testing” each release without the need to undergo comprehensive end-to-end functionality regression testing. A single “device-agnostic” URL structure. Many mobile and tablet commerce sites are hosted on sub “m-dot” or “t-dot” domains. This was never a strategic decision, but one of necessity given that most of today’s mobile and tablet sites have been developed on a separate code base or outsourced to an agency or mobile commerce solution provider. Therefore, today the onus is on the site owner to configure and maintain URL redirection rules to ensure that mobile users are always redirected to the mobile-optimized pages. Maintaining these redirect rules and ensuring they work across all devices is a headache for eBusiness teams. With responsive design, there is one set of URLs for all devices as the experience is optimized and rendered on the device rather than the server.

A noncompeting SEO format. When an “m-dot” URL is used, it is inevitable that mobile users will create links to or share pages from the mobile site, which essentially steals link equity from the desktop site. If the site had been built using responsive design, the single product page would have benefitted from the aggregate sum of all of the links instead of them being shared out among the respective links to the separate desktop, tablet, and mobile sites. The benefit is a consolidation of link equity to a single page, enabling a single responsive design page to gather more link equity and subsequently rank better than the separate desktop tablet and mobile pages could have alone.

A way to size up as well as down. When thinking about responsive design, it is easy to make the mistake of using it to build experiences for devices with small screens, but responsive design also enables eBusiness teams to create unique experiences for desktop and laptop users with large or high-resolution screens. Presenting an eCommerce experience that efficiently uses all of the available real estate on a 22-inch screen can have a positive impact on conversation rates for those users. Today, unfortunately, few eCommerce sites are optimized for large displays. eBusiness teams are guilty of developing their desktop sites against the lowest-common desktop screen size denominator, and subsequently miss the opportunity to create a unique online experience for desktop users with large monitors.

A consistent and optimized experience across all web-enabled touchpoints. For many eBusiness teams, the quest for optimized web experiences on different touchpoints has come at the sacrifice of experience consistency: Features that are available on the Web are disabled or simplified for the mobile experience. Responsive design forces developers and user experience designers to decide from the outset how each page will behave across all supported touchpoints. As a result, decisions to downgrade functionality on smaller screen touchpoints become conscious, and consistency of experiences across touchpoints can be better enforced. The code always exists; it is a matter of deciding whether to use it.

Responsive Means Back To One Web Team Again

Many eBusiness leaders have divided the responsibilities of the Web and mobile into separate teams, putting developers with modern web development expertise (primarily HTML5 and CSS3) in the mobile group. Some retailers like Staples have also added separate tablet-optimized sites to the mix — tablet development tends to live together with mobile, as 93% of eBusiness leaders assign responsibility for tablet development to their mobile team. Responsive design calls for a breakdown of these development silos, putting all web responsibility back into a single team. On a responsive team, there are still separate mobile, tablet, and desktop usability experts, but they work together to support a single team of web developers. In the long term, this centralization of web user experience and development resources will create efficiencies and flexibility for eBusiness teams.

The Path To A Responsive Site Is Not Without Obstacles

Although the business case for implementing a responsive site may seem compelling, eBusiness leaders must carefully consider if the approach is a fit for their long-term online strategy. They must be aware of the implications, challenges, and downsides of adopting a responsive web development philosophy and make sure they have the budget, resources, and skill sets in place to ensure success. Top of mind to consider is that:

Developing responsive pages is time-consuming. Even after your user experience designers and web developers fully get a grasp of the concepts, approaches, and techniques for building responsive sites, the thought process and effort to build a page that will deliver an optimum experience across multiple touchpoints can be as much as twice the effort of building a conventional web page designed for a single touchpoint.

Older desktop browsers will throw a spanner in the works. The browsers of yesteryear (e.g., IE 7 and 8) don’t recognize all of the new features of CSS3, so consequently, a responsive site will encounter issues rendering on these older desktop browsers. This is not an insurmountable hurdle, however; web developers will likely have to apply workarounds in their code to ensure compatibility on older browsers by using JavaScript libraries that emulate the functionality of media queries on older browsers or employ graceful degradation techniques to de-scope functionality in a user friendly manner. One alternative option is to use a web proxy or screen scraping solution like those currently used by many eBusiness teams to support their mobile commerce sites to transpose the new responsive site experience onto older browsers.3

Performance is a not a given. Unlike screen scraping and web proxy solutions that optimize the experience on the server side, with responsive sites the optimization of the experience happens on the device itself. Responsive sites work by hiding content that is not required to be displayed on a specific device; however, the website code is the same regardless of device. The overhead of delivering the HTML, JavaScript, and CSS code should not result in any considerable performance issues, even over mobile connections, but web developers must ensure that image content is optimized on the server side to ensure that large image files intended for a desktop experience are not inadvertently downloaded to a mobile device.

Your existing eCommerce or CMS platform may not play nice. Many of the enterprise eCommerce or content management system (CMS) platforms currently deployed were designed in an era before responsive design, HMTL5, and CSS3. Subsequently, web developers will likely find issues with the default page templates that ship with these platforms. Although unlikely to be a showstopper, web developers may need to circumvent mobile-specific capabilities or code awkward workarounds to get their existing eCommerce or CMS platform to support a responsive web architecture.

It requires a front-end rewrite. Responsive design cannot be bolted onto your existing site. Most eBusiness teams that want to get serious about responsive design will have to oversee a rewrite of their existing HTML and CSS front-end code. Building a responsive site requires the user experience team and web developers to design for responsive from the outset.

Redesigning big sites will require cross-functional collaboration. Internet pure plays and multichannel retailers with a relatively simple online page workflow will find that moving to responsive design will have little business impact outside of the eBusiness team. However, large enterprise organizations with complex online assets spread across organizational teams will find that moving their entire web infrastructure to responsive will be a large undertaking. For these firms, the adoption of responsive design will likely need to occur in a phased approach, prioritizing those areas of the site, brands, or features that are most commonly accessed on mobile devices. The downside of this incremental implementation approach will be an inconsistency, as some pages (e.g., the online store) will be optimized for mobile devices while others like the marketing site or careers portal may not.

Developing unique experiences for a given touchpoint requires extra effort. Consistency is at the heart of the responsive design value proposition, but eBusiness professionals have valid reasons for developing unique experiences on specific devices. For example, a one-page checkout process may be ideal for the Web and tablets, but on a mobile device, a two- or three-screen process may be better. Responsive design principles alone don’t solve for these scenarios; however, an associated philosophy known as “progressive enhancement” can be used to develop and apply unique experiences for a specific device.

Recommendations: Recognize That Responsive Design May Not Be Right For You, Yet . . .

eBusiness leaders we spoke with confessed that they have conflicting ambitions. On one hand, they want to create unique web experiences that are optimally designed for specific touchpoints. However, there are clear cost and operational efficiencies to be gained from managing a single web code base that can serve all touchpoints. As eBusiness professionals evaluate if responsive design is a fit for their online commerce infrastructure, they must keep in mind that:

Responsive design and HTML5 are mutually exclusive. A popular misconception is that CSS3 is part of and requires HTML5, but in fact, they are two separate technologies. Subsequently, it is possible to develop a responsive site without using HTML5; however, in reality, most development teams are using the opportunity of building a responsive site to start experimenting with the new features of both CSS3 and HTML5 in parallel.

As an early adopter, there will be many challenges ahead. Responsive design is an emerging philosophy that is part art and part science. While there are many good examples of responsive sites from firms such as The Boston Globe, Sony, and Starbucks, there are currently few responsive eCommerce sites, with Indochino, lot18, decide.com, and Perry Ellis among the few live examples. This dynamic is set to change, however, as eBusiness teams with a history of adopting emerging web technologies (think Ajax or HTML5) early on will likely find developing a responsive site is a rewarding challenge, but like with any emerging technology, there will be hurdles for those who take the lead. As awareness of responsive design increases, eBusiness professionals should position themselves to take advantage of code libraries, developer tools, and best practices as these support options emerge from both commercial vendors and the open source community.

If you proceed, you will probably need agency help. Responsive design is an emerging science that requires a completely different and focused approach to web development. The learning curve for user experience designers and web developers alike will be steep. Forrester recommends that eBusiness leaders who make the decision to invest in a responsive site should seek outside expertise from an interactive web agency that has already honed these skills and can demonstrate an existing portfolio of responsive sites they have developed. It may not be necessary to completely outsource the development of a responsive site, but augmenting your inhouse user experience and development team with outside expertise will help reduce the risk of a responsive implementation.

The timing might not be right. Most eBusiness teams typically employ a three- or four-year site redesign cycle. If you have recently been through a site re-launch, then tossing out this effort and going back to the drawing board to develop a responsive site may be too big a cost pill to swallow given your current capital budget and competing eBusiness technology investment priorities. Furthermore, some eBusiness teams may be locked into long-term contractual relationships with the vendors that currently support their mCommerce and tablet sites. The ROI of implementing a responsive site may not make sense until these contracts approach their renewal window. Even at that point in time, building and maintaining your own responsive site may not be more cost-effective than using the existing web-proxy service or mobile commerce solution platform provider you have today.

It might not be a fit for you. Responsive design will be an attractive proposition for a midsize retailer with limited budget and resources to create and support unique web experiences across mobile, tablets, and the desktop. However, large retailers or other eBusiness teams with the budget, resources, and a mobile web strategy that calls for significant differentiation from the desktop may prefer to stand their current course and continue to support separate team and code bases for each of the touchpoints they support.

It doesn’t replace the need for apps. Responsive design is for web experiences. It can provide a means for eBusiness leaders to drive efficiencies in the development and maintenance of their web-based commerce experiences; however, it not does negate the need for apps nor will it play any significant role in simplifying the development of apps. Those eBusiness teams that have developed hybrid apps may be able to leverage their responsive site to render web-based content in their app (treating the app simply as another viewport or screen), thus subsequently streamlining the app development process, but they will still need to maintain a separate team focused on app development.

Supplemental Material: Methodology

Forrester fielded its Q4 2011 Global Mobile Maturity Online Survey to 245 professionals from our ongoing Marketing & Strategy Research Panel. The panel consists of volunteers who join on the basis of interest and familiarity with specific marketing and strategy topics. For quality assurance, panelists are required to provide contact information and answer basic questions about their firms’ revenue and budgets. Forrester fielded the survey from October 25 to December 10, 2011. Respondent incentives included a summary of the survey results. Exact sample sizes are provided in this report on a question-by-question basis. Panels are not guaranteed to be representative of the population. Unless otherwise noted, statistical data is intended to be used for descriptive and not inferential purposes.