Can Responsive Design Future-Proof the Web?

The ubiquity of mobile devices creates multiple consumer touchpoints for businesses, yet it also presents technical and design challenges.

Gela Fridman
June 1, 2013

Introduction.

The ubiquity of mobile devices creates multiple consumer touchpoints for businesses, yet it also presents technical and design challenges. With mobile overtaking desk and laptops this year, businesses have a choice between two approaches to mobile web design–responsive and discrete. Responsive design has emerged as a popular approach, fueled by a desire to “create once, publish everywhere.” The lure of responsive design, however, and the promise of “future-proofing” a website present a development dilemma, as businesses may find it limiting depending on their overall goals.

Key Questions:

  • What role does design play in establishing a mobile leadership strategy?
  • When is a responsive design versus a discrete design approach best?
  • What are the limits of both responsive and discrete design?
  • How should I best align my organization to achieve my overall mobile strategy goals

Key Finding:

  • Responsive designs can create simple, consistent user experiences across a multitude of devices, but they are not panaceas for future-proofing designs.

A key part of establishing an overall mobile leadership strategy requires choosing the right web design approach.

There are multiple components to establishing mobile leadership including choosing a design and content management methodology, investing in the right technologies, and deciding on a mobile app strategy. All of these should be guided by user need. This report provides a framework for choosing a design approach based on user expectations, business goals, organizational structure and technical considerations. Businesses debating their mobile web design options—responsive vs. discrete—need to understand the implications of each on the user experience, their strategic goals, organizational structure and technical considerations.

This report focuses on how businesses should choose the best approach to mobile web design. It considers the rapid evolution of the mobile ecosystem, the exponential growth in devices, and how the right design methodology can not only address these issues, but provide solutions that support the overall goals of a business.

Devices proliferate for users, frustrate designers.

The mobile web is exploding. With mobile’s ascendance, businesses need to prioritize their mobile strategy and investment. But for too many companies, mobile is still an afterthought, when it should be considered a more critical investment than their desktop strategy.

Consider the dizzying array of devices consumers can now choose from to access the Internet: mobile phones, tablets, smart TVs, even wearable tech. While the plethora of options may benefit users, it creates a challenge for designers and developers. How can companies design digital experiences that look good on desktops, tablets and mobile phones with different dimensions, functions and form factors? Now that Google’s open source Android OS has more users than Apple’s iOS, the potential number of screen sizes (and even types of “screens”) becomes practically infinite.

What are responsive and discrete web design and why should I care?

Responsive design has emerged as a potential salve to development complexity, especially as companies are understandably looking for operational efficiencies. Typically, a site tailored for mobile viewing has a distinct domain (such as mobile.example.com). It generally requires a separate code base, its own content and UX strategy, and a discrete visual design. This means a brand has to build two separate websites, with potentially double the workload when it comes to maintenance.

MagentaSectionBreakBar800

Responsive vs. discrete.

What is responsive web design?

Responsive web design allows the layout and content to reformat, reposition and resize itself in real time. It uses a single code base to serve HTML based on the user’s device and browser. It includes fluid grids, flexible images and media queries to deliberately modify the page layout for different viewing contexts. 

What is discrete web design?

Discrete web design relies on multiple code bases, each individually optimized for desktop, tablet and mobile experiences. This approach permits more customization of different user experiences. 

Consider user experience.

Responsive design has emerged as a rejoinder to the increasing complexity of designing for multiple screens, with the promise of a single code base to serve every device. While the idea of a single code that can work in any digital environment is seductive, it may not be the best approach for every business. Above all, a company’s goals for the user experience should determine which methodology works best.

The canard about mobile users for some time has been that they are always “on the go.” But increasingly, mobile is only the starting point for activities that span multiple screens, both sequentially (moving from one device to another at different times) as well as simultaneously. In fact, 89 percent of users access their smartphone throughout the day, including while at home (Google/Ipsos OTX MediaCT). Consumers are relatively device-agnostic, using whatever device makes sense for them based on context, convenience and mindset. Regardless of the device they’re using, though, they want the same content and functionality, seamlessly, no matter the platform. 

Why choosing a methodology matters.

Responsive is more than just a buzzword, yet not everyone understands what it means. Very often, when companies say they want a responsive site, they mean one designed for ubiquity. Obviously, every business wants to have an effective presence across all digital channels. But responsive design is a very specific implementation. 

Choosing a design framework should not be left to designers and developers; instead, it’s an important strategic decision, as there are significant business implications in both the short and long term. Most critically, user needs should determine the approach chosen. In addition to the user experience, there are implications for cost and maintenance, flexibility and future extensibility, and ultimately, even how an organization is structured.

ResponsiveGoogleSidebar

Which approach is right for me?


Pros and cons.

There are advantages and disadvantages to each methodology. There are several factors an organization should consider when deciding which approach to adopt:

ResponsiveDesign2

While the promised simplicity of responsive design is appealing, the reality is much more complicated. Responsive means brands are limited in designing for context. Additionally, responsive requires constant iterations until the design is finalized, a great deal of testing, and high initial investment. 

