Post on 31-Oct-2014
description
Responsiveweb design
Aleksej Leonov, AACIMP 2012
slow & expensive mobile internet
web-surfing was a pain
shitty mobile deviceswith shitty mobile browsers
4
4
5 years ago
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.
5 years ago
...big pain
Adaptation for mobile device— hard & expensive
5 years ago
5 years ago
you have to support 3 completely different versions of site
4
4
5 years ago
nobody used mobile devices for something
other then check email or read news
5 years ago
nobody buy stuff from e-commerce store from mobile device
5 years ago
nobody use web services from mobile phone
...
5 years ago
Best strategy forweb-developers?
years passed...
mid 2008(3G)
Q1 2010
Better devices
Faster and cheap mobile internet
source: KPCB Internet Trends 2012 & StatCounter Global stats
0%
5%
10%
15%
2009.01 2010.01 2011.01 2012.01
Global mobile traffic as % of total internet traffic
1%
4%
8%
now
12%
2009.01 0%
Now 12%
3 years > 50%
Bad news
— you can’t ignore more than 10% of users.
Good news
— they have good devices and browsers.
~ 980px
— Not good.
May 25, 2010
— World has changed
One page for all mobile devices
Fluid grids — old and well-known
Media queries — new from CSS3
How it works?
.content .main { float: left; width: 82.938%; /* 700px / 844px = 0.82938 */}
.content .info { float: right; width: 14.692%; /* 124px / 844px = 0.14692 */}
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" />
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; }}
CSS 3 media queries widthheightdevice-widthdevice-heightorientationaspect-ratiodevice-aspect-ratiocolorcolor-indexmonochromeresolutionscangrid
We can check{
@media screenand (max-device-width: 480px)and (device-aspect-ratio: 16/9)and (orientation:landscape) { .column { float: none; }}
CSS 3 media queries
CSS 3 media queries
Supported by all current version of browsers.
What’s about IE7/IE8?
CSS 3 media queries
— there is no problem, really.
Can we use this right now?— Yes.
4
4
Except old shitty phones
http://twitter.github.com/bootstrap/
http://twitter.github.com/bootstrap/
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
mail@aleksejleonov.com
aleksejleonov.com
Aleksej Leonov
Thanks!