RESPONSIVE WEB DESIGNAugust 5, 2013

OVERVIEW• WHAT IS RESPONSIVE WEB DESIGN?

• WHY RWD?

• HOW RWD WORKS

• WHEN TO USE RWD

• RWD + PHARMA

WHAT IS RESPONSIVE WEB DESIGN?

THE WAY IT WAS

Visit us on the World Wide Web! Surf your Netscape to http://www.yahoo.com

THE WAY IT WAS (RECENTLY)

yahoo.com

m.yahoo.com

THE WAY IT IS TODAY

RESPONSIVE WEB DESIGN DEFINED

A Responsive Web Design (RWD) is a website that has the ability to reconfigure its layout, navigation, content and images based on the browser display size and orientation on which it is presented.

RWD IS A WEB SOLUTION

WHY RWD?

ETHAN MARCOTTE INTRODUCED RWD IN 2010

“Now, more than ever, we’re designing work meant to be viewed along a gradient of

different experiences. Responsive web design

offers us a way forward, allowing us to design for the ebb and

flow of things.”

THE WAY IT WAS IN 2010

Device Share ofWebsite Traffic

3.8%

MORGAN STANLEY INTERNET TRENDS, 2010

950Global Mobile

Web Users(18% of mobile

subscribers)

MILLION

ITU, 2010

5.3Global Mobile Subscriptions(77% of total population)

INTL TELECOMMUNICATION UNION (ITU), 2010

BILLION

THE WAY IT WAS IN 2010

In 2010, Mary Meeker (Morgan

Stanley Research)

predicted that mobile internet

would take over desktop internet

usage.

Glo

bal U

sers

(in

mill

ion

s)

Global Mobile vs. Desktop Internet User Projection

MORGAN STANLEY RESEARCH, 2010

2014

3G AND WIFI-ENABLED TABLETS MADE THEIR DEBUTS

iPadApril

Kindle 3April

GalaxySeptember

THE WAY IT IS TODAY

“Smartphones and tablets are completely reshaping the way consumers connect with content... with audiences fragmenting even further as content gets shared across platforms.”COMSCORE MOBILE FUTURE IN FOCUS, 2013

THE WAY IT IS TODAY

1.2Global Mobile

Web Users(17% of mobile

subscribers)

BILLION

IDC, FEBRUARY 2012

5.9Global Mobile Subscriptions(87% of total population)

IDC, FEBRUARY 2012

BILLION

Device Share ofWebsite Traffic

(Q1 2013)

10.4%

MONETATE ECOMMERCE QUARTERLY

10.6%

79%

5.3Bin 2010

950Min 2010

3.8%in 2010

“Multi-platform consumption is today’s new reality. One in 3 minutes spent online is beyond the PC.”

37% 63%

COMSCORE MOBILE FUTURE IN FOCUS, 2013

THE WAY IT IS TODAY

Global PC (Desktop/Notebook) and Tablet Shipments

MORGAN STANLEY RESEARCH/GARTNER, 2013

Glo

bal U

nit

s S

hip

ped

(in

mill

ion

s)

50M units shipped 3 years after debut!

THE WAY IT IS TODAY

“The biggest screen size is 13.5 times larger than the small one.”MOBIFY GLOBAL NETWORK SURVEY, 2012

11.4%Smartphone

19.5%Common 12”

Notebook

7.3%Common in

larger laptops

THE WAY IT IS TODAY

UltraHD—with a minimum resolution of 3,850 x 2,160 pixels—is set to debut this fall.

4x the resolution of the current largest screen

WHY IS THIS IMPORTANT?

2010 2011 2012 2013

Digital 3:14 3:50 4:31 5:09

• Online* 2:22 2:33 2:37 2:19

• Mobile (Nonvoice) 0:24 0:49 1:33 2:21

• Other 0:26 0:28 0:31 0:36

TV 4:24 4:34 4:38 4:31

Average Time Spent per Day with Major Media, 2010-2013

* includes all internet activities on desktop and laptop computers

