Адаптивная верстка — особенности, преимущества, способы реализации

Что такое адаптивная верстка сайта

Ранее в веб-разработке актуально было корректное отображение сайта в разных браузерах, включая пресловутый Internet Explorer, знаменитый своими фирменными глюками. Ситуация изменилась: сегодня поисковые системы отдают предпочтение страницам, которые корректно отображаются на любом устройстве независимо от размера дисплея. Поэтому, сайт нужно адаптировать не только под десктопные устройства но и под мобильные.

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

Плюсы и минусы

К преимуществам такого подхода следует отнести:

• Экономия ресурсов и средств на содержание сайта. Вместо нескольких версий достаточно обеспечить бесперебойную работу одной универсальной.
• Каждая из версий страницы имеет один и тот же URL, что упрощает SEO продвижение.
• Параллельно с этим упрощается и реклама в социальных сетях.
• Улучшается статистика в аналитических отчетах Яндекса и Google — благодаря синхронизации запросов с компьютеров, планшетов и смартфонов она учитывается для единого сайта.
• Не требуется сложных серверных компонентов. Действующий сайт достаточно один раз модифицировать с помощью CSS стилей, чтобы содержимое страниц адаптировалось под размер дисплея посетившего сайт гаджета.
• Исключено дублирование контента, что часто наблюдается при параллельном запуске мобильной версии сайта.

Это решение имеет и некоторые недостатки:

• Сложность адаптации работающего проекта. Проще запустить новый сайт, чем переписать код.
• Объем страниц у адаптивного сайта больше, чем у обычного: CSS стили и JavaScript дают дополнительные килобайты. Это замедляет загрузку отдельных страниц, что может не понравится, как посетителям, так и поисковым роботам.
• Сложно размещать качественные иллюстрации с высоким разрешением. Приходится искать обходные пути, используя инструменты наподобие плагина Adaptive Images.

Адаптивный дизайн, отзывчивый или мобильная версия — в чем разница?

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

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

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

Мобильная версия — по сути, отдельный сайт, контент которого дублирует основной. Имеет другое доменное имя и требуется отдельное место на сервере. Соответственно, и дополнительных затрат на поддержание работы. Приемлемый вариант для таких гигантов, как, например, Facebook* или AliExpress, но в плане продвижения не подходит для небольших информационных сайтов.

Принципы адаптивной верстки

При создании «универсального» дизайна разработчики придерживаются следующих принципов:

• Соответствие. Более компактная версия сайта оформлением не должна отличаться от объемной. Допускается скрыть лишние элементы с учетом потребностей пользователей различных устройств. Полная версия под разрешение монитора Full HD должна отображать полный функционал.
• Относительность системы координат. Важно помнить, что изображение размером 480 пикселей выглядит по-разному на экране смартфона и дисплее ноутбука. Размер следует устанавливать по тем объектам, которые есть на экране каждого устройства. Сегодня это верхняя граница экрана, по которой равняются разработчики.
• Контрольные точки. Размер адаптивных страниц привязывается к контрольным точкам. Сайт будет отображаться в том же виде, пока пользователь не зайдет с другого устройства.
• Вложение объектов. Если размер одного блока зависит от размера другого, их допускается поместить в общий контейнер для взаимной связи. Прием эффективен в случае с логотипом, кнопками и прочими элементами навигации.
• Подходящие шрифты. Допускается перевод их в веб формат, чтобы они подстраивались под размер экрана.
• Адекватные иллюстрации. Если изображение имеет много деталей, его лучше делать растровым. В противном случае можно сделать векторным. Для более быстрой загрузки, картинки рекомендуется сжимать.
• Юзабилити. Размер элементов, с которыми взаимодействует пользователь, нужно адаптировать для удобного использования. Например, палец по отношению сенсорного экрана имеет большие размеры, чем курсор мыши по сравнению с монитором. Пользователю может быть неудобно нажимать мелкие кнопки или переходить по ссылкам, которые расположены слишком близко друг к другу.

Размеры экранов для адаптивной верстки

Разработчики ориентируются не на конкретные размеры страницы при адаптивной верстке, а на брейкпоинты — контрольные точки, при достижении которых меняется дизайн и соотношение элементов. «Каноническими» считаются следующие размеры дисплея для разных устройств:

