DIGITAS PERSPECTIVE

A Future-Forward Web Strategy: Target People, Not Devices

Web professionals are always searching for innovative ways to connect with people. Todays evolving device landscape, shaped by the explosion of mobile computing, brings with it many new opportunities. However, delivering an optimized Web experience to all the various Internet-connected devices is proving to be a challenge. Over the past few years, demand has increased for device-specific Web experiences: a main site for desktops, a mobile version for smartphones and, more recently, a version optimized for tablets. On the surface, this approach seems to work. But there are consequences that should give one pause. Multiple, device-specific websites cost more to design, build, and maintain. Strategic decisions based on todays evolving device landscape are outdated tomorrow. Inconsistent cross-device experiences frustrate users and distance them from the content and services they sought in the first place. The current rate of device fragmentation is only going to accelerate. The quantity and diversity of Webenabled devices, many of which have yet to be imagined, will continue to skyrocketas will the quantity and diversity of people who use them. As the medium evolves, existing processes and practices must adapt in parallel to take advantage of these new opportunities. To stay ahead of the curve, to deliver beautiful, usable, and memorable experiences, Web professionals are challenged to think beyond the rigidity of fixed-width, device-specific Web pages. Enter, Progressive Enhancement Digital fragmentation is as old as the Internet itself. Historically, fragmentation has been addressed either through a lowest-common-denominator (LCD) approach or by creating targeted, device-specific solutions focused on narrow market segments. LCD solutions are durable and have tremendous reach but are rightfully accused of being dull and uninviting. Conversely, targeted solutions deliver a highly optimized experience but lack proper reach and are ill-suited to a quickly evolving digital landscape. Progressive enhancement is a no compromise alternative that strives to deliver the best possible experience to the widest possible audience. At its core, progressive enhancement is about scaling up from the minimum instead of scaling down from the maximum. It all starts with a strong core of universally accessible content. Layers of enhancements are applied methodically to tailor the experience and exploit the unique capabilities of each viewing environment. Web experiences fashioned this way are SEOfriendly and interactive, rich, and accessible all at the same time. As an overarching strategy, progressive enhancement is ideally suited to projects and campaigns that need to be both accessible and compelling. Progressive enhancement is inclusive by nature, so it is the superior approach for targeting consumers in todays shifting digital landscape. Using progressive enhancement as a lens, teams can maximize reach across the entire spectrum of devices and contexts, dream up new ways to engage consumers, and still deliver the compelling Web experiences that clients expect. Lead with Structured Content Every Web page begins with a constant, something that is knowable and unchangeable. The constant acts as the foundation from which a page takes its shape. In print design, the constant

June 2012

DIGITAS PERSPECTIVE
is the artists canvas. In traditional Web design, the constant is the desktop browser window. In both mediums, the content is constrained by the fixed, physical dimensions of its container. But the reality is that todays browsers come in all shapes and sizes. We dont have the luxury of the fixed-width canvas, and the big, upfront design process no longer suits the medium. Effective design for todays devices requires that we think about content early in the process. Strategies that prioritize content are able to deliver a more meaningful experience to a broader audience. By elevating the content over its container, teams are better situated to (1) make knowledgeable decisions around design and presentation, (2) drive a consistent user experience across a range of viewing contexts, and (3) ensure that content is portable to future platforms through effective CMS architecture. To properly optimize content for a range of viewing contexts, consider the following points: 1. Assemble content in ways that can be distributed to multiple devices and contexts. 2. Identify and prioritize content that remains consistent across all contexts. 3. Create supplemental content that takes advantage of each unique context. Once a solid foundation of well-structured content has been established, content can be distributed to various contextsstarting with mobile. Think Mobile First Mobile use is surging. Smartphone sales have overtaken PC and tablet sales combined, leaving mobile poised to become the dominant computing platform. A mobile-first strategy capitalizes on this enormous growth and enables teams to discover new ways to engage consumers. Mobile devices feature unique characteristics that can contribute to higher-value propositions. These characteristics include: 1. Personal Connection: Mobile devices have become extensions of their owners to a greater degree than other devices. 2. Portability and Accessibility: Mobile devices provide convenient, always-on accessibility. 3. Geo-local Awareness: Mobile devices travel with their users and are able to pinpoint their real-time location. 4. Sensory Nature: Mobile devices enable verbal cues and commands, touch screens, and optics. Additionally, the mobile-first strategy provides value in an area that is often overlooked scalability. The mobile context is more restrictive, eclectic, and unstable than its desktop counterpart. Mobile screens are small, the devices are less powerful, and Internet connectivity varies greatly. Solving for these issues first, and scaling up from the mobile context instead of scaling down from the desktop, guarantees the experience remains intact as the screen real estate and connection speed increase. Scaling down from the desktop can distort the experience as it is squeezed into the mobile context. Mobile acts as a filter and helps to prioritize and surface meaningful content. When a project prioritizes mobile first, the end result is an experience focused on a users needs without the extraneous detours and general filler that afflict today's desktop-oriented Web sites. Challenge Assumptions about Context The surge in mobile computing brought with it a heightened sensitivity to a users context (the set of circumstances under which something happens). Traditional thinking says that mobile users are

June 2012

DIGITAS PERSPECTIVE
on-the-go, trying to quickly consume location-aware and task-oriented information; conversely, desktop and tablet users are assumed to be stationary, passive, and less task-driven. But in reality this is not necessarily true and the idea of context is actually difficult to pin down: A mobile user is as likely to access the Internet from the couch as from the grocery store aisle. A 3Gequipped, 7-inch tablet might be more mobile than not. The iPad3 with a keyboard attachment is more desktop than tablet. The over emphasis of a particular device and context results in use cases that inaccurately focus on assumed situations. Instead, think more holistically and about your audience and target across all devices and contexts: 1. Create scenarios that consider all the possible user contexts. 2. Zero in on the needs of users, and avoid making broad assumptions about how people use their devices. 3. Design and optimize around screen sizes, not devices and context. Meet Users Anywhere with a Responsive Design In todays world, Web browsers come in all different shapes and sizes and the spectrum of screen sizes is widening every day. Creating different versions of a website to target individual devices and contexts is not always a practical way forward. This is the problem that responsive Web design addresses head-on. A responsive design is one that scales to meet users no matter what device they happen to be using. Responsive design is a technique that is one part design, one part development, and enables a single site to automatically adapt to any viewing environment. This is accomplished by shifting page components, tailoring the content, and increasing or decreasing image and font sizes so the site automatically provides the best layout for the screen size in use. In a nutshell, responsive design isnt about creating device-specific designs. Its about putting more thought into a single design. Target People, Not Devices Each new day sees a continuing stream of devices entering the market. From tiny phones to wide-screen TVs, the focus now for Web professionals is to get content, commerce, and advertising onto whatever device consumers happen to be using. This means embracing the liquid-like nature of the web and rethinking existing conventions and best practices around design, content, and context. A new phase of the Web is fast emerging in which connecting with consumers is best achieved by emphasizing proportions, hierarchy, and focal points, rather than pixels and devices. Contact for More Information Michael Halunen, Principle Software Engineer, Technology, Digitas Michael.Halunen@digitas.com

June 2012