TMPGov_WhitePaper_ResponsiveDesign

FIVE THINGS YOU NEED TO KNOW ABOUT MOBILE-FIRST AND
RESPONSIVE WEB DESIGN (RWD):
From government mandates to private sector best
practices, smartphones, tablets and the “next big thing”
are changing the priorities in user-centric Web design.

www.TMPgovernment.com
On behalf of our private and public sector clients,
TMP Worldwide and its wholly owned subsidiary, TMP
Government, have been monitoring the implications of
“mobile-first” and “responsive Web design (RWD).”1
Both of these complementary design philosophies
indicate a major shift in developing a Web presence
for organizations. Circumstances are rapidly dictating
that organizations reconsider the traditional approach
of designing first for larger screens and then modifying
a site for handheld devices. The desktop/laptop-first
methodologies can no longer hold sway with the
smartphones and tablets that will soon surpass them in
Web traffic. As Internet mobility assumes its place as a
medium of choice for personal and work life, organizations
must consider making it the starting point for a one-size-
adaptively-fits-all website.
This decision, however, may not be clear cut and allowed
to prevail in all circumstances. TMP believes that the
following five principles can help you decide if mobile-first
and responsive Web design are right for your situation.
Abstract
As mobile Web subscribers reach critical mass, government as well as private sector organizations
must give them a full experience of their websites, optimized for smartphones and tablets. The first
generation of mobile Web called for tandem designs for laptop and Web platforms. When more users
access your site via mobile, that separation no longer works. In contrast, a mobile-first approach is
creating a website with the focus on mobile devices’ design, content and functionality first. Then
Web designers can further enhance this mobile-first site for larger device displays. With mobile
Web accessibility mandated by the U.S. Federal Government and increasingly standard among
corporations, responsive Web design provides a flexible upward compatibility with today’s devices as
well as tomorrow’s yet unanticipated platforms.
1 This paper looks at so-called “responsive” and “adaptive” Web design as similar terms, referring to a user-centric approach that easily “adapts” and “responds” to
the needs of users for as full a Web experience as possible on many devices. However, leading designers, like Aaron Gustafson, distinguish “adaptive” as a more
all-encompassing term and “responsive” as a sub-set: http://blog.easy-designs.net/archives/2011/11/16/on-adaptive-vs-responsive-web-design/.
87%
of the world’s population
are mobile subscribers.
46%
of U.S. adults own
a smartphone.
25%
of U.S. users are
mobile-only.
LESS10%
THAN
of the QuantCast Top Million
Websites are mobile-ready.
Source: news.cnet.com
Source: pewinternet.org, March 2012
Source: On Device Research, 2011
Source: Mongoose Metrics, Mobile Report, February 2012

