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

Сайт должен корректно отображаться как на десктопных, так и на мобильных устройствах – это основное требование поисковых систем Яндекс и Google. Адаптивность удобна для пользователей и приносит выгоду бизнесу: в течение 2023 года доля мобильного трафика увеличилась на 33%, по прогнозам экспертов показатель будет продолжать демонстрировать рост. Люди активно занимаются интернет-шопингом со смартфонов и планшетов, если интернет-магазин или новостник не адаптируется по эти устройства – повысится процент отказов, а компании начнут терять клиентов. Рассказываем, как адаптировать сайт под мобильные устройства, как провести проверку Mobile-Friendly и каких ошибок стоит избегать.

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

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

• интерфейс растянут, не все элементы отображаются на экране;

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

• приходится уменьшать или увеличивать масштаб вручную;

• всплывающие баннеры занимают более 50% площади экрана;

• отдельные элементы накладываются друг на друга, необходимо долго прокручивать страницу, чтобы добраться до контента;

• изображения огромные, текст практически невозможно прочитать.

Все это очень неудобно для посетителей, поэтому более 90% людей покидают сайт, который автоматически не подстраивается под мобильные устройства. Снижается глубина просмотра страниц и повышается процент отказов – ухудшаются пользовательские факторы, а поисковые системы ставят Mobile-friendly в приоритет: занять место в ТОП-10 Яндекс или Google без адаптивности практически невозможно.

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

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

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

• визуальная аккуратность. Все элементы интерфейса структурированы, они не растягиваются и не перекрывают друг друга, поэтому легко воспринимаются и способствуют повышению конверсии;

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

• приоритет в поисковой выдаче. С 2019 года Google отдает предпочтение сайтам, которые адаптированы под мобильные устройства;

• кроссбраузерность. Рассматриваемая верстка позволяет не волноваться о том, что сайт не сможет посмотреть пользователь, забывший обновить Chrome или же осуществляющий посещение с новой модели «Айфона» через Safari.

Адаптивная верстка улучшает пользовательский опыт, позволяет не терять мобильный трафик и предупреждает низкую конверсию. Еще один плюс – точная аналитика (аналогичное правило действует для администрирования), в случае с мобильной версией сайтов будет два, что усложняет работу с ключевыми показателями бизнеса. Адаптивный дизайн разрабатывается один раз – это не только удобно, но и выгодно (снижается чек на дальнейшее обслуживание и усовершенствование проекта).

Резиновый дизайн на устройствах с разным разрешением экрана

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

Упоминая адаптивную верстку, разработчики имеют в виду 2в1: дизайн для десктопных и мобильных устройств заключен в один флакон, а подстраивание выполняется автоматически. Мобильная версия функционирует на поддомене (самый распространенный вариант .m), создается отдельный сайт с самостоятельными параметрами аналитики, администрирования и другими показателями. С технической точки зрения десктопная и мобильная версия – два отдельных сайта, имеющих индивидуальные верстку, URL-адрес и наполнение.

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

• повышается стоимость разработки, так как создаются 2 сайта с индивидуальными дизайном и наполнением;

• обслуживание стоит дороже, особенно если речь идет об интернет-магазине с регулярно обновляющимся ассортиментом. Приходится тратить больше на администрирование, настройку, поддержку;

• не все потребности пользователей закрыты, если мобильная версия существенно упрощена. Например, на основном доступна онлайн-примерка, на мобильном – нет, что влечет за собой падение конверсии и разочарование посетителей;

• негативное влияние на ранжирование – в поисковой системе продвигаются два сайта, а не один.

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

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

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

• Mobile Friendly от поисковой системы Google. В Search Console доступен специальный инструмент, который помогает выполнить проверку оптимизации, является бесплатным;

• мобильные страницы от Яндекса. Сначала следует добавить сайт в Яндекс.Вебмастер, потом – ввести адрес и запустить исследование;

