Embed Size (px)
DESCRIPTION
Citation preview
Responsive Web 101
1. A flexible, grid-based layout
2. Fluid images and media
3. Media Queries
Device Proliferation
Google analytics - May 2013
Total Screen ResolutionsMobile Screen ResolutionsBrowsersOperating Systems
425 2052717
Top Operating Systems
Google analytics - May 2013
Um... we’ll just make an iOS app.
kthxbye.
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
“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
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
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
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).
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%; }}
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
Can You Defeat My Cinchcast Style?
Large desktops:Regular Desktops (IE8): Tablets to regular desktops:
Twitter Bootstrap
>= 1200px980px - 1199px768px-979px<= 767px
<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
<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
<style>@media (max-width: 767px){.row { margin-left: 0px;}[class*="span"] { float: none; width: 100%; margin-left: 0px;}
}</style>
Twitter Bootstrap
Good Mobile UX
Responsive ImagesGesture SupportJS Performance
Responsive Images
<img src="small.jpg" id="dog" />
<style>@media (min-width: 768px){ #dog { content: url(‘woof.jpg’); }}</style>
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>
Gesture Support
Is a good idea...
JS Performance
Is a great idea...
![Responsive Design Fundamentals [Read-Only] - … Design Fundame… · Responsive Design Fundamentals Carolyn Yon, PMI-ACP Development Manager ... Responsive Design • web design](https://img.pdfslide.net/doc/110x75/5b7c060b7f8b9adb4c8df8c4/responsive-design-fundamentals-read-only-design-fundame-responsive-design.jpg)
