Адаптивный веб-дизайн

Рахим Давлеткалиевfreetonik.com

habrahabr.ru/users/freetonik/

Thursday, 29 March, 12

Заметили ли вы?

скорость роста – в 8 раз выше по сравнению с дтследующие 4 года – еще 26x рост!

Thursday, 29 March, 12

мобильные приложения <

мобильные сайты

Thursday, 29 March, 12

адаптивный веб-дизайн ≠

мобильные сайты

Thursday, 29 March, 12

Этан Маркотт(Ethan Marcotte)

Responsive Web Design

2010

Thursday, 29 March, 12

Thursday, 29 March, 12

Thursday, 29 March, 12

Thursday, 29 March, 12

Адаптивные шрифты

• font-size 100% == 16px;

• h2 font-size 28px == 28/16 == 1.75em

Thursday, 29 March, 12

Адаптивная верстка

• Резиновая верстка с шириной в %

Thursday, 29 March, 12

Адаптивные картинки

• img, video, object {max-width: 100%}

• IE6 – width: 100%;

Thursday, 29 March, 12

Адаптивные картинки

• В Windows IE6 и FF3 при уменьшении размера качество картинки портится

Thursday, 29 March, 12

Этан Маркотт нас спасёт!

http://unstoppablerobotninja.com/entry/fluid-images/

Thursday, 29 March, 12

Лишний трафик

загружается отображается

Thursday, 29 March, 12

РешениеResponsive Images: Experimenting with Context-Aware

Image Sizing (Filament Group)http://bit.ly/g0IDAI

<img src="small.r.jpg" data-fullsrc="large.jpg">

Thursday, 29 March, 12

Media queriesCSS 2.1

<link rel="stylesheet" type="text/css" href="core.css" media="screen" /><link rel="stylesheet" type="text/css" href="print.css" media="print" />

CSS3<link rel="stylesheet" type="text/css"

media="screen and (max-device-width: 480px) and (resolution: 163dpi)"href="shetland.css" />

Thursday, 29 March, 12

Примеры

iPad Portrait: (device-max-width: 768px)

iPhone Landscape: (max-device-width: 480px)

iPhone 4: (-webkit-min-device-pixel-ratio: 2)

ориентация:

media="all and (orientation:landscape)

Thursday, 29 March, 12

Не все бразуры одинаково полезны

Thursday, 29 March, 12

http://code.google.com/p/css3-mediaqueries-js/

Thursday, 29 March, 12

Viewport

Thursday, 29 March, 12

Viewport

<meta name=”viewport” content=”width=device-width; initial-scale=”1.0”>

Thursday, 29 March, 12

Thursday, 29 March, 12