In December 2009, only 1 percent of global Internet
traffic was mobile. By May 2012, that throughput had
increased tenfold. Mobile now counts for 8 percent of
U.S. e-commerce. Apps and Web advertising revenues
have increased from $0.7 billion in 2008 to $12 billion at
the end of 2011. Perhaps most remarkable, in India in May
2012, mobile Internet usage surpassed desktop Internet
usage. Most important, the migration to mobility can
represent sweeping changes not only for technology, but
for your business processes. What happens to our notions
of geography if the present pace continues and mobile
Internet usage worldwide overtakes other access by the
middle of the decade?2
On June 5, 2012, Ericsson released its second Traffic
and Market Report—On the Pulse of the Networked
Society,3 showing even more rapid expansion over the
next five years:
• By 2017, 85 percent of the world’s population will
have 3G high-speed mobile Internet coverage
• 50 percent of the world’s population will be covered
by 4G in 2017
• Smartphone subscriptions are expected to reach
3 billion in 2017
• Mobile subscriptions reached 6.2 billion in Q1 2012
with 170 million new mobile subscriptions added
during the quarter
While mobile Web access dates back to the late 1990s
with the Nokia 900 Communicator Phone (1996) and
NTT DoCoMo’s commercial launch of iMode (1999), Web
designers tended not to take mobile seriously until the
iPhone and Android operating systems heightened the
user experience. Even then the majority of organizations
have continued to have a computer-first approach,
designing first for the desktop or laptop screen, and then
creating modified designs for handhelds.
In terms of sociodynamics, mobile Web usage has long passed
the early adopter stage and seems on course to achieve
critical mass. Not surprisingly, corporations and government
are realizing that they can no longer relegate a mobile
website to second class status. In fact, they need to consider
the opposite: Make mobile devices their first priority.
2 Although present mobile Internet usage hovers at 10 percent of the total, in her annual presentation on Internet trends (May 30, 2012), Mary Meeker of venture
capitalist firm Kleiner Perkins Caufield and Byers views mobile Internet traffic as a factor toward the “re-imagination of nearly everything.” For example, in
January 2012, 29 percent of American adults owned a tablet or eReader, up from only 2 percent three years ago: http://www.kpcb.com/insights/2012-internet-trends.
3 The press release states: “The main continuous trend identified in the report is that everything is going mobile. This evolution is
mainly being driven by people’s increasing demand for anywhere, anytime connectivity and the use of video, cloud-based services and the Internet–but also by
machine-to-machine connectivity.” See http://www.ericsson.com/news/1617338?categoryFilter=press-releases_1270673222_c.
Principle #1:
Mobility is the new desktop, and mobile-first is worthy of consideration.
INTERNET
DISTRIBUTION
BY DEVICE
MOBILE
WEB USAGE
IS GROWING
Desktop
2010 2015
Source: gigaom.com
Mobile
Desktop Users
Source: gigaom.com
Projected
Projected
Mobile Users 2007 2011 2015
36%
of Americans use the browser
on their mobile device.
Source: ComScore 2011

The mobile future is already here, even in government,
which usually lags behind the private sector. On May 23,
2012, the White House issued its Digital Government
Strategy,4 a roadmap for customer-centric services
depicting the way Americans communicate now and into
the future. In that document, President Barack Obama
directed all federal agencies to make at least two key
services accessible via mobile devices and, in that same
time frame, all domains must be made mobile accessible.
In testifying before Congress on the day after release of
the Strategy, Steven VanRoekel, Chief Information Officer
of the United States Government and a former Microsoft
executive, reiterated the White House’s resolve and urged
that budget considerations not hinder innovation:
“The Digital Government Strategy will provide a 12-month
roadmap to jumpstart the use of smart mobile technology
and improve delivery of digital services to the American
people and our federal workforce. We must ensure that
government information, data and services are available
anywhere, anytime, on any device. The strategy will help
agencies use modern tools and technologies to seize
the digital opportunity and fundamentally change how
the government serves both its internal and external
customers, at lower costs. It will also lay out actions to
ensure that as the government adjusts to this new digital
world, we build the infrastructure needed to support
digital government efforts to leverage the Federal
Government’s buying power to reduce costs where
appropriate.”5
In addition to the explosive growth of mobile usage, Web
developer Luke Wroblewski cites two other compelling
reasons for mobile first:
• By forcing designers to focus on mobile-first, the Web
experience is optimized for all Web users. Mobile
devices require “software development teams to focus
on only the most important data and actions in an
application. There simply isn’t room in a 320 by 480 pixel
screen for extraneous, unnecessary elements. You have
to prioritize.” The upshot is a better user experience.
• Mobile extends your general Web capabilities. The
World Wide Web has been built on a foundation of
rather simple capabilities (page markup, styling and
scripting) determined by what Web browsers can
support. Web application developers desperate to be
innovative “have pushed the limits of JavaScript, browser
plug-ins, and even Web browsers themselves to enable
rich activities and interactions online.” But new mobile
application platforms are introducing capabilities “that
leave many PC-based Web browsers behind,” e.g.,
precise location information from GPS; user orientation
from a digital compass; and multi-touch input from one
or more simultaneous gestures.
Wroblewski concludes that “building mobile first allows
teams to utilize this full palette of capabilities to create
rich context-aware applications instead of limiting
themselves to an increasingly dated set of capabilities.”6
4 The full text of “Digital Government: Building a 21st Century Platform to Better Serve the American People” (White House, May 23, 2012) can be found at
http://www.whitehouse.gov/blog/2012/05/23/roadmap-digital-government.
5 Federal CIO VanRoekel’s testimony can be found at http://www.hsgac.senate.gov/subcommittees/federal-financial-management/hearings/innovating-with-less-examining-
efforts-to-reform-information-technology-spending-.
6 Wroblweski’s “Mobile First” article (November 3, 2009) can be found at http://www.lukew.com/ff/entry.asp?933.
Principle #2:
Mobile-first creates a better experience for users on all platforms.

