Основы адаптивного веб-дизайна

Читать веб-страницу, состоящую из четырех колонок, на экране телефона, имеющем ширину 320 пикселов, очень трудно. Не менее трудно читать одну колонку текста, растянутую на 2560 пикселов большого монитора настольного компьютера. Адаптивный веб-дизайн (Responsive web design, RWD, этот термин введен Итаном Маркоттом) является попыткой решить эту проблему. Он позволяет изменять всю разметку страницы на основе ширины окна браузера (наряду с другими факторами), допуская создание наиболее легко читаемых представлений для каждого устройства при отсутствии необходимости в создании нескольких версий одного и того же веб-сайта. RWD не является единой технологией или методом. В нем собраны воедино несколько методов CSS и HTML для создания веб-страниц, чья разметка адаптируется к различным экранам.

В RWD объединены три основные идеи: гибкие сетки (grid) для разметки, гибкая среда для изображений, а также видео и медиазапросы CSS, предназначенные для создания различных стилей для экранов различной ширины. Гибкие сетки позволяют избавиться от разметок с фиксированной шириной. Поскольку у экранов смартфонов довольно широкий диапазон ширины экрана, создавать страницы с фиксированной шириной нет никакого смысла. Нужна страница, способная расширяться и сужаться, чтобы поместиться на экране конкретного устройства это концепция свободного дизайна. Создание гибкой среды дает возможность подбирать масштаб для изображений и видеоматериалов, чтобы они поместились на соответствующем экране — большие фотографии на больших мониторах, фотографии поменьше на небольших экранах и т. д.

И наконец, медиазапросы являются CSS-технологией, позволяющей на основе создавшихся условий отправлять браузеру различные стили. Например, для экрана, имеющего ширину меньше 480 пикселов, можно отправлять один набор стилей, а для экрана шириной 760 пикселов — другой набор стилей. Но одной шириной дело не ограничивается: можно разрабатывать стили, применяемые только к планшетным устройствам при альбомном просмотре или к устройствам с высокой плотностью пикселов (например, с дисплеем Retina на iPhone и iPad).

Медиазапросы

В CSS3 введено такое понятие, как медиазапросы. Они позволяют назначать стили страницам на основе ширины и высоты окна целевого браузера. Используя данный метод, можно создавать пользовательские стили для браузеров мобильных телефонов, планшетных и настольных компьютеров и тем самым настраивать представление сайта таким образом, чтобы он выглядел наилучшим образом на каждом типе устройства.

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