У большого количества интернет-ресурсов нет адаптации под мобильные устройства, а зря. В марте 2022 года более 72% всего интернет-трафика — это смартфоны и планшеты. Если не заниматься мобильной оптимизацией, то ваш сайт будет терять посетителей, а компания – прибыль. Из-за неудобств в использовании неадаптированного сайта потенциальные клиенты могут сделать свой выбор в пользу конкурентов.
В статье подробно разбираем, что дает оптимизация сайта под мобильные устройства, и расскажем, какие существуют методы оптимизации под карманные девайсы.
Содержание
Зачем нужна мобильная версия сайта
Чек-лист: как проверить оптимизацию мобильной версии сайта
Методы мобильной адаптации сайта
Ошибки в мобильной адаптации: проверьте ваш сайт
Что такое адаптивный дизайн
Пользователи используют сайты не только на компьютерах, но и на мобильных устройствах. Разрешение экранов на персональных компьютерах отличается от того, которое используется на смартфонах и планшетах: изображение, которое хорошо выглядит на ПК, на телефоне кажется маленьким, а для чтения текста нужно увеличить размер шрифта самостоятельно. Такие особенности портят опыт взаимодействия пользователей с вашим брендом.
Для удобной работы с сайтом на мобильных устройствах необходима адаптивность сайта, которая позволяет корректно отображать страницы на любых устройствах.
Зачем нужна мобильная версия сайта
У поисковиков есть специальные системы оценивания мобильной оптимизации. Компании Google и Яндекс использует свои алгоритмы – «Mobile-friendly» и «Владивосток». Они анализируют адаптивность мобильной версии сайта и удобство использования.
- Если сайт не прошел проверку системами оценивания, поисковые системы будут хуже ранжировать страницы в выдаче. Как следствие, вы лишитесь значительной части трафика.
- Неудобная мобильная версия мешает посетителям пользоваться сайтом, в том числе покупать и оставлять заявки. Конверсия целевых действий будет падать, а пользователи – уходить в конкурентам с проработанными сайтами.
Чек-лист: как проверить оптимизацию мобильной версии сайта
Существуют специальные сервисы для проверки веб-страниц. У Яндекса такой функционал реализован в Яндекс.Вебмастере: зайдите в «Инструменты» → «Проверка мобильных страниц». В строку вставьте URL страницы и нажмите «Проверить».
Результат проверки адаптированной мобильной страницы
Результат проверки страницы с ошибками адаптации под мобильные устройства
У Google тоже есть свой сервис – Mobile-Friendly Test. Вставьте вашу ссылку в строку и нажмите «Проверить страницу»:
Результат проверки сервисом Mobile-Friendly Test оптимизированной мобильной страницы
Результат проверки страницы, адаптированной для мобильных устройств с ошибками
Чтобы увидеть, как выглядит ваш сайт на разных устройствах, не обязательно использовать телефон или планшет. Существуют специальные сервисы, которые показывают, как сайт подстраивается под экраны с разным разрешением. Например, воспользуйтесь ILoveAdaptive: вставьте ссылку на страницу в строку и нажмите Enter. Для полноценной работы сервиса необходимо установить расширение сайта для браузера.
Как сайт web-c.ru отображается на экранах разных устройств
Для того, чтобы не допускать ошибок адаптивности, рекомендуем воспользоваться чек-листом для проверки мобильных страниц сайта:
- Корректность отображения
Откройте страницу на телефоне и проверьте, все ли элементы отображаются так, как задумано? Страницы должны быть без горизонтальной прокрутки, изображения – нужного размера и в нужном месте, а шрифт – читабельный. - Скорость загрузки страниц
Скорость мобильного интернета часто ниже, чем у стационарных устройств с кабельным подключением. В то же время чуть меньше 50% пользователей уходят со страницы, если она загружается дольше 3 секунд. Поэтому протестируйте, сколько времени открывается ваш сайт на телефоне. Для этого воспользуйтесь специальными сервисами, например Be1.ru или Google PageSpeed Insights.
На скорость сайта влияет оптимизация кода страниц, вес контента и качество сервера, на котором размещается сайт. - Удобство навигации
Пользователям устройств с тач-скрином трудно взаимодействовать с мелкими элементами страниц. Проверьте, комфортно ли просматривать сайт с помощью телефона и пальца.
Навигация должна быть простой, лаконичной и логичной. В идеале у пользователя должна быть возможность добраться до любой страницы за 3-4 клика. - Заполнение форм и оформление заказа
Для мобильных устройств лучше уменьшить количество шагов при заполнении форм: большое количество полей при оформлении заказа могут отпугнуть посетителя. - Контакты на страницах
Контакты должны быть кликабельны, чтобы пользователь легко мог связаться с вами: набрать номер или перейти в мессенджер. -
Тяжелый мультимедийный контент
Для мобильных сайтов скорость загрузки контента критична, а тяжёлые картинки и видео увеличивают время, которое пользователю придется ждать, чтобы посмотреть страницу.
-
Если ваш сайт не адаптирован к мобильным устройствам, или вы хотите проверить оптимизацию мобильной версии, напишите нам.
Методы мобильной адаптации сайта
1. Верстка адаптивного сайта
Адаптивная верстка — это создание страниц, при котором они автоматически настраиваются под размеры и разрешения экранов устройств, а их дизайн изменяется в зависимости от действий пользователя.
Основная задача адаптивной верстки — сделать так, чтобы ваш сайт всегда был удобным и обеспечивал конверсию на любых устройствах.
Особенности метода:
✅ Быстрая реализация на этапе разработки.
✅ Быстрая реализация на этапе разработки.
✅ Сайт доступен с любого устройства по одному адресу.
✅ Все вносимые изменения отображаются в любой версии.
✅ Вы защищены от ошибочного дублирования контента.
❌ Код, который не используется в мобильной версии и задействуется для ПК, будет фоном подгружаться и влиять на время загрузки страниц.
❌ Один и тот же контент не всегда возможно удачно перенести на мобильные устройства.
2. Вторая версия сайта для мобильный устройств на поддомене
Отдельная мобильная версия — более затратное, но гибкое решение. Ее можно изменять, не затрагивая ПК-версию сайта.
Особенности метода:
✅ Мобильную версию сайта на поддомене можно максимально облегчить, убрав код основного сайта, что ускорит загрузку на смартфонах и планшетах.
✅ Настройка интерфейса и функционала происходит прицельно под мобильные устройства.
✅ У пользователя остается возможность перейти на основной сайт в любой момент.
❌ Необходимо создавать и настраивать поддомен.
❌ Под мобильную версию сайта на поддомене нужно писать отдельный шаблон, что увеличит затраты на разработку.
❌ Вы столкнетесь со сложностями поисковой оптимизации, так как придется вести работу с двумя сайтами.
Ошибки в мобильной адаптации: проверьте ваш сайт
1. Нечитабельный шрифт
Большая часть информации на сайте подается с помощью текста. По этой причине очень важно уделять ему внимание. Рассмотрим основные ошибки:
- Нестандартные, необычные шрифты могут не отображаться или криво загружаться на устройстве пользователя. Лучше использовать стандартные и распространенные шрифты, например, Arial.
- Слишком мелкий шрифт. Применяйте стандартный размер текста не меньше 14 px: маленькие буквы сложно читать.
- Отсутствие отступов. Блоки текста воспринимаются лучше, чем одна сплошная «простыня».
- Не используйте много разных шрифтов на странице. Это сбивает концентрацию при чтении и увеличивает время загрузки страницы.
- Не стоит использовать в тексте большое количество разных цветов, поскольку это мешает сосредоточиться на восприятии информации.
2. Корректность отображения элементов
- Для пользователей важно, чтобы на вашем сайте все элементы отображались корректно в экране мобильного устройства.
- Горизонтальная прокрутка. Распространенная ошибка чаще всего возникает из-за того, что компонент не влезает в размер экрана. Чтобы этого избежать, необходимо настроить корректную оптимизацию элемента под все разрешения.
- Неправильный размер изображений. Картинка шире экрана и выходит за рамки устройства. В таком случае нужно сделать подстройку изображений под разрешение экрана.
- Размеры и расположение кнопок. Проблема кнопок разных размеров и их расположения довольно часто встречается на различных сайтах. Пользователь пытается нажать на нее, но не попадает, так как она слишком маленькая. Либо же наоборот, кнопка большая и закрывает необходимый контент. Сделайте кнопки удобного размера и разместите их в местах, где они не будут мешать чтению или выбору товара.
3. Формы заказов
Сложные и большие формы на мобильных устройствах — это плохо. Пользователи ленивы и не захотят заполнять большое количество полей. Стоит сделать их максимально простыми, но емкими по наполнению. Такие формы привлекают клиентов.
4. Контакты на страницах
Важным пунктом является кликабельность контактов. Пользователь хочет позвонить для уточнения информации, но ему необходимо делать лишние действия в виде копирования номера. Сделайте элементы активными, чтобы клиент мог легко совершить звонок или написать в мессенджер.
5. Неоптимизированный мультимедийный контент
Картинки и видео, которые весят много, увеличивают время загрузки страницы. Поэтому стоит оптимизировать мультимедийный контент, либо частично от него отказаться.
6. Низкая скорость загрузки страницы
Для смартфонов и планшетов высокая скорость загрузки страницы — это один из основных показателей. Качественная версия сайта мобильного сайта загружается за 3 секунды.
Для проверки оптимизации мобильной версии сайта воспользуйтесь сервисом Google PageSpeed Insights. После анализа вы получите результат в баллах в соответствии со стандартами Google. А в подробном отчете будет информация о том, какие моменты стоит улучшить на вашем сайте.
Вывод
Адаптивный под мобильные устройства сайт – это то, что сегодня должно быть у любой компании. В кармане каждого вашего клиента лежит гаджет, через который вы можете поддерживать связь. И качество этой связи зависит не в последнюю очередь оптимизации сайта.
Сохраните чек-лист проверки оптимизации и проверяйте сайт после каждого существенного изменения. И не забудьте подписаться на нашу рассылку, чтобы не пропустить новые статьи. А в Телеграме публикуем последние новости из мира digital и мнения экспертов.