Mobile-first involves creating a website with the initial
focus on its design, content and functionality for mobile
devices. With this basic foundation in place, you can
then add on enhancements for larger device displays.
During every step of the website development process,
optimization for mobile devices is at the forefront:
1. Architecture. Create structure and navigation to be
user-friendly on a mobile device.
2. Design. Develop layouts to scale for mobile device
screen sizes, and create graphic and verbal elements
for viewing on the device.
3. Coding. Program the site to ensure that all
functionality is accessible across the majority of
mobile devices, and that the page’s load times are
minimized as much as possible.
There are, naturally, design trade-offs with a mobile-first
approach. But making those trade-offs early on can help
“future proof” your cross-platform design. By prioritizing
the Web presence on a mobile device, you are taking a
major step toward compatibility with yet unanticipated
platforms. Mobile-first Web development not only ensures
that your online presence is optimized (not just accessible)
for mobile devices, but also that you have a user-friendly,
engaging, dynamic website on other devices as well—
tablets, laptops, desktops and the “next big thing” in
mobility, e.g., automobile heads-up displays.
TMP, however, is not insisting that mobile-first can
meet all organizational needs all the time. Building a
separate mobile site remains the most common way
that organizations, in general, meet mobile users’ needs.
In the past, this was really the only way to make sure a
site was optimized for mobile devices—features, design
and functionality all needed to be developed separately
from the “main” website. Usually, content is pared down
and not all of the content or features of the full website
are presented to mobile users when a separate site or
application is built. For large sites with a great amount of
content and many dynamic and/or interactive features,
this approach may still be the best way to develop a
mobile presence.
If you have an extensive, functionality-rich site, we would
likely recommend reducing the content to include key
information and data in order to optimize the user’s mobile
experience. An example is a large website which has
many interactive complex data maps, charts and graphs
that would not be feasible to replicate or make mobile-friendly.
If the purpose of your mobile site is different from
that of your main website, than two sites or a website
and a mobile application may be the best option for
you. Although some duplication of efforts is required to
maintain both a standard website and mobile application,
this may be the best way to provide users with the best
experience across devices and platforms.
Principle #3:
Optimizing your website for mobile from the beginning can make it
upwardly compatible with whatever the future brings.

