11. 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?1135
http://www.lukew.com/ff/entry.asp?1413
14. brian@brianmcconnell.me
Responsive Is Good Business
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
http://www.lukew.com/ff/entry.asp?1691
15. 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
18. 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).
19. 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%;
}
}
20. 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 devicesonly see this