EMARKETER, JULY 2013

Delivering content at the right screen size is critical to user engagement.

9+ hours a daywith digital technology

HOW RWD WORKS

RWD IS BUILT USING THE FOLLOWING TOOLS

FLUID GRIDS +BREAKPOINTS

FLEXIBLE IMAGES + TYPE

MEDIA QUERIES

<link rel=”stylesheet” media-”(max-width:1440px)” href=”example-1440.css” />

<link rel="stylesheet" media="screen"

href="example.css" />

320 pixel width768 pixel width

NAVIGATION

FEATURED CONTENT AREA

SIDEBARPROMOTIONAL

CONTENTPROMOTIONAL

CONTENTPROMOTIONAL

CONTENT

FLUID GRIDS ENABLE WEBSITES TO SCALEPROPORTIONATELY BETWEEN BREAK POINTS

1440 pixel width

Discover and promotional content

stacked

Discover moves above promotional content

BREAK POINTS REPRESENT UNIQUE LAYOUTS BASED ON DESIGNATED SCREEN SIZES

LAYOUT 1768 pixels and higher

LAYOUT 2 481-767 pixels

LAYOUT 3480 pixels and smaller

Updated navigation and removed social column

Hidden navigation and single column

Choose breakpoints carefully: determinestotal project budget and effort.

CHOOSING BREAK POINTS

Desktop

Mini Tablet

Smartphone

Tablet Portrait

Tablet Landscape

Laptop

Big screen

CHOOSING BREAK POINTS

Smartphone

Big screenComputer

Tablet

CHOOSING BREAK POINTS

Smartphone

Everything Else

CONTENT CAN BE HIDDEN OR REARRANGED AT DESIGNATED BREAK POINTS

LAYOUT 1768 pixels and higher

LAYOUT 2 481-767 pixels

LAYOUT 3480 pixels and smaller

Hidden content does not minimize download time for smaller screen sizes: all content is loaded in the browser before the website is displayed.

Instagram feed removed, video moved above headline

Color barsremoved

FLEXIBLE IMAGES AND TYPE ADJUST ACROSS SCREEN SIZES AND BREAK POINTS

COPY: CARRIE COUSINS, ADOBE.COMIMAGE: CSS TRICKS, RUNDOWN OF HANDLING FLEXIBLE MEDIA

“The quality of images is much more important than the number of images. Also as important as image quality is

load time... when thinking about mobile users, who typically have more

limited bandwidth.

FLEXIBLE IMAGES

“The key concept (for) responsive typography is line length... type should be optimized (for) screen width... 50 to

70 characters per line are ideal, but that drops to 35 to 50 on mobile devices.

FLEXIBLE TYPE

HOW DOES RWD REALLY WORK?

ContentWhat does it say?

+

PresentationWhat does it look like?

+

LogicWhat does it do?

LET’S GET TECHNICAL

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /><title>Sample Page</title><link rel="stylesheet" href="example.css" /></head><body><div id="the_box"><h1>Some Text</h1> </div></body></html>

#the_box{ background:red;color:white;font-family:Helvetica,Arial,sans-serif;font-size:18pt;font-weight:bold;height:500px;margin:50px auto;padding:30px;text-align:center;width:500px;}

IT’S ALL ABOUT STYLE

Normal<link rel="stylesheet" href="example.css" />

Normal<link rel="stylesheet" href="example.css" />

Screen and Print<link rel="stylesheet" media="screen" href="example.css" />

<link rel="stylesheet" media="print" href="example-print.css" />

Screen and Print<link rel="stylesheet" media="screen" href="example.css" />

<link rel="stylesheet" media="print" href="example-print.css" />

Screen Size<link rel="stylesheet" media="(max-width:320px)" href="example-320.css" />

Screen Size<link rel="stylesheet" media="(max-width:320px)" href="example-320.css" />

MEDIA QUERIES COLLECT SCREEN SIZE DATA,APPLYING RESPECTIVE CSS STYLES

