Responsive web design

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/

responsinator.com

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

[email protected]

aleksejleonov.com

Aleksej Leonov

Thanks!