frankfurt contec conference 2013
DESCRIPTION
Presentation on Responsive Web Design at the 2013 Frankfurt bookfair CONTEC conferenceTRANSCRIPT
Pixel Imperfect: Serving an Online Audience with Responsive content
Serving an Online Audience with Responsive Design
Introduction:
Michael Cairns, Chief Operating Officer – Online, Publishing [email protected]
Practical Considerations:
Michael Kowalski (Contentment) - Founder at Contentment
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