1 Lorem ipsum
dolor amet 2 Lorem ipsum
dolor amet
Lorem ipsum dolor sit amet onsectetur adipiscing elit. Aenean elementum, elit at pellentesque
fringilla, nunc turpis cursus turpis, id iaculis.
Velit est sit amet velit. Quisque justo elit, volutpat vel faucibus sed, mattis id nibh. In ultricies, sem eget porttitor dapibus,
velit magna porta tortor, nec luctus mauris elit vitae eros. Quisque tristique convallis dolor in lacinia. Donec a metus
tincidunt erat sodales congue eget ac orci. Duis eget arcu convallis ipsum aliquam sagittis eget vel ligula. Praesent auctor
HOME | ABOUT | FAQ | CONTACT
1 Lorem ipsum
dolor amet
3 Lorem ipsum
dolor amet
Lorem ipsum dolor sit amet Onsectetur
adipiscing elit. Aenean elementum, elit at
pellentesque fringilla, nunc turpis cursus
turpis, id iaculis.
Velit est sit amet velit. Quisque justo elit, volutpat vel
faucibus sed, mattis id nibh. In ultricies, sem eget
porttitor dapibus, velit magna porta tortor, nec luctus
mauris elit vitae eros. Quisque tristique convallis dolor in
lacinia. Donec a metus tincidunt erat sodales congue
HOME 
Suppose as with many federal agencies and companies,
your current website does not work well on mobile devices.
Employing adaptive Web design techniques can help
make those sites more mobile-friendly without rebuilding
the site. Adaptive Web design uses flexible techniques
similar to responsive Web design, but instead of starting
from scratch, you can modify the existing site. Even here,
mobile-first makes sense: Begin with the lowest common
denominator of user experience, e.g., a smartphone, and
then add “progressive enhancements” to work on more
sophisticated browsers.
Designing with users’ needs in mind, adaptive Web design
employs varying levels of modern coding tools to add
those elements to the site that help it adapt to the viewing
device. Using adaptive Web design encompasses structure,
design and technical development elements. Although
much of the adaptation involves technical development,
you cannot ignore the other aspects of the site.
While adaptive Web design creates one website for all
devices, the site may not be fully optimized for some
devices. Adaptive methodologies help to increase the
number of devices that have a good user experience, yet
they do not ensure that a maximum number of devices
provide an optimized experience. These techniques work
best in more modern browsers and devices; they may have
some compatibility issues with older devices and browsers.
However, if the goal is to make an existing website more
device-compatible, then adaptive design provides a cost-effective
way to move forward.
7 Internet author Janine Warner discusses the differences between adaptive and responsive Web design in more detail on her Digital Family blog:
http://www.digitalfamily.com/dreamweaver/CS6/Adaptive-vs-Responsive-Web-Design.html.
Principle #4:
For existing sites, you can use adaptive Web design7 techniques
without reinventing the wheel.

In the early 1.0 days of Internet browsers, websites
mimicked brochures: print-style grids with table-of-contents
buttons hyperlinking to back pages. You “read”
the site from desktop or laptop. And hopefully the pages
fit without undue amount of scrolling. Few had begun
to realize the flexibilities inherent in the new form of
media, especially its ability to adjust to multiple platforms.
Consequently, even the second generation of sites looked
at mobility as a separate technical challenge demanding its
own scaled-down graphical interface and functionality.
In a May 2010 article, entitled “Responsive Web Design,”
designer Ethan Marcotte defined the alternative to
the desktop-centric approach: Rather than tailoring
disconnected designs to each of an ever-increasing
number of Web devices, we can treat them as facets of the
same experience. We can design for an optimal viewing
experience, but embed standards-based technologies into
our designs to make them not only more flexible, but more
adaptive to the media device that renders them. In short,
we need to practice responsive Web design.8
Responsive Web design accounts for device and platform
changes by making changes to the layout, flow, display
or functionality of a site based on the device on which
it is presented. The end result is that you have one site
available in an infinite number of browsers and platforms.
8 The article may be found in its entirety at www.alistapart.com/articles/responsive-web-design. See also Ethan Marcotte’s book Responsive Web Design, available
at www.abookapart.com/products/responsive-web-design or at iTunes: http://itunes.apple.com/us/book/responsive-web-design/id442160521?mt=11.
PRINCIPLE #5:
Responsive Web design revolutionizes the Internet and your site to
realize unique potential.

