43
Responsive web design Aleksej Leonov, AACIMP 2012

Responsive web design

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: Responsive web design

Responsiveweb design

Aleksej Leonov, AACIMP 2012

Page 2: Responsive web design

slow & expensive mobile internet

web-surfing was a pain

shitty mobile deviceswith shitty mobile browsers

4

4

5 years ago

Page 3: Responsive web design

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

Page 4: Responsive web design

Adaptation for mobile device— hard & expensive

5 years ago

Page 5: Responsive web design

5 years ago

Page 6: Responsive web design

you have to support 3 completely different versions of site

4

4

5 years ago

Page 7: Responsive web design

nobody used mobile devices for something

other then check email or read news

5 years ago

Page 8: Responsive web design

nobody buy stuff from e-commerce store from mobile device

5 years ago

nobody use web services from mobile phone

...

Page 9: Responsive web design

5 years ago

Best strategy forweb-developers?

Page 10: Responsive web design

years passed...

mid 2008(3G)

Q1 2010

Better devices

Faster and cheap mobile internet

Page 11: Responsive web design

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%

Page 12: Responsive web design

2009.01 0%

Now 12%

3 years > 50%

Page 13: Responsive web design

Bad news

— you can’t ignore more than 10% of users.

Good news

— they have good devices and browsers.

Page 14: Responsive web design

~ 980px

Page 15: Responsive web design
Page 16: Responsive web design

— Not good.

Page 17: Responsive web design
Page 18: Responsive web design
Page 19: Responsive web design

May 25, 2010

— World has changed

Page 20: Responsive web design
Page 21: Responsive web design
Page 22: Responsive web design
Page 23: Responsive web design
Page 24: Responsive web design
Page 25: Responsive web design

One page for all mobile devices

Page 26: Responsive web design

Fluid grids — old and well-known

Media queries — new from CSS3

How it works?

Page 27: Responsive web design
Page 28: Responsive web design

.content .main { float: left; width: 82.938%; /* 700px / 844px = 0.82938 */}

.content .info { float: right; width: 14.692%; /* 124px / 844px = 0.14692 */}

Page 29: Responsive web design
Page 30: Responsive web design
Page 31: Responsive web design
Page 32: Responsive web design

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" />

Page 33: Responsive web design

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; }}

Page 34: Responsive web design

CSS 3 media queries widthheightdevice-widthdevice-heightorientationaspect-ratiodevice-aspect-ratiocolorcolor-indexmonochromeresolutionscangrid

We can check{

Page 35: Responsive web design

@media screenand (max-device-width: 480px)and (device-aspect-ratio: 16/9)and (orientation:landscape) { .column { float: none; }}

CSS 3 media queries

Page 36: Responsive web design

CSS 3 media queries

Supported by all current version of browsers.

Page 37: Responsive web design

What’s about IE7/IE8?

CSS 3 media queries

— there is no problem, really.

Can we use this right now?— Yes.

Page 38: Responsive web design

4

4

Except old shitty phones