Нажимая кнопку «Свяжитесь со мной», вы соглашаетесь с Политикой конфиденциальности
Позвоним в течение 15 минут, обсудим условия и просчитаем стоимость работ
14.08.2023

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

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

Вёрстка сайта для мобильных устройств жизненно необходима, когда больше 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. Адаптивный дизайн
Он определяет и подстраивает масштаб под экраны на разных#nbspустройствах.

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

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

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

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

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

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

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

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

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

Шаг 1. Добавляем тег Viewport

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

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

Шаг 2. Обновляем стили сайта

Добавляем правила выдачи под разную ширину экранов:

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

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

Шаг 3. Дорабатываем дизайн сайта

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

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

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

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

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

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

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

Шаг 4. Сокращаем количество рекламы и всплывающих окон

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

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

Шаг 5. Сокращаем количество контента

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

Шаг 6. Проверяем все страницы

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

Ошибки при разработке адаптивной вёрстки

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

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

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

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

Итог

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

5 заповедей брендинга от Молнии
Бренд — это образ компании или продукта. То, что мы вспоминаем, увидев знакомый силуэт.
Можно ли сделать хороший сайт без правок? В Молнии можно. Рассказываем как
Правки и сбор обратной связи удлиняют разработку сайта в 2 раза. А в некоторых ситуациях лендинг, который можно было бы ...
Простить и забыть. 6 устаревших приёмов в копирайтинге
Дизайн и иллюстрации рождаются на основе текста и подкрепляют его. Если писать о стабильно развивающейся ...
Идеальный мэтч. Как найти свою студию
Место работы — это давно уже не про «отсидеть с 9 до 18 и забыть», а про химию, общие интересы и цели.
Почему дизайнер должен уметь писать тексты?
Идеальная ситуация, когда есть целый штат для разработки сайта, и у каждого — своя зона ответственности.
Tone of Voice (ToV) - что это такое в маркетинге, для чего нужен голос бренда
✔️ Что такое Tone of Voice какой бывает и зачем нужен? ✔️ Как выбрать ToV? ✔️ Виды тональности общения и примеры Tone of Voice бренда. ✔️ Поможем выбрать самый успешный голос для своей компании. ✔️ Читайте на сайте.
RTB реклама - что это такое, как работает, настроить и создать РТБ
⚡️ Чем Real-time bidding отличается от других технологий рекламы? ⚡️ Типы баннеров для RTB? ⚡️ Примеры, трафик, площадки, настройка. ⚡️ Преимущества для участников аукциона. ⚡️ Инструкция по настройке, созданию и запуску. ⚡️ Примеры РТБ, плюсы и минусы. ⚡️ Что такое RTB технология покупки рекламы. ⚡️ Медийная реклама RTB.
Кто такой бренд менеджер (brand manager) - обязаности, зарплата, функции
Как стать бренд менеджером? Обязаности, зарплата, функции и сколько зарабатывает бренд менеджер. Читайте в нашей статье.
Что такое юзабилити простыми словами
Почему это так важно хорошее юзабилити? Как сделать интерфейс удобным и понятным. Как провести юзабилити тестирование. Как не допустить типичных ошибок? Расскажем в данной статье
Что такое баннерная слепота и как с ней бороться
Что такое баннерная слепота? Чем опасен феномен баннерной слепоты, как его побороть и что делать, чтобы вашу рекламу заметили? Читайте в статье.
Что такое мокап в дизайне и как использовать
Откуда взять шаблон mock-up и как с ним работать. Что такое мокап в дизайне и как использовать? Где брать готовые? Зачем нужны? Проблемы с использованием готовых мокапов?
Пример технического задания (ТЗ) на разработку сайта
Узнайте, как правильно составить техническое задание на разработку сайта, включая ключевые элементы, требования и рекомендации. Пример шаблона для вашего проекта.
Разработка бренд платформы - что включает в себя
Зачем бренд платформа нужна бизнесу? Как разработать пошаговая инструкция и примеры. Основные 10 шагов - пошаговый полный гайд.
Что такое брендбук: что входит, этапы создания и примеры
Узнайте, что входит в брендбук, как правильно использовать его и чем он отличается от фирменного стиля. Примеры успешных брендбуков.
Конверсия сайта простыми словами - как посчитать по формуле, конверсия в рекламе
Что такое конверсия сайта? Формула для расчета. Виды и типы конверсий и зачем они нужны? Зачем её нужно знать. Какая считается нормальной? Пример расчета конферсии сайта. Ответы на эти вопросы в нашей статье.
Что такое комьюнити простыми словами
Зачем бизнесу создавать комьюнити? Что такое комьюнити простыми словами. Как работает? Критерии сообщества? Как удерживать людей? Примеры. Часто задаваемые вопросы.
Что такое ремаркетинг и ретаргетинг простыми словами
Что такое ремаркетинг? В чем различия ремаркентинга и ретаргетинга простыми словами. Какие задачи бизнес решает? Виды ретаргетинга и ремаркетинга. Как оценить эффективность? Что такое динамический ремаркетинг? Читайте статью на нашем сайте.
Медиапланирование - что это такое, как составить, примеры
Что такое медиапланирование рекламной кампании? Для чего нужен и из чего состоит медиаплан. Как спрогнозиовать эффект и прибыль? Что важно учесть для успешной реализации медиаплана? Читайте в нашем полном гайде на сайте.
Как сделать слайдер для сайта - html, css, javascript
Как реализовать слайдер для своего сайта с помощью html, css, javascript. Готовые решения. Устройство и некоторые принципы работы слайдера. Читать полный гайд на сайте.
Форма обратной связи для сайта на html и php
Покажем как создать простую форму обратной связи с помощью HTML, CSS и PHP. Как правильно добавить форму на сайт? Как правильно настроить форму обратной связи на сайте? Читайте подробнее в нашей статье.
ROI, ROMI, ROAS в маркетинге: чем отличаются и как их посчитать
Всё о метриках ROI, ROMI, ROAS: зачем нужны в рекламе и как считать. Окупаемость и эффективность рекламной компании. Поможем разобраться в нашем гайде про метрики для оценки рентабельности каналов, кампаний и маркетинга.
Брендинг: простыми словами о том, как работает сильный бренд
Что такое брендинг, зачем он нужен компаниям и как влияет на восприятие бизнеса. Разбираем ключевые элементы бренда, виды брендинга и частые ошибки на старте.
Ребрендинг простыми словами: что это, когда и зачем нужен
Узнайте, что такое ребрендинг простыми словами, когда и зачем его проводить, в чем разница между ребрендингом и редизайном, какие бывают виды ребрендинга и как избежать ошибок.
Как адаптировать сайт для мобильных устройств - полный гайд
Преимущества сайта с адаптивной вёрсткой. Как адаптировать сайт под мобильные устройства? Методы оптимизации. Как проверить на мобилопригодность? Пошаговая инструкция мобильной оптимизации.
Прототип сайта что это простыми словами — разработка и создание макета
Что такое прототип и зачем он нужен? 10 лучших инструментов для разработки прототипа. Цели, которые решает прототип сайта для команды разработчиков. Типы и эскизы. Статичный и интерактивный макет.
Что такое KPI простыми словами: система, показатели, расшифровка
Как внедрить и использовать KPI? Виды, правила. Примеры KPI для отдела продаж и маркетолога. Плюсы и минусы системы в бизнесе. Как рассчитать KPI по формуле.