Although the experience may differ according to the
device, sites have one URL with one set of code to
maintain. The site will adjust in design, layout and in
some cases functionality as well for the specific device
being used. For example, suppose a website has five
main navigation items and four content areas above the
fold on a desktop-size device. On a mobile device, it may
consolidate the main navigation to three items and show
only two content areas above the fold. The other content
is all still available on the mobile device; it is simply
presented in the manner most suited for the user’s device.
Or a video plays while embedded in a page on a tablet, but
on a smartphone one must open the YouTube app to view
the video on its own.
Ethan Marcotte himself was among the many collaborators
in bringing these ideas to life through BostonGlobe.com,
a site created through responsive Web design.9 In its June
2012 issue, based on this pioneering effort, Fast Company
magazine named Marcotte among its 100 Most Creative
People in Business in 2012. The page devoted to Marcotte
shows how the mobile-first design responds to users as
they manipulate the news pages.10 The Society of New
Designers (SND), an international organization for news
media professionals and visual communicators, named
BostonGlobe.com the “World’s Best Designed Website.”11
The SND judge’s glowing citation on the revolutionary
nature of the site illustrates the impact that responsive
Web design is likely to have in the near future:
“The launch of BostonGlobe.com decisively
raised the bar for digital news design. The Globe’s
intrepid embrace of responsive design rewrote
the equation of our industry’s expectations and
ambitions and defined state-of-the-art across
the Web. Most importantly, the site embraces
the increasingly chaotic ecosystem of devices
without sacrificing thoughtfulness or splintering
user experience. Much of the past 17 years of news
design on the Web has been spent mapping analog
conventions to digital experiences, sometimes
quite crudely. The Globe site is a refreshing shift
away from crafting news design as a single artifact
and toward news design as an organism that
responds to context, to device and to the user.”
The designer Wilson Miner recently described responsive
design as ‘one of those little shifts in thinking that cracks
open a whole new set of questions and possibilities.’ And
this is certainly true for The Globe, which is aggressively
rebalancing the signal-to-noise ratio of storytelling and
even rethinking the shape and behavior of advertising.
“Working with a team of external developers and designers
at The Filament Group and Upstatement, and with Ethan
Marcotte, one of the thought leaders and authors of the
book on responsive Web design, the Boston Globe staff
created a remarkably beautiful design that allows content
to sing with typography and grids, also while functioning
across all platforms—from mobile to full desktop—and
even adapt to a 13 year-old Apple Newton MessagePad.
“It’s no small feat. The Globe’s responsive design is
remarkable and deserves to be noted as one of the key
moments in media design history, akin to USA Today’s
embrace of color and graphics. Its impact will affect a
generation of digital journalists and is an example of
what’s possible when smart design and rich content is
balanced with a focus on being standards-compliant and
future-friendly across all platforms.”
PRINCIPLE #5 (CONTINUED)
Responsive Web design revolutionizes the Internet and your site to
realize unique potential.
9 Marcotte and other participants have told the full technical story in various places on the Web. At the Event Part Web designer conference in May 2011 in Boston,
Jeremy Keith reported on Marcotte’s talk preliminary to the launch: http://adactio.com/journal/4538/.
10 See “Ethan Marcotte: How to make a Web Page Dynamic” at http://www.fastcompany.com/most-creative-people/2012/ethan-marcotte.
11 More information about BostonGlobe.com winning the award can be found at http://www.snd.org/2012/04/snd33-worlds-best-designed-website-bostonglobe-com.

TMP is presently working with clients on websites that use a mobile-first philosophy and responsive Web design. In those
cases, we have found that, regardless of the ultimate decisions of how to proceed, it is helpful to adopt the mobile-first
philosophy from the beginning of development. Before making choices about navigation, layout, design and development,
we recommend that you consider the variety of devices in use by the audience and optimize the experience for as many
users as possible.
Mobile-first and responsive Web design are far from trendy ideas imposed on Internet development. The more you
understand them, the more you will realize that these approaches tap into the Web’s inherent flexibilities and flow—
with
unique potential to make communications more dynamic.
Conclusion:
Mobile-first and responsive Web design are new ways to think about
communications.

TMPGov_WhitePaper_ResponsiveDesign

Recommended

Recommended

More Related Content

What's hot

What's hot (18)

Similar to TMPGov_WhitePaper_ResponsiveDesign

Similar to TMPGov_WhitePaper_ResponsiveDesign (20)

More from John Bersentes

More from John Bersentes (13)

TMPGov_WhitePaper_ResponsiveDesign