Future-Proofing the Web: Choosing the Optimal Mobile Design Strategy


Published on

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

Published in: Design
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Future-Proofing the Web: Choosing the Optimal Mobile Design Strategy

  1. 1. Future-Proofing the Web:Choosing the OptimalMobile Design Strategy. Marissa Gluck, Director, Huge Ideas (Author)Tom O’Reilly, Director, Huge Content (Editor)
  2. 2. 2With mobile overtaking desk and laptops this year, business-es cannot afford to delay choosing a mobile strategy. Whilethe ubiquity of mobile devices creates multiple consumertouchpoints for businesses, it also presents technical anddesign challenges. Responsive design has emerged as apopular approach, fueled by a desire to “create once, publisheverywhere.” The lure of responsive design, however, andthe promise of “future-proofing” a website present a develop-ment dilemma, as businesses may find that strategy limitingdepending on their overall goals.Key Questions• What role does design play in establishing a mobileleadership strategy?• When is a responsive design versus a discrete designapproach best?• What are the limits of both responsive and discretedesign strategies?• How should I best align my organization to achievemy mobile strategy goals?Note: This report looks exclusively at mobile web designstrategies. We will explore the app versus mobile-optimizedsite debate in a future Huge Ideas report.Establishing mobile leadership requires choosingthe right design strategy.There are multiple components to establishing mobile leader-ship including choosing a design and content managementmethodology, investing in the right technologies, and decidingon a mobile app strategy. All of these should be guided byuser need. This report provides a framework for choosinga design approach based on user expectations, businessgoals, organizational structure and technical considerations.Businesses debating their mobile design options—responsivevs. discrete—need to understand the implications of eachon the user experience, their strategic goals, organizationalstructure and technical considerations.This report, first in a series, focuses on how businessesshould choose a mobile design strategy. It considers therapid evolution of the mobile ecosystem, the exponentialgrowth in devices, and how the right design strategy can notonly address these issues, but provide solutions that supportthe overall goals of a business.Introduction.Key Finding:Companies need todevelop a mobilestrategy now if theyhope to establishleadership in theircategory.11
  3. 3. 3Devices proliferate for users, frustrate designers.The mobile web is exploding. With mobile’s ascendance,businesses need to prioritize their mobile strategy andinvestment. But for too many companies, mobile is still anafterthought, when it should be considered a more criticalinvestment than their desktop strategy.Consider the dizzying array of devices consumers can nowchoose from to access the Internet: mobile phones, tablets,smart TVs, even wearable tech. While the plethora of optionsmay benefit users, it creates a challenge for designers anddevelopers. How can companies design digital experiencesthat look good on desktops, tablets and mobile phoneswith different dimensions, functions and form factors? Nowthat Google’s open source Android OS has more users thanApple’s iOS, the potential number of screen sizes (and eventypes of “screens”) becomes practically infinite.What are responsive and discrete web design andwhy should I care?Responsive design has emerged as a potential salve todevelopment complexity, especially as companies are un-derstandably looking for operational efficiencies. Typically, asite tailored for mobile viewing has a distinct domain (suchas mobile.example.com). It generally requires a separatecode base, its own content and UX strategy, and a discretevisual design. This means a brand has to build two separatewebsites, with potentially double the workload when it comesto maintenance.Responsive design hasemerged as a potentialsalve to developmentcomplexity.True responsive design uses a single code base to serve thesame HTML everywhere.Discrete serves separate code bases, allowing formore customization.
  4. 4. 4What is responsive web design?Responsive web design allows the layout and content toreformat, reposition and resize itself in real time. It uses asingle code base to serve HTML based on the user’s deviceand browser. It includes fluid grids, flexible images and mediaqueries to deliberately modify the page layout for differentviewing contexts.What is discrete web design?Discrete web design relies on multiple code bases, eachindividually optimized for desktop, tablet and mobile experi-ences. This approach permits more customization of differentuser experiences.Consider User Experience.Responsive design has emerged as a rejoinder to the increas-ing complexity of designing for multiple screens, with the prom-ise of a single code base to serve every device. While the ideaof a single code that can work in any digital environment isseductive, it may not be the best approach for every business.Above all, a company’s goals for the user experience shoulddetermine which methodology works best.The canard about mobile users for some time has been thatthey are always “on the go.” But increasingly, mobile is onlythe starting point for activities that span multiple screens, bothsequentially (moving from one device to another at differenttimes) as well as simultaneously. In fact, 89 percent of usersaccess their smartphone throughout the day, including while athome (Google/Ipsos OTX MediaCT). Consumers are relativelydevice-agnostic, using whatever device makes sense for thembased on context, convenience and mindset. Regardless ofthe device they’re using, though, they want the same contentand functionality, seamlessly, no matter the platform.Why choosing a methodology matters.Responsive is more than just a buzzword, yet not everyoneunderstands what it means. Very often, when companiessay they want a responsive site, they mean one designed forubiquity. Obviously, every business wants to have an effectivepresence across all digital channels. But responsive design isa very specific implementation.Choosing a design framework should not be left to designersand developers; instead, it’s an important strategic decision,as there are significant business implications in bothResponsive vs.discrete.22 Sequential UsageMoving from one device to another at different times toaccomplish a task.Simultaneous UsageUsing more than one device at the same time for either arelated or unrelated activity.Complementary Usage - Related ActivityMulti-tasking - Unrelated activity
  5. 5. 5the short and long term. Most critically, user needs shoulddetermine the approach chosen. In addition to the userexperience, there are implications for cost and maintenance,flexibility and future extensibility, and ultimately, even how anorganization is structured.Google and Responsive Design.Google is one of the strongest proponents of responsivedesign. In addition to promoting the ease of a single URL forsharing content, Google also says that responsive designhelps its algorithms assign indexing properties for the con-tent, aiding in search engine optimization. The company alsomaintains that responsive design saves resources for both awebsite and its own crawlers since it only requires crawling asite once to index its contents instead of multiple times.While Google is certainly the 800-pound gorilla of search, itsinfluence should not be the final word on choosing a mobiledesign strategy. While Google’s endorsement of a responsivedesign approach carries weight within the development com-munity, factors beyond Google’s control should weigh moreheavily on a company’s decision to design a responsive site.Certainly businessesshould keep an eye onGoogle’s perspective,but mobile design strategyshould be dictated byuser need rather thanmarketplace expediency.
  6. 6. 6Pros and Cons.There are advantages and disadvantages to each methodol-ogy. There are several factors an organization should considerwhen deciding which approach to adopt:Which approachis right for me?33Pros.• Single code base requiresless long-term mainte-nance.• Allows faster adaptationto new screen sizes.• Single URL for improvedsearch rankings and so-cial sharing experiences.• No need to set up server-side redirects.• Potentially lowers mobilebounce rates while in-creasing page views andtime spent.Cons.• More UX design con-straints.• Longer lead time andhigher one-time setupcost.• Requires high collabora-tion between UX, designand development.• Harder to integrate IABstandard ads.• May have to make func-tionality compromises ifuser goals vary betweendesktop and mobile.Pros.• Discrete code bases en-sure UX and content willbe optimized for specificdevices.• Lower one-time setupcosts and shorter QAprocess.• Better device integrationfor location and touch.• Loading only mobileassets potentially resultsin faster load times.Cons.• Code becomes outdatedquickly as new sizes,resolutions and form fac-tors arise.• Higher maintenancecosts.• Some users may not wanta separate experience,particularly on tablets.• Potentially different URLstructures can impactSEO.Responsive. Discrete.
  7. 7. 7While the promised simplicity of responsive design is ap-pealing, the reality is much more complicated. Responsivemeans brands are limited in designing for context. Addition-ally, responsive requires constant iterations until the design isfinalized, 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 suitedfor highly interactive or transactional pages. (It’s important tonote that there are hybrid solutions. See more below.)Generally, responsive isthe right design for staticpages with lots of content,and discrete for interactiveor transactional pages.Responsive Design and Ad Delivery.While responsive design has been touted as a potentiallysuperior design framework for content-heavy sites, one issuestill confounding the industry is effectively delivering advertis-ing. Major publishers such as AOL, Hearst, Time, Google,Disney, and Microsoft have all opted to build responsivesites to “future-proof” their properties for new devices. Yetmost of these sites depend on revenue from advertising thatconforms in format to a fixed sized and placement, posing achallenge in a design environment where content is dynami-cally resized depending on device.The major problem is that ad servers have not yet caughtup to responsive design. Most responsive sites still useseparate 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 thededicated requirements of mobile devices.While in theory, one server should be able to deliver adsacross all environments, servers are actually not yet flexibleenough to meet the demands of a responsive site, with theuse of HTML iframes posing a particular challenge. Anotherbarrier to delivering advertising on responsive sites is adtagging. Traditionally, sites have needed just two tags forads—mobile and desktop. But in responsive design, if thereare eight breakpoints designated, a page may require eightdifferent tags if a different ad size is needed at each. “Smarttags” are a potential solution but still nascent, and so work-arounds are still needed today.Last, the industry has increasingly emphasized viewabilityas a form of ad currency. So rendering a page on mobilewith ads below the fold that are above the fold on desktopbecomes problematic.Publishers have devised stopgap measures to address someof these issues, until advertisers and ad technology catchesup. For companies that rely on advertising a deeper under-standing of the full implications of responsive design is critical.ADSPACEADSPACEvs.
  8. 8. 8Companies considering which design approach to embraceshould ask themselves several questions, prioritizing theirbusiness goals and the user experience above others. Whydoes the user experience outweigh other considerations?Because a happy customer is a loyal one, and unhappycustomers are highly vocal. Understanding and meeting theneeds of the user, and aligning business goals appropriately,should form the basis for choosing a design methodology.User Experience.• Does responsive designdeliver an optimal userexperience?• What sort of functionalitydoes my site need?• Is it transactional ormostly content?• High functionality andtransactional featuresmay require discretedesign to optimize theuser experience.Business Goals.• What are my businesspriorities?• Do I want to be an in-novator?• If it’s important to beconsidered an innova-tor, brands may want toconsider discrete design,which allows for bring-ing products to marketfaster. Responsivedesign requires a slowerdevelopment cycle.Organizational Structure.• How is my digital unitstructured?• Do I need to reorganizemy digital team?• A responsive design ap-proach requires tighterintegration between weband mobile. Separateteams will hinder thedevelopment process.Additionally, respon-sive design should onlyrequire a single team formaintenance.Technical Considerations.• Which methodologyworks best with my solu-tions architecture?• Discrete design will havehigher maintenance costslong-term. Additionally,as new screen sizes andform factors emerge, itwill be harder to reactquickly to them.Choosing a DesignMethodology.
  9. 9. 9Too often, mobile design decisions are constrained bydelegating responsibility to the technology team and existingresources and tools. We strongly believe this is backward.While technical considerations play a part, the desired userexperience and larger business objectives should weigh moreheavily for a company choosing a mobile design approach.A third option: combining responsive and discretemethodologies.Choosing a design approach is not a zero sum game. Usersare increasingly expecting parity across channels. A thirdoption is creating a hybrid methodology, combining respon-sive and discrete design elements to create the optimal userexperience. Responsive design can be a viable strategy totweak the mobile experience for different screen sizes.A hybrid approach:• Uses responsive layouts on pages that are primarily forbrowsing and are highly searchable.• Uses discrete code for task-based, process-oriented flowssuch as checkouts on a commerce site.• Creates responsive CSS for the most prevalent devicesand screen sizes.• Uses discrete design elements to detect mobile devicesand offers location-aware content, click-to-call, collapsedmenus, and modified headlines.• Detects tablet, removes click-to-call, and offers touch-optimized desktop experience.• Detects bandwidth speed and changes high bandwidthelements (e.g. video).For new templates, brands should build for mobile first, then“enhance up” to larger screens. In addition to meeting userexpectations for parity across channels, this approach alsomeans fewer code bases to maintain, an ability to movetowards responsive design in phases, and relatively lowmaintenance once implemented. Determining which parts ofa site should be responsive and which should have discrete,mobile-optimized sections can be done by examining sitedata to see which pages are more heavily trafficked by differ-ent devices, as well as what user tasks and content elementsare required.While a hybrid approach appears to solve the developmentconundrum, it is not without its pitfalls. A hybrid approachrequires strong documentation and business intelligence tomaintain feature or page-level differences. It also requirescompromise—brands need to consider the trade-off betweenpotentially optimizing for SEO and optimizing for the userexperience, usually on a case-by-case basis.A Hybrid Approach.
  10. 10. 10Businesses need to align organizational structurewith the chosen design framework.A company that adopts a responsive design approach mayalso need to realign its organizational structure and pro-cesses. Responsive design requires technical developers tobe involved much earlier in the design process to understandwhat functionality is feasible. Content strategists also need tounderstand how designing for responsive affects copy, with aneed for shorter, more concise language. Additionally, review-ing work in responsive design requires ongoing input acrossdifferent devices, rather than intermittent wireframe reviews.Most importantly, digital and mobile departments must beintegrated to make responsive design work.Being a mobile leader requires choosing the right designframework, and that choice must be driven by user needsand expectations. Businesses need to think carefully abouttheir users’ experiences, as well as their overall businessgoals, content, organizational structure and technical exper-tise. For some, these factors will lead to choosing a hybridapproach combining the best of responsive and discretemethodologies. Whatever the ultimate approach, businessesmust recognize that while future-proofing is an alluring con-cept, it remains far from a proven reality.Businesses need tothink carefully abouttheir users’ experiences,as well as their overallbusiness goals, content,organizational structureand technical expertise.Conclusion.44
  11. 11. 11Acknowledgements.The authors acknowledge the following from Huge forcontributing their insights and feedback:User ExperienceSophie KleberTodd LefeltMichal PasternakJudd SchoenholtzEmily WengertTechnologyGela FridmanProductsEce ManisaliBarbara Pantuso