Frankfurt Contec conference 2013
-
Upload
michael-cairns -
Category
Technology
-
view
774 -
download
2
description
Transcript of Frankfurt Contec conference 2013
![Page 1: Frankfurt Contec conference 2013](https://reader033.fdocuments.us/reader033/viewer/2022061300/548dd453b47959f2248b4a85/html5/thumbnails/1.jpg)
Pixel Imperfect: Serving an Online Audience with Responsive content
![Page 2: Frankfurt Contec conference 2013](https://reader033.fdocuments.us/reader033/viewer/2022061300/548dd453b47959f2248b4a85/html5/thumbnails/2.jpg)
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
![Page 3: Frankfurt Contec conference 2013](https://reader033.fdocuments.us/reader033/viewer/2022061300/548dd453b47959f2248b4a85/html5/thumbnails/3.jpg)
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
![Page 4: Frankfurt Contec conference 2013](https://reader033.fdocuments.us/reader033/viewer/2022061300/548dd453b47959f2248b4a85/html5/thumbnails/4.jpg)
“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
![Page 5: Frankfurt Contec conference 2013](https://reader033.fdocuments.us/reader033/viewer/2022061300/548dd453b47959f2248b4a85/html5/thumbnails/5.jpg)
Traditional, Fixed-Width Design
Traditional web design: fixed-width websites designed for the desktop.
![Page 6: Frankfurt Contec conference 2013](https://reader033.fdocuments.us/reader033/viewer/2022061300/548dd453b47959f2248b4a85/html5/thumbnails/6.jpg)
Traditional, Fixed-Width Design
Annoying!
![Page 7: Frankfurt Contec conference 2013](https://reader033.fdocuments.us/reader033/viewer/2022061300/548dd453b47959f2248b4a85/html5/thumbnails/7.jpg)
Enter Responsive Design….
Responsive web design is about designing SYSTEMS, and not WEBSITES
![Page 8: Frankfurt Contec conference 2013](https://reader033.fdocuments.us/reader033/viewer/2022061300/548dd453b47959f2248b4a85/html5/thumbnails/8.jpg)
Responsive Design: A Shift in Thinking
Enter Responsive web design!
![Page 9: Frankfurt Contec conference 2013](https://reader033.fdocuments.us/reader033/viewer/2022061300/548dd453b47959f2248b4a85/html5/thumbnails/9.jpg)
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.
![Page 10: Frankfurt Contec conference 2013](https://reader033.fdocuments.us/reader033/viewer/2022061300/548dd453b47959f2248b4a85/html5/thumbnails/10.jpg)
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
![Page 11: Frankfurt Contec conference 2013](https://reader033.fdocuments.us/reader033/viewer/2022061300/548dd453b47959f2248b4a85/html5/thumbnails/11.jpg)
Guess what, mobile is important!
![Page 12: Frankfurt Contec conference 2013](https://reader033.fdocuments.us/reader033/viewer/2022061300/548dd453b47959f2248b4a85/html5/thumbnails/12.jpg)
Mobile users will outnumber desktop next year
On the brink of a cross over
![Page 13: Frankfurt Contec conference 2013](https://reader033.fdocuments.us/reader033/viewer/2022061300/548dd453b47959f2248b4a85/html5/thumbnails/13.jpg)
![Page 14: Frankfurt Contec conference 2013](https://reader033.fdocuments.us/reader033/viewer/2022061300/548dd453b47959f2248b4a85/html5/thumbnails/14.jpg)
![Page 15: Frankfurt Contec conference 2013](https://reader033.fdocuments.us/reader033/viewer/2022061300/548dd453b47959f2248b4a85/html5/thumbnails/15.jpg)
Customers on Apples, Droids and Others
Our Customers
![Page 16: Frankfurt Contec conference 2013](https://reader033.fdocuments.us/reader033/viewer/2022061300/548dd453b47959f2248b4a85/html5/thumbnails/16.jpg)
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”
![Page 17: Frankfurt Contec conference 2013](https://reader033.fdocuments.us/reader033/viewer/2022061300/548dd453b47959f2248b4a85/html5/thumbnails/17.jpg)
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
![Page 18: Frankfurt Contec conference 2013](https://reader033.fdocuments.us/reader033/viewer/2022061300/548dd453b47959f2248b4a85/html5/thumbnails/18.jpg)
Plan with several things in mind
Audience
Content & Functionality
Capabilities
Cost
Process
![Page 19: Frankfurt Contec conference 2013](https://reader033.fdocuments.us/reader033/viewer/2022061300/548dd453b47959f2248b4a85/html5/thumbnails/19.jpg)
“Context” is very important
Device context
Location context
Time (or circumstance) context
![Page 20: Frankfurt Contec conference 2013](https://reader033.fdocuments.us/reader033/viewer/2022061300/548dd453b47959f2248b4a85/html5/thumbnails/20.jpg)
Apple’s iOS devices are now offered in 6 different size/resolution combinations
Serving an Online Audience with Responsive Design
![Page 21: Frankfurt Contec conference 2013](https://reader033.fdocuments.us/reader033/viewer/2022061300/548dd453b47959f2248b4a85/html5/thumbnails/21.jpg)
HTC alone has 12 different screen size/resolution combinations on Android
Serving an Online Audience with Responsive Design
![Page 22: Frankfurt Contec conference 2013](https://reader033.fdocuments.us/reader033/viewer/2022061300/548dd453b47959f2248b4a85/html5/thumbnails/22.jpg)
Look Mom all hands.
![Page 23: Frankfurt Contec conference 2013](https://reader033.fdocuments.us/reader033/viewer/2022061300/548dd453b47959f2248b4a85/html5/thumbnails/23.jpg)
Serving an Online Audience with Responsive Design
![Page 24: Frankfurt Contec conference 2013](https://reader033.fdocuments.us/reader033/viewer/2022061300/548dd453b47959f2248b4a85/html5/thumbnails/24.jpg)
Serving an Online Audience with Responsive Design
![Page 25: Frankfurt Contec conference 2013](https://reader033.fdocuments.us/reader033/viewer/2022061300/548dd453b47959f2248b4a85/html5/thumbnails/25.jpg)
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!
![Page 26: Frankfurt Contec conference 2013](https://reader033.fdocuments.us/reader033/viewer/2022061300/548dd453b47959f2248b4a85/html5/thumbnails/26.jpg)
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
![Page 27: Frankfurt Contec conference 2013](https://reader033.fdocuments.us/reader033/viewer/2022061300/548dd453b47959f2248b4a85/html5/thumbnails/27.jpg)
“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