View
104
Download
0
Category
Tags:
Preview:
DESCRIPTION
Citation preview
brian@brianmcconnell.me
Responsive Web 101
brian@brianmcconnell.me
Responsive Web 101
1. A flexible, grid-based layout
2. Fluid images and media
3. Media Queries
brian@brianmcconnell.me
Responsive Web 101
brian@brianmcconnell.me
Why The Responsive?
brian@brianmcconnell.me
This is the web
brian@brianmcconnell.me
Device Proliferation
Google analytics - May 2013
Total Screen ResolutionsMobile Screen ResolutionsBrowsersOperating Systems
425 2052717
brian@brianmcconnell.me
Top Operating Systems
Google analytics - May 2013
brian@brianmcconnell.me
Um... we’ll just make an iOS app.
kthxbye.
brian@brianmcconnell.me
It’s Not Just Phones
brian@brianmcconnell.me
The Web Is A Gateway Drug
Most people download 4 apps per month
Most people access 25 sites per day
More Americans (36.4%) use their mobile browser than access applications (34.4%)
http://www.lukew.com/ff/entry.asp?1135http://www.lukew.com/ff/entry.asp?1413
brian@brianmcconnell.me
“Mobile” Isn’t Mobile
60% of smartphone use is at home
79% of tablet use is at home
http://googlemobileads.blogspot.co.uk/2012/08/navigating-new-multi-screen-world.html
brian@brianmcconnell.me
“Mobile” Isn’t Mobile
brian@brianmcconnell.me
Responsive Is Good BusinessTime Inc. Responsive Redesign
Pages per visit, across mobile, tablet and desktop are up considerably.
Mobile is up 23% compared to what it had been.
Homepage uniques are up 15%, and time spent is up 7.5%.
The mobile bounce rate decreased by 26%.
O’Neill Clothing Responsive Redesign
65.7% conversion rate increase on iPhone/iPod
101.2% revenue growth on iPhone/iPod
407.3% conversion rate increase on Android devices
591.4% revenue growth on Android devices http://www.lukew.com/ff/entry.asp?1691
brian@brianmcconnell.me
It’s Good Business
http://www.lukew.com/ff/entry.asp?1691
Time Inc. Responsive Redesign
Pages per visit, across mobile, tablet and desktop are up considerably.
Mobile is up 23% compared to what it had been.
Homepage uniques are up 15%, and time spent is up 7.5%.
The mobile bounce rate decreased by 26%.
O’Neill Clothing Responsive Redesign
65.7% conversion rate increase on iPhone/iPod
101.2% revenue growth on iPhone/iPod
407.3% conversion rate increase on Android devices
591.4% revenue growth on Android devices
brian@brianmcconnell.me
How Do Make The Responsive?
brian@brianmcconnell.me
Breakpoints>= 768px <= 767px
brian@brianmcconnell.me
Do The Media Queries
@media screen and (max-‐device-‐width: 767px) {}
Media queries contain two components:1. A media type (screen)2. The actual query enclosed within parentheses
containing a feature to inspect (max-device-width), followed by the target value (480px).
brian@brianmcconnell.me
Show To Me Please The Code#left-column { width: 644px; float: left;}#right-column { width: 316px; float: left;}@media screen and (max-‐device-‐width: 767px) { #left-column, #right-column { float: none; clear: both; width: 100%; }}
brian@brianmcconnell.me
Show To Me Please The Code#left-column { width: 644px; float: left;}#right-column { width: 316px; float: left;}@media screen and (max-‐device-‐width: 767px) { #left-column, #right-column { float: none; clear: both; width: 100%; }}
Small devices only see this
brian@brianmcconnell.me
Cinchcast Has The Responsive
brian@brianmcconnell.me
Can You Defeat My Cinchcast Style?
brian@brianmcconnell.me
Twitter Bootstrap
brian@brianmcconnell.me
Large desktops:Regular Desktops (IE8): Tablets to regular desktops:
Twitter Bootstrap
>= 1200px980px - 1199px768px-979px<= 767px
brian@brianmcconnell.me
Twitter Bootstrap
brian@brianmcconnell.me
Twitter Bootstrap
brian@brianmcconnell.me
<div class="container"><div class="row" ><div class="span8"><div class="row" ><div class="span8">...</div><div class="span4">...</div></div></div><div class="span4">...</div></div></div>
Twitter Bootstrap
brian@brianmcconnell.me
<style>.row { margin-left: -20px;}[class*="span"] { float: left; margin-left: 20px;}.span12 { width: 940px;}.span11 { width: 860px;}....span2 { width: 140px;}.span1 { width: 60px;}</style>
Twitter Bootstrap
brian@brianmcconnell.me
Twitter Bootstrap
brian@brianmcconnell.me
Twitter Bootstrap
brian@brianmcconnell.me
Twitter Bootstrap
brian@brianmcconnell.me
<style>@media (max-width: 767px){.row { margin-left: 0px;}[class*="span"] { float: none; width: 100%; margin-left: 0px;}
}</style>
Twitter Bootstrap
brian@brianmcconnell.me
Oh snap! Mobile is easy...
brian@brianmcconnell.me
Good Mobile UX
Responsive ImagesGesture SupportJS Performance
brian@brianmcconnell.me
Responsive Images
brian@brianmcconnell.me
Responsive Images
<img src="small.jpg" id="dog" />
<style>@media (min-width: 768px){ #dog { content: url(‘woof.jpg’); }}</style>
brian@brianmcconnell.me
Responsive Images
<img src="small.jpg" data-src-large="large.jpg" />
<script>if(mobile){ $(‘img[data-src-large]’).each( function() { var url = $(this).data(‘data-src-large’); $(this).attr(‘src’, url); });}</script>
brian@brianmcconnell.me
Gesture Support
Is a good idea...
brian@brianmcconnell.me
JS Performance
Is a great idea...
brian@brianmcconnell.me
Thank You!
brian@brianmcconnell.me
Recommended