frankfurt contec conference 2013

Pixel Imperfect: Serving an Online Audience with Responsive content

Serving an Online Audience with Responsive Design

Introduction:

Michael Cairns, Chief Operating Officer – Online, Publishing Technologymichael.cairns@publishingtechnology.com

Practical Considerations:

Michael Kowalski (Contentment) - Founder at Contentment

michael@getcontentment.com

What Is Responsive Web Design?

In 2010 Ethan Marcotte coined the term in a landmark article on A List Apart

Not a new idea, but made possible recent technologies, specifically:

HTML5

CSS3

Media Queries

Serving an Online Audience with Responsive Design

“Day by day, the number of devices, platforms, and browsers that need to

work with your site grows. Responsive web design represents a fundamental shift in how we’ll build websites for the decade to come.”

- Jeffrey VeenVice President, Products at Adobe

Serving an Online Audience with Responsive Design

Traditional, Fixed-Width Design

Traditional web design: fixed-width websites designed for the desktop.

Traditional, Fixed-Width Design

Annoying!

Enter Responsive Design….

Responsive web design is about designing SYSTEMS, and not WEBSITES

Responsive Design: A Shift in Thinking

Enter Responsive web design!

RWD is really already mainstream

Some responsive examples you can check these out on your smartphone or tablet:

http://www.ft.com

http://www.bostonglobe.com

http://qz.com/

http://mashable.com/

…or, look at them on your desktop and slowly change the browser window’s size to observe the breakpoints.

Why do we want to go down this route?

Google’s definition of responsive design:

“Responsive web design is a setup where the server always sends the same HTML code to all devices and CSS is used to alter the rendering of the page on the device using media queries.”

Why is responsive design favored by Google?

Google has a preference for accessible websites that have one URL for one set of content. Responsive is the most ideal way to do this.

What is going on in the current device landscape that puts responsive on the forefront for mobile strategy versus other options?

Device explosion: “In the last 30 days, we saw activity on more than 2,000 unique device models.” – Flurry Analytics, April 2013

Guess what, mobile is important!

Mobile users will outnumber desktop next year

On the brink of a cross over

Customers on Apples, Droids and Others

Our Customers

Source: IBM/Tealeaf

85% of users expect that a mobile website should be AT LEAST AS GOOD as the desktop

View Full Site

Low hurdle: “At least as good”

Going RWD - Considerations

App approach

Do I want or need to be in the App store?

Do I rely on or make use of device specific functionality like the camera?

Do I have a specific functional focus?

Or I may have a content focused approach (Native)

So I need broad device support

I may have frequent content changes

I need better discoverability via a 3rd party like Google

Plan with several things in mind

Audience

Content & Functionality

Capabilities

Cost

Process

“Context” is very important

Device context

Location context

Time (or circumstance) context

Apple’s iOS devices are now offered in 6 different size/resolution combinations

Serving an Online Audience with Responsive Design

HTC alone has 12 different screen size/resolution combinations on Android

Serving an Online Audience with Responsive Design

Look Mom all hands.

Serving an Online Audience with Responsive Design

Serving an Online Audience with Responsive Design

How to do RWD right

Understand your users and how they access and use your content

Prioritize your content based on the above. Build a site architecture that answers to these priorities

Design a site that provides affordances for users across device-types and contexts: grids and typography and images that adapt; big buttons for touch-screens, forms that are easy to use, simplify interactions that are touch-friendly and uncomplicated

Test, test again and re-test!

What is Responsive Web Design?

Maintain one website that serves all devices and screen sizes

Provide complete support for (almost) all website pages and features, regardless of device or screen size.

Implement changes across all devices

RWD – In summary

“When you pour water in a cup, it becomes the cup. When you pour water in a bottle, it becomes the bottle.”

- Bruce Lee

Serving an Online Audience with Responsive Design