• Смартфоны — 320 пикселей, 480 и выше;
• Планшеты — 768 пикселей и выше;
• Нетбуки — 1024 пикселей и выше;
• Мониторы — 1280 пикселей, 1600, 1920 и выше.

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

Сегодня «хорошим тоном» в адаптивной верстке считается выполнение правила Mobile First: дизайн разрабатывается с приоритетом на разрешения экранов мобильных гаджетов и уже потом подгоняется под дисплеи с большим разрешением.

Как сделать адаптивную верстку

Вебмастер, который немного разбирается в HTML и CSS и имеющий некоторый опыт, при должном усердии сможет адаптировать даже давно работающий объемный сайт, но повозиться придется не мало. Давайте рассмотрим, как сделать адаптивный дизайн с минимальными затратами времени.

CSS-фреймворки

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

• Bootstrap. Самый популярный фреймворк, используемый в веб-разработке. Легко и быстро адаптирует сайт под любое устройство, используя 12-колоночную сетку. Доступно огромное количество готовых компонентов. Поддерживает 2 самых популярных CSS-препроцессора: Sass и Less, а также Normalize.css, обеспечивающий кроссбраузерность контента.
• Materialize. Платформа, созданная по всем принципам материального дизайна (использование «карточек», плавный переход между элементами, отсутствие острых углов, применение строгих макетов и анимаций). Инструмент содержит набор стилей и инструменты для их реализации. Используется 12-колоночная сетка. Поддерживается Sass.
• Bulma. Современный фреймворк, использующий Flexbox вместо сетки колонок — очень удачную реализацию «резиновых» контейнеров. Доступно большое количество готовых компонентов, поддерживается Sass.
• Pure. Компиляция небольших адаптивных модулей, которые можно использовать на любом ресурсе. Требует написания собственных кастомных стилей, так как в этом фреймворке их количество сведено к минимуму. Поддерживает 24-колоночную сетку. Не использует файлы JS.

Адаптируем текущий дизайн

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

Почти всегда строка с тегом Viewport выглядит следующим образом:

<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>

Параметр width дает браузеру команду подстроить страницу под экран устройства, с которого пользователь зашел на сайт. Масштабирование определяется автоматически. Initial-scale означает коэффициент масштабирования. Если ему присвоено значение 1, разрешение экрана устройства и CSS приравниваются друг к другу независимо от размера. Тег Viewport нужно прописать в head каждой страницы сайта.

Рассмотрим адаптацию работающего сайта на примере самого популярного фреймворка Bootstrap. Чтобы он работал на странице, в head нужно прописать и код его активации. В случае с последней, 5-й версией, это выглядит так:

Пример кода Bootstrap

Код для Bootstrap 4:

Пример кода Bootstrap 4

И последний штрих, без которого верстать адаптивный дизайн под размер экрана невозможно — добавление в разметку классы сетки Bootstrap. Разным устройствам в этом фреймворке присвоены разные префиксы класса, от чего и будем отталкиваться.

Классы сетки Bootstrap

Следует учитывать, что префикс .col- отвечает не только за минимальные значения, но и за автоматическую разметку на экранах любых размеров.

Пример колонок равной ширины. Добавить можно любое количество классов, при этом ширины всех колонок будут равными:

Пример колонок равной ширины

Можно установить фиксированную ширину колонок, назначив подходящее количество ячеек сетки. Выглядеть это будет так:

Фиксированная ширина колонок

Для адаптации содержимого под размер экрана используется следующий метод:

Адаптация содержимого под размер экрана

С учетом всех брейкпоинтов можно задать фиксированный размер колонок, когда в этом есть потребность, и адаптивный размер для всего остального содержимого:

Фиксированные размеры колонок и адаптивный размер для остального содержимого

CSS3 Media Queries

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

Для медиа-запросов используется следующий синтаксис:

Синтаксис для медиа-запросов

Например, для всех устройств, кроме смартфонов, запрос будет выглядеть следующим образом:

@media all and (not handheld) { … }

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

* Meta Platforms Inc. (и принадлежащие ей соц.сети Instagram, Facebook) признана экстремистской организацией, ее деятельность в России запрещена.