MAX-WIDTH information tells the browser which website layout to deliver

IT’S… COMPLICATED

/* Smartphones (portrait and landscape) ----------- */

@media only screen

and (min-device-width : 320px)

and (max-device-width : 480px) {

/* Styles */

}

/* Smartphones (landscape) ----------- */

@media only screen

and (min-width : 321px) {

/* Styles */

}

/* Smartphones (portrait) ----------- */

@media only screen

and (max-width : 320px) {

/* Styles */

}

/* iPads (portrait and landscape) ----------- */

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px) {

/* Styles */

}

/* iPads (landscape) ----------- */

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px)

and (orientation : landscape) {

/* Styles */

}

/* iPads (portrait) ----------- */

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px)

and (orientation : portrait) {

/* Styles */

}

/* Desktops and laptops ----------- */

@media only screen

and (min-width : 1224px) {

/* Styles */

}

/* Large screens ----------- */

@media only screen

and (min-width : 1824px) {

/* Styles */

}

/* iPhone 4 ----------- */

@media

only screen and (-webkit-min-device-pixel-ratio : 1.5),

only screen and (min-device-pixel-ratio : 1.5) {

/* Styles */

}

WHEN TO USE RWD

RWD BENEFITS

RWD leverages a single codebase, making it the most cost-effective long-term solution.• Ensures content consistency across devices,

platforms and browsers• Avoids the need to create specific websites

for each new device and resolution • Ideal for experiences that have a single

website strategy across devices and platforms (e.g., content publication websites)

See Simon Smith’s blog post, Responsive Design From the Trenches, for more insights.

RWD + SEO

“Sites that use responsive web design... is Google’s recommended configuration.• It keeps your desktop and

mobile content on a single URL, (making it) easier for Google’s algorithms to assign indexing properties to your content.”

PIERRE FAR, RECOMMENDATIONS FOR BUILDING FOR SMARTPHONE-OPTIMIZED WEBSITES (WEBMASTER CENTRAL BLOG)

“At Bing, we want to keep things simple by proposing the ‘one URL per content item’ strategy.’• You have more ranking signals

coming to this URL• Redirection to alternate URLs is

not the best approach for best SEO results.

DUANE FORRESTER, BUILDING WEBSITES OPTIMIZED FOR ALL PLATFORMS(BING BLOGS)

RWD LIMITATIONS

RWD is limited to hiding and rearranging content at different break points—it does not consider changes to usability and functionality across different devices and platforms.Strategy should continue to determine the right website solution, whether RWD, mobile-optimized website or an application.

RWD is a tool in the toolbox, but not necessarily the best solution to address all web challenges and issues.

RWDMobile-Optimized Websites

MOBILE-OPTIMIZED VS. RWD

• Mobile-only solution• Enables different tools and

content for different use cases

• Requires maintaining separate websites and codebases

• Mobile-first solution• Same tools and content

across devices and platforms

• Maintenance of a single codebase

RWD + PHARMA

MRL REVIEW CURRENTLY POSES THE BIGGEST CHALLENGE TO RWD

Successfully implementing RWD across multiple break points and browser display sizes requires substantial MRL investment to ensure fair balance, ISI and PI appear consistently across multiple variations.

During the development phase, content editors should review each break point for content accuracy.

KLICK + RWD + MRL REVIEWLESSONS LEARNED

Klick collaborates with Brand and MRL teams early and often to determine the best review format and MRL timing expectations.

When content is consistent across break points, look to show one set of content layouts and responsive website grids (easiest to prepare)

When content is hidden or rearranged across break points, may be required to show content layouts across all sizes as MRL may consider each to be a unique experience requiring separate review (requires additional time and budget)

KLICK + RWD + MRL REVIEWLESSONS LEARNED

Klick can help you educate MRL teams on the benefits on responsive design when it is the design solution of choice.

Can create a RWD proof of concept / prototype to share with MRL prior to commencing development.

Share RWD presentation and lead discussion with your Brand and MRL teams.

THANK YOU