Зачем нужна мобильная версия сайта?

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

Содержание:

1. Что такое мобильная версия сайта
2. Польза мобильной версии
3. Мобильная версия сайта: преимущества и недостатки
4. Другие способы оптимизации сайта под мобильные устройства
   • Адаптированный сайт
   • Мобильное приложение
   • Яндекс.Турбо и Google Amp
   • Социальные сети
5. Как сделать мобильную версию удобной
6. Ошибки мобильной версии сайта

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

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

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

Такой сайт имеет отдельную ссылку. Обычно она такая же, как у основного сайта, только имеет букву «m» или слово «mobile» в адресе.

Польза мобильной версии

Поисковики ориентируются на комфорт пользователя. Они направлены на облегчение их жизни.

Google и Яндекс имеют алгоритмы ведущие оценку мобильных версий сайта. К тому же поисковики не показывают не оптимизированные под мобильные устройства версии, если запрос был сделан со смартфона.

В 2018 году Google принял правило Mobile-first index, которое действует при ранжировании. Оно подразумевает оценивание сайта по критерию «mobile-friendly». Ранжирование основной версии теперь зависит от мобильной. Если площадка не адаптирована под смартфоны и планшеты, то теперь ее сложно будет найти даже с ПК.

Согласно статистическим данным, полученным We Are Social и Hootsuite (отчет Digital 2020), в 2020 году 53% запросов в поисковиках люди делали с мобильных устройств (на 8,6% больше, чем в 2019 году), причем 92% всех пользователей имели возможность выходить в интернет через смартфон. Пандемия в 2020 году поспособствовала увеличению популярности мобильных устройств в России. Если до карантинных ограничений через интернет делали покупки 24% пользователей, то после их количество возросло до 39% (по данным PricewaterhouseCoopers).

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

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

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

Что дает наличие мобильной версии:

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

Для того чтобы узнать с каких устройств посетители заходит на сайт можно воспользоваться Яндекс.Метрикой или Google Analytics. В первой системе необходимо перейти: Отчеты 🡪 Технологии 🡪 Устройства. Во второй: Отчет Аналитика 🡪 Мобильные устройства 🡪 Отчет. Там можно посмотреть какая доля трафика совершается с мобильного устройства.

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

Мобильная версия сайта: преимущества и недостатки

Из достоинств мобильной версии можно выделить:

1. Быстрая загрузка страницы.
2. Отображается только важная информация – это хорошо тем, что пользователь не отвлекается на раздражители в виде большого количества кнопок, окон и т.д. Обычно люди заходят в интернет с мобильного устройства «на бегу», у них и так достаточно отвлекающих факторов вокруг в виде машин, людей, животных и т.д. Таким образом пользователю будет легче найти необходимое и вероятность того, что он задержится на сайте и дойдет до «цели», которую вы наметили при разработке, намного выше.
3. Есть возможность переключится на основную версию – для многих пользователей это важно, так как в полной версии могут присутствовать элементы, которые вырезаны из мобильной. Пользователь любит, когда его не ограничивают с выбором.

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

Этот способ чаще всего используют компании с большим бюджетом, так как процедура создания версии для смартфонов и планшетов не дешевое удовольствие. Это касается создания сайта с нуля, когда нужно сделать и основную версию и мобильную.

Существуют более бюджетные способы оптимизации сайта под мобильные. Рассмотрим из преимущества и недостатки ниже.

Другие способы оптимизации сайта под мобильные устройства

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

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

Преимущества адаптивного дизайна:

1. Легче вносить изменения на сайт, например если нужно поменять цены, это делается единоразово. В случае же мобильной версии нужно делать на обоих вариантах сайта отдельно.
2. Так как сайт имеет один адрес его показатели, и, соответственно, позиции при ранжировании улучшаются.
3. Адаптивная версия отображает тот же контент, что и основная.
4. Меньшая стоимость разработки, так как не нужно тратиться еще на мобильную версию сайта.
5. Есть возможность внедрения адаптированного дизайна в уже функционирующий сайт.

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

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

Если рассматривать адаптивную версию с точки зрения администрирования сайта, то она будет удобнее только в случае внесения одинаковой информации на весь сайт. Но если необходимо изменить только мобильную версию, это будет достаточно хлопотно.

Мобильное приложение

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

Преимущества мобильных приложений:

• Компания становится ближе к пользователям, так как телефон всегда под рукой. А приложение делает покупку намного проще.
• Увеличение числа повторных покупок и улучшение взаимодействия. Напомнить о том, что человек не довел покупку до конца через приложение намного легче, чем через сайт.
• Возможность использовать Push-уведомления.
• Доступ к камере, благодаря чему можно упростить поиск с помощью QR-кодов.
• Возможность узнать локацию пользователя. Это может быть полезно владельцу компании для сбора данных для последующего анализа. Кроме того, можно помогать пользователю находить ближайшее к нему точку обслуживания. Например, Starbucks предлагает клиентам заказать кофе заранее в ближайших к нему кафе.
• Использование системного компонента WebView, с помощью которого пользователя переадресовывает с сайта на приложение и обратно. Это удобно, когда человек ищет в интернете товар, кликает на интернет-магазин, приложение которого уже установлено на телефоне. Обычно в софте уже сохранены данные о карте и покупку там совершать намного легче. Кроме того, с помощью этой опции владелец бизнеса не отпускает клиента дольше в поиск.

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

Яндекс.Турбо и Google Amp

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

Страницы в социальных сетях

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

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

Для этого можно использовать такие способы:

• Разработка сайта – при этом вы сможете создавать сайт с индивидуальным дизайном и любыми функциями. Но этот путь дорогостоящий, так как требует привлечения опытных разработчиков.
• Конструкторы сайтов – эти сайты созданы для непрофессионалов, которые хотят своими силами обеспечить ресурс мобильной версией. Разобраться в них не сложно. К тому же они экономны. Но сайт получается типичным, в него сложно возможности добавить индивидуализированные элементы. Самые популярные конструкторы: Tilda, Jimbo, Wix, Site123 и т.д.

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

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

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

Предлагаем основные рекомендации как улучшить мобильную версию сайта:

1. Читабельный текст. Лучше использовать шрифт с размером не менее 12 пт без засечек. Не стоит забывать о контрасте с фоном.
2. Необходимо дать возможность пользователю увеличить контент.
3. Стоит позаботиться о том, чтоб текст располагался на расстоянии от краев экрана.
4. С телефона не всегда удобно заполнять поля данных. Поэтому стоит позаботиться о том, чтоб убрать лишние строки.
5. Для каждой формы должен быть подобран оптимальный вид клавиатуры. Для ввода номера телефона стоит автоматически показать цифры и символы, а для текста – буквы.
6. На экране бывает сложно попасть пальцем на нужную кнопку. Поэтому стоит сделать их как можно крупнее, чтоб пользователь не испытывал неудобств при нажатии.
7. Необходимо позаботиться о том, чтоб контакты, указанные на сайте, были кликабельными.

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

Ошибки мобильной версии сайта

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

Контент, который не воспроизводится на сайте тоже является частой ошибкой при разработке мобильной версии сайта. Для увеличения скорости загрузки и корректного отображения всех элементов необходимо отказаться от устаревших технологий (например Flash-элементов).

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

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