Здравствуйте, дорогие читатели! Мой опрос «Используете ли вы принципы responsive web design при создании сайтов?» показал, что примерно четверть посетителей даже не в курсе, что это за зверь такой — Responsive web design. Поэтому я решила устранить данный пробел знаний и рассказать о данной теме просто и доступно.
Responsive web design — специальная технология создания сайтов, которые автоматически подстраиваются под любой размер экрана. Синонимы: реагирующий, отзывчивый, адаптивный. Главный принцип — удобство восприятия информации независимо от того, с какого устройства зашел на сайт пользователь. Хоть с мобильного телефона, хоть с телевизора, подключенного к сети Интернет. При этом совершенно не требуется создавать под каждое устройство отдельную версию сайта.
Автором понятия Responsive web design и одноименной книги является Этан Маркотт (Ethan Marcotte).
В отличие от древней «резиновой» верстки в RWD решается ряд специальных задач, как например, изменение не только ширины блоков, но и непосредственно самих картинок и видео-роликов на лету, что ранее было просто недоступно. Благодаря новым технологиям и современным браузерам теперь этот процесс стал возможен и доступен каждому веб-мастеру.
Кроме того, Responsive web design учитывает и такие вещи как: ориентация устройства, скрытие некоторых несущественных частей сайта, предоставление удобных для нажатия пальцами ссылок на сенсорных экранах мобильных устройств, геолокация и др.
Задачу подгонки блоков сайта под нужный размер экрана решают т.н. Media Queries — специальный набор правил из арсенала CSS, в котором заранее прописываются ширина и высота окна браузера, разрешение экрана и ориентация в пространстве (portrait или landscape). Вернее, в стилях прописываются несколько таких наборов, учитывающих разные варианты размещения блоков. Например, на большом мониторе у сайта 3 колонки (контент + 2 сайдбара), а на iPad в вертикальной ориентации колонок будет всего 2, а третья либо переползет в горизонтальную плоскость под шапку, либо вообще будет скрыта как не сильно важная. Более подробно о Media Queries рекомендую почитать у Игоря Квентора на его блоге Вебсовет.
Лично меня больше заинтересовал вопрос изменения картинок, что называется, на лету. Ведь для веб-дизайнера эта возможность является определяющей при создании макета будущего сайта. Необходимо заранее предусмотреть, как именно будет (и будет ли вообще) меняться та или иная картинка, нужно ли делать заранее несколько вариантов картинки, или она будет рендериться на ходу. Подробная статья по «жидким» картинкам есть на сайте Alistapart.com (англ.). Идея тут достаточно проста: для изображений нужно применять свойство {max-width: 100%} и тогда они не будут вылезать за пределы родительского блока, даже если этот блок меньше самой картинки. Изображение при этом будет пропорционально уменьшаться (пруфлинк).
По-сути, этот же подход применим и к другим объектам: флэш, видео, прочим «эмбедам»:
img,
embed,
object,
video {
max-width: 100%;
}
Очень просто и удобно.
Другая важная вещь — ссылки. Очень неудобно, а порой и невозможно попасть пальцем по текстовой ссылке на мобильнике с тачскрином. Поэтому веб-дизайнер должен заранее предусмотреть замену типичных ссылок крупными кнопками. Например, всем известную текстовую ссыль «читать далее» на блоге. То есть, для мобильников сделать эту ссыль удобной кнопочкой.
Таким образом, задача веб-дизайнера в плане адаптации сайтов под различные устройства состоит в том, чтобы заранее нарисовать несколько вариантов отображения с учетом размеров экранов и их ориентацией. Количество таких вариантов не будет бесконечным, как это может показаться вначале. Наборы правил в Media Queries как раз и ограничивают это количество условными определителями «если»: если ширина окна меньше nnn, то применять такой-то набор, если меньше mmm, то такой-то. И т.д. Исходить нужно, естественно, из современных реалий на рынке мобильных устройств. По-сути, в игре всего три участника: планшеты, смартфоны размером а ля iPhon и мобильники с маленькими экранами. Таким образом, варианты веб-дизайна сайта нужно будет подгонять под наиболее типичные размеры экранов этих устройств. Например, меньше 1000px, меньше 700px, меньше 480px.
Полезные ссылки по теме Responsive web design:
1. Responsive Web Design: What It Is and How To Use It
2. Раскрытие тайны реагирующего веб-дизайна
3. 62 полезных инструмента для адаптивного дизайна
4. 20 Useful jQuery Plugins for Responsive Web Design
ПС: как видите, под данную тему я завела отдельную рубрику Отзывчивый дизайн. Сюда буду добавлять периодически интересные и полезные плюшки. Чтобы быть в курсе, подпишитесь на rss.
