Can Responsive Design Future-Proof the Web? Marissa Gluck, Director, Huge Ideas (Author) Tom O Reilly, Director, Huge Content (Editor)

Transcription

1 Can Responsive Design Future-Proof the Web? Marissa Gluck, Director, Huge Ideas (Author) Tom O Reilly, Director, Huge Content (Editor)

2 1 Introduction. Key Finding: Responsive designs can create simple, consistent user experiences across a multitude of devices, but they are not 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 respon- website present a development dilemma, as businesses may 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? Note: This report looks exclusively at mobile web design methodologies. We will explore the app versus mobile-optimized site debate another key aspect of an overall mobile design strategy in a future Huge Ideas report. 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. 2

3 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 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 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 un- 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. Responsive design has emerged as a potential salve to development complexity. True responsive design uses a single code base to serve the same HTML everywhere. Discrete serves separate code bases, allowing for more customization. 3

4 2 Sequential Responsive vs. discrete. Usage Moving from one device to another at different times to accomplish a task. 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 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 Choosing a design framework should not be left to designers and developers; instead, it s an important strategic decision, Simultaneous Usage Using more than one device at the same time for either a related or unrelated activity. Complementary Usage - Related Activity Multi-tasking - Unrelated activity 4

5 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, organization is structured. Google and Responsive Design. Google is one of the strongest proponents of responsive design. In addition to promoting the ease of a single URL for sharing content, Google also says that responsive design helps its algorithms assign indexing properties for the content, aiding in search engine optimization. The company also maintains that responsive design saves resources for both a website and its own crawlers since it only requires crawling a site once to index its contents instead of multiple times. While Google is certainly the 800-pound gorilla of search, its design strategy. While Google s endorsement of a responsive design approach carries weight within the development community, factors beyond Google s control should weigh more heavily on a company s decision to design a responsive site. Certainly businesses should keep an eye on Google s perspective, but mobile design strategy should be dictated by user need rather than marketplace expediency. 5

6 3 Which approach is right for me? Pros and Cons. Responsive. Discrete. There are advantages and disadvantages to each methodology. There are several factors an organization should consider when deciding which approach to adopt: Pros. Single code base requires less long-term maintenance. Allows faster adaptation to new screen sizes. Single URL for improved search rankings and social sharing experiences. No need to set up serverside redirects. Potentially lowers mobile bounce rates while in- Cons. More UX design constraints. Longer lead time and higher one-time setup cost. Requires high collaboration between UX, design and development. Harder to integrate IAB standard ads. May have to make functionality compromises if Pros. Discrete code bases ensure UX and content will devices. Lower one-time setup costs and shorter QA process. Better device integration for location and touch. Loading only mobile assets potentially results in faster load times. Cons. Code becomes outdated quickly as new sizes, resolutions and form factors arise. Higher maintenance costs. Some users may not want a separate experience, particularly on tablets. Potentially different URL structures can impact SEO. creasing page views and user goals vary between time spent. desktop and mobile. 6

7 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 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.) Generally, responsive is the right design for static pages with lots of content, and discrete for interactive or transactional pages. 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 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 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. AD SPACE vs. AD SPACE 7

8 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. User Experience. Does responsive design deliver an optimal user experience? What sort of functionality does my site need? Is it transactional or mostly content? High functionality and transactional features may require discrete design to optimize the user experience. Business Goals. What are my business priorities? Do I want to be an innovator? If it s important to be considered an innovator, brands may want to consider discrete design, which allows for bringing products to market faster. Responsive design requires a slower development cycle. Organizational Structure. How is my digital unit structured? Do I need to reorganize my digital team? A responsive design approach requires tighter integration between web and mobile. Separate teams will hinder the development process. Additionally, responsive design should only require a single team for Technical Considerations. Which methodology works best with my solutions architecture? Discrete design will have higher maintenance costs long-term. Additionally, as new screen sizes and form factors emerge, it will be harder to react quickly to them. maintenance. 8

9 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. A third option: combining responsive and discrete methodologies. 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. A hybrid approach: Uses responsive layouts on pages that are primarily for browsing and are highly searchable. 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 Detects tablet, removes click-to-call, and offers touchoptimized desktop experience. Detects bandwidth speed and changes high bandwidth elements (e.g. video). 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 ent 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. 9

10 4 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 cept, it remains far from a proven reality. Businesses need to think carefully about their users experiences, as well as their overall business goals, content, organizational structure and technical expertise. 10

11 Acknowledgements. The authors acknowledge the following from Huge for contributing their insights and feedback: User Experience Sophie Kleber Todd Lefelt Michal Pasternak Judd Schoenholtz Emily Wengert Technology Gela Fridman Products Ece Manisali Barbara Pantuso 11