More Related Content Similar to Responsive web design Similar to Responsive web design (20) 2. 5 years ago
slow & expensive mobile internet
shitty mobile devices
with shitty mobile browsers
4
4
web-surfing was a pain
3. 5 years ago
...big pain
I like to read feed of
friend’s posts from mobile.
I even create service
friends2rss.com to convert
LiveJournal friends feed to RSS
stream.
7. 5 years ago
nobody used mobile
devices for something
other then check email or
read news
8. 5 years ago
nobody buy stuff from e-commerce
store from mobile device
nobody use web services from
mobile phone
...
11. Global mobile traffic as % of
total internet traffic
15%
12%
8%
10%
4%
5%
1%
0%
2009.01 2010.01 2011.01 2012.01 now
source: KPCB Internet Trends 2012 & StatCounter Global stats
12. 2009.01 0%
Now 12%
3 years > 50%
13. Bad news
— you can’t ignore more than 10% of users.
Good news
— they have good devices and browsers.
28. .content .main {
float: left;
width: 82.938%; /* 700px / 844px = 0.82938 */
}
.content .info {
float: right;
width: 14.692%; /* 124px / 844px = 0.14692 */
}
32. CSS 2.1 media types
<link rel="stylesheet" type="text/css"
href="core.css" media="screen" />
<link rel="stylesheet" type="text/css"
href="print.css"media="print" />
33. CSS 3 media queries
<link rel="stylesheet" type="text/css"
media="screen and (max-device-width: 480px)"
href="shetland.css" />
<link rel="stylesheet" type="text/css"
media="screen and (max-device-width: 480px) and
(resolution: 163dpi)"
href="shetland.css" />
@media screen and (max-device-width: 480px) {
.column {
display: none;
}
}
34. {
CSS 3 media queries width
height
device-width
device-height
orientation
aspect-ratio
We can check device-aspect-ratio
color
color-index
monochrome
resolution
scan
grid
35. CSS 3 media queries
@media screen
and (max-device-width: 480px)
and (device-aspect-ratio: 16/9)
and (orientation:landscape)
{
.column {
float: none;
}
}
36. CSS 3 media queries
Supported by all current version of browsers.
37. CSS 3 media queries
What’s about IE7/IE8?
— there is no problem, really.
Can we use this right now?
— Yes.