As a basic rule-of-thumb (with caveats and exceptions), responsive design works best for sites with content-heavy, linear and static pages, while discrete design is better suited for highly interactive or transactional pages. (It’s important to note that there are hybrid solutions. See more below.)

Responsive design and ad delivery.

While responsive design has been touted as a potentially superior design framework for content-heavy sites, one issue still confounding the industry is effectively delivering advertising. Major publishers such as AOL, Hearst, Time, Google, Disney, and Microsoft have all opted to build responsive sites to “future-proof” their properties for new devices. Yet most of these sites depend on revenue from advertising that conforms in format to a fixed sized and placement, posing a challenge in a design environment where content is dynamically resized depending on device. 

The major problem is that ad servers have not yet caught up to responsive design. Most responsive sites still use separate desktop and mobile ad servers to deliver inventory. In the past decade, an ecosystem has emerged of servers, ad networks, and exchanges in order to accommodate the dedicated requirements of mobile devices.

While in theory, one server should be able to deliver ads across all environments, servers are actually not yet flexible enough to meet the demands of a responsive site, with the use of HTML iframes posing a particular challenge. Another barrier to delivering advertising on responsive sites is ad tagging. Traditionally, sites have needed just two tags for ads—mobile and desktop. But in responsive design, if there are eight breakpoints designated, a page may require eight different tags if a different ad size is needed at each. “Smart tags” are a potential solution but still nascent, and so workarounds are still needed today. 

Last, the industry has increasingly emphasized viewability as a form of ad currency. So rendering a page on mobile with ads below the fold that are above the fold on desktop becomes problematic. 

Publishers have devised stopgap measures to address some of these issues, until advertisers and ad technology catches up. For companies that rely on advertising a deeper understanding of the full implications of responsive design is critical.

MagentaSectionBreakBar800

Choosing a design methodology.

Companies considering which design approach to embrace should ask themselves several questions, prioritizing their business goals and the user experience above others. Why does the user experience outweigh other considerations? Because a happy customer is a loyal one, and unhappy customers are highly vocal. Understanding and meeting the needs of the user, and aligning business goals appropriately, should form the basis for choosing a design methodology.

responsiveChoosingChart
MagentaSectionBreakBar800

A hybrid approach.

Too often, mobile design decisions are constrained by delegating responsibility to the technology team and existing resources and tools. We strongly believe this is backward. While technical considerations play a part, the desired user experience and larger business objectives should weigh more heavily for a company choosing a mobile design approach. 

Choosing a design approach is not a zero sum game. Users are increasingly expecting parity across channels. A third option is creating a hybrid methodology, combining responsive and discrete design elements to create the optimal user experience. Responsive design can be a viable strategy to tweak the mobile experience for different screen sizes.

  • Uses responsive layouts on pages that are primarily for browsing and are highly searchable.
  • Uses discrete code for task-based, process-oriented flows such as checkouts on a commerce site.
  • Creates responsive CSS for the most prevalent devices and screen sizes.
  • Uses discrete design elements to detect mobile devices and offers location-aware content, click-to-call, collapsed menus, and modified headlines.
  • Detects tablet, removes click-to-call, and offers touch-optimized desktop experience.
  • Detects bandwidth speed and changes high bandwidth elements (e.g. video).

For new templates, brands should build for mobile first, then “enhance up” to larger screens. In addition to meeting user expectations for parity across channels, this approach also means fewer code bases to maintain, an ability to move towards responsive design in phases, and relatively low maintenance once implemented. Determining which parts of a site should be responsive and which should have discrete, mobile-optimized sections can be done by examining site data to see which pages are more heavily trafficked by different devices, as well as what user tasks and content elements are required. 

While a hybrid approach appears to solve the development conundrum, it is not without its pitfalls. A hybrid approach requires strong documentation and business intelligence to maintain feature or page-level differences. It also requires compromise—brands need to consider the trade-off between potentially optimizing for SEO and optimizing for the user experience, usually on a case-by-case basis.

MagentaSectionBreakBar800

Conclusion.

Businesses need to align organizational structure with the chosen design framework.

A company that adopts a responsive design approach may also need to realign its organizational structure and processes. Responsive design requires technical developers to be involved much earlier in the design process to understand what functionality is feasible. Content strategists also need to understand how designing for responsive affects copy, with a need for shorter, more concise language. Additionally, reviewing work in responsive design requires ongoing input across different devices, rather than intermittent wireframe reviews. Most importantly, digital and mobile departments must be integrated to make responsive design work.

Being a mobile leader requires choosing the right design framework, and that choice must be driven by user needs and expectations. Businesses need to think carefully about their users’ experiences, as well as their overall business goals, content, organizational structure and technical expertise. For some, these factors will lead to choosing a hybrid approach combining the best of responsive and discrete methodologies. Whatever the ultimate approach, businesses must recognize that while future-proofing is an alluring concept, it remains far from a proven reality.

With Marissa Gluck, Director, Huge Ideas, and Tom O'Reilly, Director, Huge Content.

Read This.