lessons learned from responsive design
DESCRIPTION
This presentation was given at the Houston Interactive Marketing Association's IS conference. It covers the challenges faced with Responsive Web Design and some advice for your current Mobile Web Design work.TRANSCRIPT
Half Baked Cookies
Lessons from Responsive Designhttp://www.flickr.com/photos/rhinoneal/5633001128
srcset and <picture>http://mobile.smashingmagazine.com/2013/05/10/how-to-avoid-duplicate-downloads-in-responsive-images/
ReSRC.ithttp://app.resrc.it/s=w1160,pd1/o=80/http://www.resrc.it/img/demo/preview.jpg
Cooking up Responsive
1. Preparing the Kitchen
2. Mix in the Clients
3. The Bakers are Missing a Few Steps
4. Advicehttp://www.flickr.com/photos/79638854@N07/9556425950
1. Preparing the Kitchen
Everything starts with saleshttp://www.flickr.com/photos/opacity/4036543460/
Mostly Used at Home (84%)
Mobile Traffic
In a study of ~70 clients:
27% average NPO Mobile traffic Q1 2013
20% average All Mobile Traffic Q1 2013
67% increase Q1 2012 to Q1 2013
Some clients at 50% mobile traffic
Top 20 by Operating System
Google Says So
1. Google recommends webmasters follow the industry best practice of using responsive web design, namely serving the same HTML for all devices and using only CSS media queries to decide the rendering on each device.
2. If responsive design is not the best option to serve your users, Google supports having your content being served using different HTML. The different HTML can be on the same URL or on different URLs, and Googlebot can handle both setups appropriately if you follow our recommendations.
How Much Does it Cost?
$500??? (about.com)http://www.flickr.com/photos/68751915@N05/6848823919
Included for Free
Wordpress Templates
Client Expectations
Car Mechanichttp://www.flickr.com/photos/47557199@N03/4478980639
2. Mix In The Clients
"Look, good against remotes is one thing. Good against the living? That's something else.”
―Han Solohttp://www.flickr.com/photos/26346563@N04/7941041666
Adoption
100%http://www.flickr.com/photos/newhousedesign/3363986966
All Content
Pixel Perfect
All Browsers and Devices
Your Own Worst Enemy
No Problem, Easyhttp://blog.schipul.com/wp-content/uploads/2010/08/Eloy-and-Matt-Mullenweg.jpg
Number of Responsive Sites?
<1%https://meanpath.com/f/QBYvnw (1,109,052 results via meanpath)
Sick of Boxy Design
Not Ready for the Responsibilityhttp://www.flickr.com/photos/donnieray/8658314801/
3. Missing a Few Stepshttp://www.flickr.com/photos/coda/417602912
Design Failure
http://www.1stwebdesigner.com/css/psd-to-html-artthatworks-skeleton-boilerplate/
Mobile First and New Processes
Mostly Fluid
Column Drop
http://www.lukew.com/ff/entry.asp?1514 (Luke Wroblewski)
Frameworkshttp://designinstruct.com/roundups/html5-frameworks/
Screen Resolutions / Breakpoints
Apple Screen Sizes
Android Screen Sizes
http://opensignal.com/reports/fragmentation.phpthe most common aspect ratio 5:3
FlexboxThe main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space. http://css-tricks.com/snippets/css/a-guide-to-flexbox/
Relative Fonts and Units
Server Side Images
Landing Pages
Mobile Navigations
jQuery Mobile
Tables
Links and Buttons
4. What About Some Damn Advice?
Pixel Perfect is Deadhttp://www.flickr.com/photos/53867930@N08/5115514047
Process Changes Happen All The Time
Scientifically Study Evolutionhttp://www.flickr.com/photos/rizzato/3273263985
Make Decisions Reasonably
Common Sense Tells Me…http://mobile.smashingmagazine.com/2013/05/10/how-to-avoid-duplicate-downloads-in-responsive-images/
Schipul / Tendenci / @longstation
Aaron Long
Aaron [email protected] x515www.schipul.comwww.tendenci.com