Как адаптировать сайт под мобильные устройства

Адаптивный веб-дизайн: что такое и зачем нужен

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

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

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

Адаптивность — это способность веб-сайта “подстраиваться” под любые устройства, гибко приспосабливая контент к ширине и высоте экрана. Такой сайт будет хорошо смотреться как на компьютере, так и на планшете или смартфоне.

Преимущества сайтов с адаптивным дизайном:

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

Правила мобильной адаптации сайта

Подумать об оптимизации сайтов под мобильные устройства нужно еще на этапе разработки интерфейсов и создания дизайн-макетов сайта. Программа минимум — сделать три варианта дизайна:

для компьютера,
для планшета,
для смартфона.

Возможно, будет целесообразным добавить еще дополнительные версии сайта:

для широких мониторов,
для мобильных устройств в разных ориентациях — вертикальном и горизонтальном режиме.

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

Правила дизайна сайта для мобильных устройств:

Перераспределение контента.

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

Вместо обычного меню, отображающего все пункты в шапке, — мобильное меню “гамбургер”, которое разворачивается при нажатии на него. Это поможет оставить больше места для контента.
Перегруппировка информации.

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

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

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

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

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

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

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

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

Брейкпоинты: размеры экрана для адаптивного дизайна

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

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

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

В целом, для адаптации сайтов в веб-дизайне принято использовать понятие брейкпоинтов. Этот термин используется как при написании кода, так и во многих конструкторах сайтов.

Брейкпоинты — это набор контрольных точек (разрешений экрана), в каждой из которых дизайн сайта изменяется.

Обычно в качестве брейкпоинтов выступают наиболее популярные разрешения экранов, например: 1920px, 1280px, 768px, 480px. Таким образом, вы можете выбрать определенные брейкпоинты и создать набор дизайн-макетов с соответствующими размерами.

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

> 1920px — для широкоформатных мониторов: экраны с разрешением от 1920px
> 1280px — для стандартных мониторов: экраны с разрешением от 1280px до 1920px
> 768px — для планшетов и небольших мониторов: экраны с разрешением от 768px до 1280px
> 480px — для смартфонов в горизонтальной ориентации: экраны с разрешением от 480px до 768px
< 480px — для смартфонов с портретной ориентацией: экраны с разрешением менее 480px

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

Мобильная адаптация сайта в Taptop

Как настроить стили для каждого брейкпоинта

В конструкторе Taptop для адаптации сайта под различные устройства используется система брейкпоинтов. Доступно 7 брейкпоинтов: 4 основных и 3 дополнительных. С их помощью можно настроить дизайн страниц на любых устройствах — от мобильных телефонов до широкоформатных мониторов.

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

Вы можете:

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

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

Как использовать автолейауты для перегруппировки блоков

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

Например, в блоке расположены два элемента (текст и картинка), каждый из которых на десктопной версии имеет ширину 50%. Таким образом, элементы выстроены в две колонки.

На планшете ширину элементов нужно установить на 100%, тогда они расположатся друг под другом в один столбец.

Таким же образом можно настраивать размещение элементов в три колонки, указав их ширину равной 33.33% или четыре колонки — ширина 25%.

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

Как автоматически менять размеры элементов и текста в зависимости от ширины экрана

В Taptop помимо пикселей и процентов, есть также единицы измерения, зависящие от размеров экрана:

vw — размер относительно ширины окна браузера (viewport width),
vh — размер относительно высоты окна браузера (viewport height).

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

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

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

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

Часто бывает важно, чтобы определенная порция контента была видна на экране целиком. Это касается, например, первого экрана лендинга с кнопкой призыва к действию. Однако для разных устройств отличается не только разрешение по ширине, но также и по высоте. Поэтому контент, который отлично смотрелся на мониторе с высотой 1080px, может не поместиться в область просмотра ноутбука или планшета.

Здесь нам снова помогут относительные единицы измерения. Вы можете установить высоту блока в значение 100vh, т.е. 100% от высоты экрана, и он автоматически будет занимать всю область отображения устройства от верхнего до нижнего края. Выравнивание элементов внутри блока можно будет регулировать с помощью автолейаутов, равномерно распределив элементы по высоте.

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

Заключение

Безусловно, в настоящее время сложно представить себе сайты без мобильной адаптации. Подобным ресурсам практически нереально выдержать конкуренцию в мире всеобщего распространения мобильных устройств. Поэтому адаптивный дизайн — это неотъемлемая составляющая любого современного сайта.

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