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

Адаптация сайта для мобильных устройств позволяет охватить больше аудитории и увеличить доход от продаж товаров или услуг, поскольку в России мобильный трафик с 2016 по 2021 год вырос на 545%. В статье расскажем, как адаптировать сайт под мобильные устройства, поделимся онлайн-сервисами и плагинами.

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

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

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

Для чего нужна адаптация

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

Поисковые системы и ранжирование

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

Влияние на конверсию

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

Рекламные кампании

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

Не терять заявки пользователей в нерабочее время поможет виджет обратный звонок Calltouch. Он свяжет вас с клиентом, когда начнется рабочий день. Адаптируйте форму колбэка под ваш сайт: загрузите логотип, подложку или поменяйте фон. Добавьте текст для увеличения конверсии. Распределяйте поступающие звонки по отделам, филиалам или городам. Виджет бесплатный: вы оплачиваете только минуты разговоров. Всем новым клиентам – 50 минут в подарок.

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

Преимущества адаптации:

• повышение конверсии;
• подъем страницы в топе запросов в поисковых системах;
• сохранение репутации сайта как не устаревшего;
• привлечение новых клиентов за счет рекламы и распространения в соцсетях.

Недостатки:

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

Маркетинг

Читайте также:

Деловая колбаса, морковка, крутое яйцо. Как мы продаем маркетинговые IT-продукты с помощью контента

Деловая колбаса, морковка, крутое яйцо. Как мы продаем маркетинговые IT-продукты с помощью контента

Принципы адаптации

Рекомендуем несколько принципов:

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

Методы

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

Адаптивный дизайн

Этот метод простой и быстрый. HTML-код остается одинаковым для полноформатной и для мобильной версий. При адаптации меняют дизайн страницы: увеличивают размер текста, горизонтальные блоки сдвигают по вертикали, мелкие боковые части убирают или скрывают. Для этого необходимо открыть доступ к ресурсам страницы, включая параметры CSS, JavaScript, изображения.

Указывать тег Viewport

В настройке используют метатег Viewport, который вписывают в код страницы. Он отвечает за настройку ширины экрана для разных устройств, не используя переадресацию. Метатег: <meta name=»viewport» content=»width=device-width, initial-scale=1.0”>. После его внедрения нужно вписать в код свойства и инструкции CSS, настроить CSS-фреймворк, создать разметку.

Обновить стили

Если у вас сайт с простой структурой, например, визитка, одностраничник, интернет-магазин с маленьким ассортиментом, лендинг с услугами, можно использовать CSS3 Media Queries. В таблице стилей выделите разрешения через медиа-запрос и задайте оптимальные размеры элементов. Например: @media screen and йте(max-width: 1280px) { div.contentblock {width: 1200px;} }, @media screen and (max-width: 992px) { div. contentblock {width: 970px;} }.

Доработать шапку, меню и стили

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

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

Убрать рекламу и всплывающие окна

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

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

Сократить количество контента

Уберите с сайта те элементы, которые вы полностью скрываете от пользователя. Это увеличит скорость загрузки страницы. Если какой-то контент не очень важен, скройте его под кнопку «Узнать подробнее». Это поможет не загружать информацией пользователя, который бегло просматривает сайт. 

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

Мобильная версия 

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

Проблема заключается в том, что поисковики могут идентифицировать оба сайта как дубликат. В итоге: не выводить один из них в топ, записав в спам. Чтобы этого не случилось, нужно применить в коде для изначальной версии тег Link rel=»alternate» и указать ссылку на мобильный вариант. Пример: <link rel=»alternate» media=»only screen and (max-width: 640px)»href=»http://m.site.com»>.

Кроме версии для смартфона, можно создать мобильное приложение. Это подойдет для интернет-магазинов с большим количеством товаров и упростит обработку заказов. Еще удобнее работу с заявками клиентов делают виджеты Calltouch. Например, вы можете настроить разные виджеты для одной кнопки: обратный звонок, ссылки на чаты в мессенджерах, переход в Facebook* (продукт компании Meta, которая признана экстремистской организацией) или VK. Также с инструментом Calltouch легко настроить умную заявку. 

Динамическая демонстрация

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

Как сделать адаптацию сайта самому

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

Тильда

Тильда автоматически адаптирует сайт для просмотра на планшетах, смартфонах, ноутбуках и ПК. Элементы страницы автоматически подстраиваются под любое разрешение экрана: меняется кегль шрифта и структура подачи. В адаптивной версии сохраняется один url, что выгодно для оптимизации. Другие плюсы работы с Тильдой: понятный для обычных пользователей интерфейс, быстрая работа, большая картотека шаблонов и разнообразие шрифтов. Есть возможность адаптировать дизайн вручную.

Wix

В Wix есть более пятисот дизайнерских шаблонов, оптимизированных для смартфонов. Все они сгруппированы по категориям, например, бизнес, электронная коммерция, креативные сайты. Добавьте панель быстрых действий на мобильную версию сайта: так пользователи смогут мгновенно связаться с вами со смартфонов. Вы можете разместить на панели телефон, Facebook* (продукт компании Meta, которая признана экстремистской организацией) и электронную почту. Выберите, какие действия вы хотите отображать в панели быстрых действий, настройте дизайн под стиль вашего сайта.

Онлайн-сервисы для создания сайта для мобильных устройств

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

• WoCode. Позволяет создать простую мобильную версию на основе платного и бесплатного тарифов. 
• Webflow. Подойдет для адаптации интернет-магазинов.
• Mozello. Позволит перевести сайт на любой язык.
• Weebly. Подходит для адаптации онлайн-магазинов.
• Uizard. Использует нейросети для создания шаблонов под сайт.
• Weblium. Подсказывает удачное размещение блоков, подходящие палитры, автоматически подбирает нужные цвета.
• Squarespace. Подойдет для адаптации небольших сайтов.
• Simplesite. Поддерживает редактирование страниц с мобильного телефона без установки специальных приложений.
• Ukit. Анализирует интерфейс и предлагает способы ее улучшения и адаптации.

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

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

• WPtouch Pro. Недорогое решение, которое включает картотеку адаптивных дизайнов сайта для мобильных версий.
• DudaMobile. Есть бесплатная версия для базовых настроек мобильной версии, при оплате полной стоимости можно получить ряд дополнительных.
• WP Mobileedition. Плагин работает автоматически: определяет удобную версию для устройств.

Маркетинг

Читайте также:

Таргетированная реклама: что это такое, как ее настроить и оценить эффективность

Таргетированная реклама: что это такое, как ее настроить и оценить эффективность

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

Проверьте мобильную версию на адаптивность, чтобы исключить ошибки в настройках. Для этого подойдет сервис Google Mobile Friendly. Еще один способ: нажмите клавишу F12, выберите «Дополнительные инструменты», «Инструменты разработчика». 

Если вы используете браузер Mozilla Firefox, то проверить сайт на адаптивность можно так: нажмите клавишу F12, выберите «Меню», «Разработка», «Адаптивный дизайн».

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

Заключение

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