Адаптация сайта для мобильных устройств позволяет охватить больше аудитории и увеличить доход от продаж товаров или услуг, поскольку в России мобильный трафик с 2016 по 2021 год вырос на 545%. В статье расскажем, как адаптировать сайт под мобильные устройства, поделимся онлайн-сервисами и плагинами.
Пользователи просматривают полноформатные страницы не только на экранах персональных компьютеров, но и на смартфонах и планшетах. Разрешение на десктопе не соответствует формату, к которому привыкли на телефоне: изображение кажется мелким и для прочтения приходится увеличивать текст вручную. Все это создает неудобство для потенциального покупателя.
Чтобы сайт было комфортно просматривать со смартфона, нужна адаптивность – функция интернет-страницы для корректного отображения на различных устройствах.
Адаптация сайта для мобильных устройств отвечает за решение следующих проблем: длинная полоса прокрутки, неудобство ссылок, неправильное расположение отдельных элементов, слишком мелкий шрифт. Адаптивность – это способ сохранить лояльность клиентов и привлечь новую аудиторию. Она облегчает использование сайта.
В Яндексе и Google адаптивность – один из факторов, влияющих на позицию сайта в поисковике. Системы оценивают, насколько быстро пользователь закрывает страницу. Если это происходит сразу после ее открытия, это значит, что человека не устроил формат отображения. Такие сайты теряют свои позиции в топе.
Конверсия в интернет-маркетинге – это соотношение числа пользователей страницы, выполнивших действия, к общему числу посетителей. Адаптивность страницы для мобильных устройств напрямую влияет на конверсию, потому что многие клиенты совершают операции через смартфоны. Удобное расположение кнопок, правильный размер шрифта и аккуратный дизайн увеличивают активность пользователя.
Для продвижения продукта предприниматели часто используют рекламу на других сайтах. Но иногда при переходе с одного сайта на другой возникает проблема несоответствия форматов. В итоге пользователь закрывает страницу: рекламная кампания не приносит новых клиентов. Адаптивность под различные устройства позволит не упускать потенциальных покупателей.
Не терять заявки пользователей в нерабочее время поможет виджет обратный звонок Calltouch. Он свяжет вас с клиентом, когда начнется рабочий день. Адаптируйте форму колбэка под ваш сайт: загрузите логотип, подложку или поменяйте фон. Добавьте текст для увеличения конверсии. Распределяйте поступающие звонки по отделам, филиалам или городам. Виджет бесплатный: вы оплачиваете только минуты разговоров. Всем новым клиентам – 50 минут в подарок.
Преимущества адаптации:
Недостатки:
Как настроить рекламу в Яндекс.Музыке
Рекомендуем несколько принципов:
Программисты используют разные варианты адаптации сайта: указывают специальный метатег, обновляют стиль, сокращают контент, создают новую страницу с отдельным кодом и другим адресом.
Этот метод простой и быстрый. HTML-код остается одинаковым для полноформатной и для мобильной версий. При адаптации меняют дизайн страницы: увеличивают размер текста, горизонтальные блоки сдвигают по вертикали, мелкие боковые части убирают или скрывают. Для этого необходимо открыть доступ к ресурсам страницы, включая параметры CSS, JavaScript, изображения.
В настройке используют метатег 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 есть более пятисот дизайнерских шаблонов, оптимизированных для смартфонов. Все они сгруппированы по категориям, например, бизнес, электронная коммерция, креативные сайты. Добавьте панель быстрых действий на мобильную версию сайта: так пользователи смогут мгновенно связаться с вами со смартфонов. Вы можете разместить на панели телефон, Facebook* (продукт компании Meta, которая признана экстремистской организацией) и электронную почту. Выберите, какие действия вы хотите отображать в панели быстрых действий, настройте дизайн под стиль вашего сайта.
Существуют онлайн-сервисы, которые помогут в адаптации сайта для мобильных устройств:
На WordPress есть несколько плагинов, которые позволят без дополнительных настроек установить мобильную версию для сайта:
Что такое 4P в маркетинге и как эта концепция способствует улучшению продаж
Проверьте мобильную версию на адаптивность, чтобы исключить ошибки в настройках. Для этого подойдет сервис Google Mobile Friendly. Еще один способ: нажмите клавишу F12, выберите «Дополнительные инструменты», «Инструменты разработчика».
Если вы используете браузер Mozilla Firefox, то проверить сайт на адаптивность можно так: нажмите клавишу F12, выберите «Меню», «Разработка», «Адаптивный дизайн».
Серверы покажут, как пользователи видят сайт со смартфона.
Адаптация сайта под мобильные устройства помогает формировать лояльность текущих клиентов и привлекать новых. Если пользователю удобно просматривать сайт с телефона: не приходится долго листать или всматриваться в текст, скорее всего, он отправит заявку. С правильно оптимизированным профилем сайта проще попасть в топ поисковых систем, получить новую аудиторию и увеличить продажи.
Хочу получать интересные новости блога
8 августа 2022
7 августа 2022
6 августа 2022
9 августа 2022
10 августа 2022
11 августа 2022
Нажимая на кнопку, вы даете согласие на обработку своих персональных данных
