Блог студии 77

Адаптивная и отзывчивая верстка

12 сентября 2016

Популярность мобильного интернета принесла с собой новые подходы к верстке сайта. Все это ради того, чтобы взаимодействие пользователя с интернет-ресурсом стало еще проще, удобнее и приятнее. Дома человек может просматривать сайт с компьютера или ноутбука, в машине – с планшета, а на улице со смартфона. И каждый раз ему хочется одного – с легкостью и комфортом получать нужную информацию. Чтобы осуществить эту «пользовательскую мечту», нужен адаптивный дизайн и функционал.

Специалисты аналитики International Data Corporation отмечают, что до 2020 г. аудитория мобильного интернета в глобальном масштабе будет расти в среднем на 2% в год. Кроме того, с апреля 2015 года Google ввел новые методы ранжирования сайтов: ресурсы без адаптивного дизайна понижаются в поисковой выдаче. Все это делает адаптивную верстку еще популярнее. Теперь сайт должен корректно отображаться на всех устройствах: от мобильного телефона до наибольшего разрешения экрана.

Но, опять же, все зависит от задач сайта и его аудитории. Бывает и такое, когда адаптивная верстка плохо сказывается на посещаемости ресурса. В каких случаях это происходит – мы расскажем далее. Но, сначала вернемся к прошлому верстки и разберемся, какие подходы она насчитывает, и чем они отличаются друг от друга. И самое главное, откроем секрет, почему предпочитаем отзывчивую верстку вместо адаптивной. Начнем с истории.

Фиксированная верстка

Простыми словами «верстка» – это превращение макета дизайна в язык HTML, который понимает браузер. Изначально сайты использовали лишь фиксированную верстку, точнее тип макета сайта. Таким образом, если его размер в ширину – 700 пикселей, он также и оставался 700 пикселей на любом размере монитора. То есть сайт мог отображаться корректно только на устройстве с соответствующим размером экрана. В ином случае, при масштабировании появлялись скролы (полосы прокрутки) по ширине дисплея или же пустые по бокам, как на вот этом примере:

Резиновая верстка

Со временем такой подход устарел, как и табличный способ верстки, который сейчас используется только для построения собственно таблиц.

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

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

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

Так, появился новый подход к верстке сайтов – адаптивный. Он решил проблему с корректным отображением контента. Теперь сайт смотрится по-разному на компьютере, планшете и смартфоне. Вслед за масштабом сайта меняется расположение блоков, размеры текстов, кнопок и полей. Из трёх колонок сайта, которые отображаются на настольных мониторах, на планшете может остаться только две, а на телефоне – одна. Для этого веб-дизайнеры используют так называемые «контрольные точки», с помощью которых определяют: когда и какой макет дизайна появится. Чтобы увеличить скорость загрузки мобильной версии, сайт упрощают настолько, насколько это возможно без потери информационной нагрузки. К примеру, чередуют растровые изображения с векторными, убирают блоки «второстепенного значения», такие как «о компании», «блог», а выделяют «контакты». Все эти шаги определяются в зависимости от целей и задач ресурса. Сравните вот этот сайт на разных устройствах, чтобы увидеть, как он меняется:

Но, и здесь также не обошлось без недостатков. Адаптивный сайт также «сдается» перед некоторой шириной экрана и типами устройств. Обычно он имеет только несколько «вариантов отображения»: для компьютера (ноутбука), для планшета, и для смартфона. Поэтому, к примеру, на всех планшетах сайт будет отображаться одинаково и ему «плевать» на то, что размеры дисплея планшетов отличаются. К тому же, при смене размера окна браузера, адаптивный сайт меняется «рывками», а не «мягко», как на «резиновых» ресурсах.

Отзывчивая верстка

Работа над ошибками продолжалась… И появились отзывчивые сайты – улучшенная версия адаптивных. Переходы между «вариантами отображения» стали плавными. Сайт, сделанный на основе отзывчивой верстки, достойно смотрится на любом устройстве, независимо от размера его экрана и оперативно реагирует на команды пользователя. Смотрите пример:

Смотреть такой сайт стало проще и приятнее, а верстать – сложнее. По цене отзывчивая и адаптивная верстка обойдется дороже предыдущих, потому что требует квалификации верстальщика, и постоянного участия дизайнера. Нужно уметь оперировать набором правил верстки под конкретный тип и модель устройства. Да и времени обе верстки занимают немало, так как нужно учесть каждую деталь: не только размеры экрана конкретного девайса, но и его функциональные возможности. Но оно того стоит. Благодаря отзывчивой верстке, пользователь с одинаковой эффективностью находит нужную информацию на любом устройстве. Никакие «скролы прокрутки», «нечитабельный шрифт», «масштабирование» и прочие неприятные моменты не отвлекают посетителя от просмотра контента. Отзывчивая верстка покрывает все недостатки предыдущих подходов. Вот, за что мы ее любим.

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

Отзывчивый сайт давно уже не преимущество. Скорее норма. Хорошая верстка, как и знание грамматики, незаметна, а вот плохая – сразу «бьет» по глазам.

Адаптивная и отзывчивая верстка

Другие статьи автора: