Несомненно,  отзывчивый веб-дизайн (responsive web design) — это трендовое направление в веб-разработке, которое уже сейчас считается хорошим тоном, а в будущем, наверняка, будет обязательным условием для качественного сайта. Итак, что такое отзывчивый веб-дизайн?

Отзывчивый веб-дизайн — это технология верстки дизайна макета сайта, которая позволяет корректно отображать сайт на всех устройствах различных разрешений и форматов, имеющих выход в интернет. Например: мониторы, планшеты, ноутбуки, смартфоны,  телевизоры и пр. Обычно, когда идет речь об отзывчивом веб-дизайне, имеется в виду макет веб-страницы.

Впервые понятие отзывчивого веб-дизайна (англ. responsive web-design) ввел Этан Маркотт в одной из своих статей в мае 2010 года.

Впоследствии он выпустил книгу под названием «Responsive Web Design» (в русском переводе — «Отзывчивый веб-дизайн«), посвященную данной технологии.

В данной книге Этан Маркотт обозначил «три слона» отзывчивого дизайна:

1.  Гибкий макет на основе сетки (flexible, gridbased layout).
2.  Гибкие изображения (flexible images).
3.  CSS3 медиазапросы (CSS3 media query)

1. Гибкий макет на основе сетки

Для отзывчивого веб-дизайна html-сетки (фреймворки) необходимы именно из-за гибкости и универсальности разметки — так имея один html-код и меняя только CSS файл можно легко реализовывать отличную совместимость с разными экранами устройств.

Есть множество CSS-фреймворков, но самые удобные, функциональные и часто используемые такие:

5 популярных CSS фреймворков:

• Responsive Grid System — простой и удобный CSS-фреймворк с 12, 16, 24 колонками.
• Responsive HTML5 Aeon Framework — понятный 12-колоночный фреймворк со всеми последними «фичами» css3 и html5.
• Foundation 3 — функциональный, удобный CSS-фреймворк из 12 колонок, готовых прототипов, последними веб-стандартами.
• Bootstrap — знаменитый многофункциональный HTML/CSS-фреймворк, разработанный для Twitter.
• Gumby — новый респонсив 960Grid CSS Framework.

Гибкие изображения

Для отзывчивого веб-дизайна одним из главных моментов является наличие гибких изображений на страницах, которые меняют свои размеры в зависимости от просматриваемого устройства.

Реализовать гибкокость изображений очень просто с помощью CSS3 :
img {
max-width: 100%;
height: auto;
}

Примечение. Чтобы гибкие изображения работали в IE8 нужно добавить свойство width:auto. Поэтому специально для IE8 можно применить IE-хак:

@media \0screen {
img {width: auto; /* for ie 8 */}
}

Правило max -width: 100% можно применять и к большинству элементов с фиксированной шириной, таким как видео– и другие медиа-файлы. Фактически мы можем добавить в селектор еще и другие медиаэлементы:
img,
embed,
object,
video {
max-width: 100 %;
}

CSS3 медиазапросы

CSS3 медиазапросы — это фишка отзывчивого веб-дизайна! С помощью этих волшебных CSS медиазапросов можно указывать браузерам какие CSS классы применять для того или иного экранного разрешения. Кроме того, медиазапросы позволяют не только ориентироваться на конкретный класс устройств, но и анализировать физические характеристики устройства, использующегося для отображения страницы.

Приведем некоторые примеры CSS медиазапросов:
/для экранов 980 пкс и меньше/
@media screen and (max-width: 980px) {
#page {width: 95%;}
#content {width: 70%;}
#sidebar {width: 25%;}
}

/для экранов 700 пкс и меньше/
@media screen and (max-width: 700px) {
#page {width: auto; float:none;}
#sidebar {width: auto; float:none;}
}


/для экранов 480 пкс и меньше/
@media screen and (max-width: 480px) {
#header{height: auto;}
#sidebar {display:none;}
}

Примечение. Да, это всеми веб-разработчиками «любимый» IE.  Версии ниже IE8  не поддерживают медиазапросы, поэтому необходимо добавить следующий «спасительный код» в <meta>-теги страницы:
<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->

Материал подготовлен ТопОбзор. По материалам книги «Отзывчивый веб-дизайн», Этан Маркотт.

При использовании этого материала активная ссылка на http://www.topobzor.com обязательна.