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

Вёрстка сайта для мобильных устройств жизненно необходима, когда больше 60% пользователей заходят в интернет с телефонов.

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

А ещё на удобные сайты хочется возвращаться — это как дополнительный сервис и способ повысить лояльность аудитории.

Помимо этого у сайтов с адаптивной вёрстки есть и другие преимущества:

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

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

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

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

Адаптив под мобилки держится на шести китах:

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

2. Дизайн не меняем
Если человек зашёл с мобильного, а до этого видел десктопную версию с другими цветами и иллюстрациями в иной стилистике — это может сильно запутать пользователя.

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

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

4. Правило 44 пикселей
Размеры кликабельных элементов точно не должны быть меньше 44, иначе по ним будет трудно попасть, а это обычно сильно раздражает. В основной версии сайта пользователь использует мышь или тачпад, тут никаких проблем не возникнет. А вот при просмотре на мобильных в ход идёт палец, который просто создан для элементов размером от 44 до 48 пикселей. А меньшие могут доставить неудобства.

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

6. Сокращается количество колонок
Для компьютеров классической считается 12-колоночная сетка. На мобильных устройствах достаточно будет от одной до четырёх колонок, а для планшетов — шести или восьми.


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

Средние значение пикселей:
1 600 — для компьютеров
960 — для планшетов
375 — для мобильных устройств

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

Bootstrap и Foundation
Фреймворки для разработки с набором готовых компонентов и стилей, которые легко адаптировать под нужды конкретного проекта.

Handlebars и Mustache
Шаблонизаторы для разработки динамических страниц на сайте, где внешний вид взаимосвязан с разными разрешениями экранов устройств.

SASS и LESS
Препроцессоры CSS, которые упрощают и ускоряют процесс написания стилей для сайта.

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

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

1. Адаптивный дизайн
Он определяет и подстраивает масштаб под экраны на разных устройствах.

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

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

4. Оптимизация кода
К примеру, объединение и минимизация CSS с JavaScript файлами загрузка страницы будет быстрее.

5. Корректный хостинг
Гарантирует более высокую скорость загрузки сайта и делает опыт взаимодействия с продуктом удобнее.

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

Существует множество инструментов для проверки. Например, Google Search Console предоставляет отчёты и предлагает рекомендации по оптимизации. Можно использовать Яндекс Вебмастер.

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

Благодаря ему ширина будет подтягиваться под экран устройства. Если его не добавить, браузер посчитает экран в 1 024 пикселя, а на мобильных сайт просто скукожится в масштабе.

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

Добавляем правила выдачи под разную ширину экранов:
/*
… стандартные правила CSS в html…
например, у нас 4 карточки в одном ряду
*/
@media (max-width:768px) {
/*
… правила для планшетов …
отображение 2 товаров рядом
*/
}
@media (max-width:320px) {
/*
… правила для телефонов …
показ 1 товара в ряд
*/
}
После простых манипуляций браузер сможет показывать подходящие параметры отображения карточек товаров на сайте.

Итак, со стилями разобрались, а значит, пришла пора продумать остальной дизайн сайта.

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

• Прячем объёмные элементы в сворачивающиеся блоки для мобильной версии.

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

• Применяем горизонтальный скролл для широких элементов сайта, например, таблиц с расписанием.

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

• Скрываем фильтры под кнопку, чтобы пользователь мог легко выбрать нужные критерии и не скроллить вечность полотно разделов с мобильного.

Чтобы сайт не превратился в визуальный шум и реклама не затмевала контент, лучше сократить количество баннеров.

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

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

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

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

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

Отсутствие воздуха
Слишком плотная мобильная вёрстка будет рассеивать внимание пользователя, а дизайн будет смотреться тяжёлым

Длинные строчки
Эта проблема может вылезти при Mobile First. В одной колонке текст будет выглядеть органично, а на десктопе растянется и станет сложным для восприятия.

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