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.
1. Future-Proofing the Web:
Choosing the Optimal
Mobile Design Strategy.
Marissa Gluck, Director, Huge Ideas (Author)
Tom O’Reilly, Director, Huge Content (Editor)
2. 2
With mobile overtaking desk and laptops this year, business-
es cannot afford to delay choosing a mobile strategy. While
the ubiquity of mobile devices creates multiple consumer
touchpoints for businesses, it also presents technical and
design challenges. 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 develop-
ment dilemma, as businesses may find that strategy 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 strategies?
• How should I best align my organization to achieve
my mobile strategy goals?
Note: This report looks exclusively at mobile web design
strategies. We will explore the app versus mobile-optimized
site debate in a future Huge Ideas report.
Establishing mobile leadership requires choosing
the right design strategy.
There are multiple components to establishing mobile leader-
ship 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 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, 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.
Introduction.
Key Finding:
Companies need to
develop a mobile
strategy now if they
hope to establish
leadership in their
category.
11
3. 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
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 un-
derstandably 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.
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.
4. 4
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 experi-
ences. This approach permits more customization of different
user 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 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
Responsive vs.
discrete.22 Sequential Usage
Moving from one device to another at different times to
accomplish a task.
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
5. 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,
flexibility and future extensibility, and ultimately, even how an
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 con-
tent, 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
influence should not be the final word on choosing a mobile
design strategy. While Google’s endorsement of a responsive
design approach carries weight within the development com-
munity, 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.
6. 6
Pros and Cons.
There are advantages and disadvantages to each methodol-
ogy. There are several factors an organization should consider
when deciding which approach to adopt:
Which approach
is right for me?33
Pros.
• Single code base requires
less long-term mainte-
nance.
• Allows faster adaptation
to new screen sizes.
• Single URL for improved
search rankings and so-
cial sharing experiences.
• No need to set up server-
side redirects.
• Potentially lowers mobile
bounce rates while in-
creasing page views and
time spent.
Cons.
• More UX design con-
straints.
• Longer lead time and
higher one-time setup
cost.
• Requires high collabora-
tion between UX, design
and development.
• Harder to integrate IAB
standard ads.
• May have to make func-
tionality compromises if
user goals vary between
desktop and mobile.
Pros.
• Discrete code bases en-
sure UX and content will
be optimized for specific
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 fac-
tors arise.
• Higher maintenance
costs.
• Some users may not want
a separate experience,
particularly on tablets.
• Potentially different URL
structures can impact
SEO.
Responsive. Discrete.
7. 7
While the promised simplicity of responsive design is ap-
pealing, the reality is much more complicated. Responsive
means brands are limited in designing for context. Addition-
ally, 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.)
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 advertis-
ing. 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 dynami-
cally 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 work-
arounds 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 under-
standing of the full implications of responsive design is critical.
AD
SPACE
AD
SPACE
vs.
8. 8
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 in-
novator?
• If it’s important to be
considered an innova-
tor, brands may want to
consider discrete design,
which allows for bring-
ing 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 ap-
proach requires tighter
integration between web
and mobile. Separate
teams will hinder the
development process.
Additionally, respon-
sive design should only
require a single team for
maintenance.
Technical Considerations.
• Which methodology
works best with my solu-
tions 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.
Choosing a Design
Methodology.
9. 9
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 respon-
sive 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.
• 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 differ-
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.
A Hybrid Approach.
10. 10
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 pro-
cesses. 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, review-
ing 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 exper-
tise. 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 con-
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.
Conclusion.44
11. 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