• инструменты браузера. Достаточно открыть сайт в браузере, нажать F12 или комбинацию клавиш CTRL + Shift + I, чтобы запустить панель разработчика. После этого в панели нужно выбрать тип устройства или установить желаемое разрешение экрана.

Проверяем адаптивность через инструменты разработчика в браузере

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

Основные принципы адаптивного дизайна сайта

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

Дублирование контента

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

Единый дизайн

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

Иерархичность структуры

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

Сохранение всех функций

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

Полная автоматизация

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

Какие разрешения экранов для адаптивной верстки существуют

В адаптивной верстке используются три основных разрешения, измеряемых в пикселях:

• 1600 – персональные компьютеры;

• 960 – планшеты;

• 375 – телефоны.

Основные разрешения экранов

Параметры ширины могут изменяться, что зависит как от сайта, так и от технической специфики. Если пользователь посещает ресурс с устройства, имеющего ширину экрана 1366 пикселей, но уменьшает окно браузера, то при достижении отметки 960 пикселей и меньше отображение изменится. По разрешению (его называют брейкпоинт) определяется, какой вариант дизайна должен быть представлен. Существуют другие системы классификации брейкпоинтов, что зависит от фреймворков, например, в Bootstrap их шесть. Выделим дополнительное деление:

• от 1920 пикселей для мониторов Full HD;

• мониторы без Full HD – от 1280 пикселей;

• мобильные устройства – от 320 пикселей;

• ноутбуки – не менее 1024 пикселей;

• планшеты – 768 пикселей.

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

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

Адаптирование HTML сайта под мобильные устройства может быть выполнено через обращение к профессиональному дизайнеру. Необходимо указать, для каких параметров экрана нужны макеты, например, 1600 пикселей для компьютеров и 320 для мобильных устройств. Отдельно – фиксирование количества страниц/разделов, для которых требуется верстка.

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

Работа с адаптивностью в Фигма

Адаптивная верстка всегда начинается с аналитики: исследуются каналы привлечения и тип трафика. Случается, что мобильная версия разрабатывается до десктопной, такой подход называется Mobile First и практикуется в том случае, если доминирующая часть клиентов будет посещать сайт именно со смартфонов и планшетов. Для стандартных проектов все наоборот: сначала десктоп, потом – адаптивность. Когда основная версия сайта готова процесс существенно упрощается: элементы переносятся в макет с необходимыми пропорциями (уменьшаются).

ТОП-5 ошибок, допускаемых при разработке адаптивного дизайна

1. Скрытие контента

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

Разбор ошибок, допущенных в дизайне

2. Тяжелые изображения

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

3. Мелкие элементы

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

Маленький тач-элемент

4. Сначала Mobile first

В последнее время в моду вошла разработка Mobile first, потом – версии для десктопов. На практике лучше идти от сложного к простому, иначе макет для десктопной версии придется дополнять деталями, продумывать размещение кнопок и анимации. Старт с Mobile first оправдан только в том случае, если бизнес ориентирован преимущественно на мобильный трафик, а доля десктопа будет составлять не более 10-15%.

5. Забота только о маленьких экранах

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

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

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

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

• тарифы по цене от 159 рублей в месяц (во всех есть SSL-сертификат), при оплате за год – доменное имя в подарок;

• 150 адаптивных шаблонов и 170 блоков, дизайн-блок;

• безлимитное количество страниц, независимо от типа проекта;

• большой SEO-инструментарий, необходимый для успешного продвижения в поисковых системах;

• готовую инфраструктуру для запуска как маленького корпоративного сайта, так и крупного интернет-магазина;

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

• создание сайта за 3 минуты с помощью нейросети.

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

В заключение

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

Реализацией адаптивной верстки должны заниматься профессиональные дизайнеры и фронтэнд-разработчики, которые внедрят необходимый набор версий с учетом типов устройств пользователей. Если времени нет – лучше использовать конструктор: шаблоны оптимизируются автоматически даже при внесении изменений. После завершения работы нужно провести проверку на Mobile-friendly, используя инструменты Яндекс, Google или сторонних сервисов.