tmpgov_whitepaper_responsivedesign

9
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.

Upload: john-bersentes

Post on 06-Aug-2015

34 views

Category:

Documents


0 download

TRANSCRIPT

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 populationare mobile subscribers.

46%of U.S. adults own a smartphone.

25%of U.S. users are mobile-only.

10%LESSTHANof 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

www.TMPgovernment.com

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:

• By2017,85percentoftheworld’spopulationwill have 3G high-speed mobile Internet coverage

• 50percentoftheworld’spopulationwillbecovered by 4G in 2017

• Smartphonesubscriptionsareexpectedtoreach 3 billion in 2017

• Mobilesubscriptionsreached6.2billioninQ12012with 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.

INTERNETDISTRIBUTIONBY DEVICE

MOBILEWEB USAGEIS GROWING

Desktop2010 2015

Source: gigaom.com

Mobile

Desktop Users

Source: gigaom.comProjected

Projected

Mobile Users 2007 2011 2015

36%of Americans use the browser on their mobile device.Source: ComScore 2011

www.TMPgovernment.com

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.

www.TMPgovernment.com

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.

www.TMPgovernment.com

1 Lorem ipsumdolor amet 2 Lorem ipsum

dolor amet 3 Lorem ipsumdolor amet 4 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 ipsumdolor amet 2 Lorem ipsum

dolor amet

3 Lorem ipsumdolor amet 4 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.

www.TMPgovernment.com

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.

www.TMPgovernment.com

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.

www.TMPgovernment.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.