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

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

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

habrahabr.ru/users/freetonik/

Thursday, 29 March, 12

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

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


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

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


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

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


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

Responsive Web Design

2010


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

• font-size 100% == 16px;

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


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

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


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

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

• IE6 – width: 100%;


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

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


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

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




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

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


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

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

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


http://bit.ly/g0IDAI

http://bit.ly/g0IDAI

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


Примеры

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)


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


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




Viewport


Viewport

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


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

Technology