1. Responsive
web design
Aleksej Leonov, AACIMP 2012

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.

4. 5 years ago
Adaptation for mobile device
— hard & expensive

5. 5 years ago

6. 5 years ago
you have to support 3 completely
different versions of site

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
...

9. 5 years ago
Best strategy for
web-developers?

10. years passed...
Better devices
mid 2008 Q1 2010
(3G)
Faster and cheap mobile internet

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.

14. ~ 980px

16. — Not good.

19. May 25, 2010
— World has changed

25. One page for all mobile devices

26. How it works?
Fluid grids — old and well-known
Media queries — new from CSS3

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.

38. Except old shitty phones
4
4

39. http://twitter.github.com/bootstrap/

40. http://twitter.github.com/bootstrap/

41. responsinator.com

42. Links
http://www.alistapart.com/articles/responsive-web-design
http://twitter.github.com/bootstrap
http://responsinator.com
Examples
http://mediaqueri.es
http://foodsense.is
http://smashingmagazine.com
http://createdm.com

43. Thanks!
Aleksej Leonov
aleksejleonov.com
mail@aleksejleonov.com