Более 67% россиян, совершающих онлайн-покупки, делают это с помощью смартфонов. Это стабильная тенденция, и доля рынка через мобильные телефоны постоянно растет. Поэтому владельцам бизнеса необходимо в первую очередь развивать каналы продаж, адаптированные под мобильные устройства. Одним из таких каналов является сайт компании. Сергей Секенов, руководитель группы поддержки Rokee, подготовил материал об особенностях оптимизации сайтов для мобильных телефонов. Эта информация будет полезна бизнесменам и коммерсантам, которые хотят продвигать свои сайты и использовать их в качестве канала продаж.
Зачем оптимизировать сайт под мобильные устройства?
В мае этого года Google завершил переход на первую мобильную индексацию. Это означает, что при поиске по мобильным сайтам сектор веб-сайтов будет классифицироваться в первую очередь. Аналогичный алгоритм работает и в Яндексе. В результате, если мобильная версия является вредоносной или содержит нерелевантные данные, местоположение сайта в ней будет занижено.
Сервис Яндекса WordStat позволяет увидеть количество пользователей, которые ввели запрос с помощью смартфона, и количество пользователей, которые ввели его с персонального компьютера через веб-версию поисковой системы. Сравнив данные по одному и тому же вопросу о тематике вашего бизнеса, вы сможете понять, насколько популярны электронные покупки с мобильных устройств на определенных позициях.
Такие сервисы, как Ahrefs и Semrush, помогут вам понять, какая доля трафика на ваш сайт поступает с мобильных устройств. Стоит отметить, что чем лучше сайт оптимизирован под смартфоны, тем чаще пользователи заходят на мобильную версию.
Оптимизация сайта для смартфонов гораздо быстрее и дешевле, чем, например, создание и публикация собственного фирменного мобильного приложения.
Убедитесь, что вы дружелюбны к мобильным устройствам
Для начала необходимо проанализировать текущую ситуацию. Насколько ваш сайт дружелюбен к мобильным устройствам, то есть насколько он адаптирован для просмотра со смартфонов? Это можно сделать двумя способами: либо использовать сайт, дружественный к мобильным устройствам, либо использовать сайт, адаптированный для просмотра со смартфонов. Мы рекомендуем использовать оба варианта.
Расширения Яндекс.Вебмастер, Google Search Console и Page Speed Insight помогут вам провести тестирование мобильной дружелюбности. Достаточно ввести URL-адрес сайта, и сервис автоматически «просмотрит» его мобильную версию с разных устройств, оценит адаптивность, выделит недостатки и предложит, что нужно исправить.
Посмотреть, как выглядит мобильная версия сайта с компьютера, можно в браузере Google Chrome, нажав клавишу F12 и вызвав «Панель разработки». В левом нижнем углу появится раздел «Аналог», а в центре вверху — возможность выбрать устройство.
Ручная аутентификация помогает убедиться, что вы находитесь на месте пользователя, который хочет совершить покупку. Лучше всего пройтись по типичному сценарию использования сайта, от главной страницы до покупки. Спросите: все ли было удобно, видел ли пользователь все необходимые текстовые описания, был ли сайт удобным и интуитивно понятным в использовании? Если вы не уверены, проведите опрос мобильных пользователей на своем сайте, чтобы выяснить, насколько комфортным был опыт и есть ли возможности для улучшения.
Варианты адаптации сайта для мобильных телефонов
В настоящее время у владельцев сайтов есть несколько вариантов мобильной оптимизации. Какой вариант вы выберете, зависит от содержания вашего сайта и имеющегося бюджета.
Адаптивный макет
Отзывчивая верстка позволяет адаптировать страницы сайта из десктопной версии для различных мобильных устройств в зависимости от разрешения и ориентации экрана. Для смартфонов элементы сайта должны быть «перемещены» по вертикали, некоторые из них должны быть уменьшены для мобильного использования, а некоторые должны быть удалены совсем. Для создания отзывчивых макетов можно использовать CSS-фреймворки (bootstrap, responsive grid system) или CSS3 media queries.
Плюсы: отзывчивые макеты не требуют обновления информации. Изменения, внесенные в десктопную версию сайта, загружаются автоматически.
Минусы: такое решение может быть дорогостоящим, так как дизайн необходимо индивидуально адаптировать под каждое устройство, например, смартфоны и планшеты с разным разрешением для iOS и Android.
Для какого типа сайта или бизнеса он подходит: отзывчивый макет лучше всего подходит для сайтов с простой, лаконичной структурой, таких как одностраничный кредит, интернет-магазин с небольшим ассортиментом, сайт для мероприятий с каталогом услуг или сайт-визитка.
Альтернативные шаблоны в рамках основного домена
Такая оптимизация гарантирует, что мобильная версия сайта будет доступна по тому же адресу, что и десктопная. Метод предполагает создание скриптов, которые распознают тип устройства при доступе к сайту и выводят подходящий для него шаблон. В принципе, этот стандарт означает, что дизайн десктопной версии значительно упрощается.
Этот метод особенно подходит для сайтов WordPress, так как в интернете уже есть готовые плагины для мобильных приложений, такие как WordPress Mobile Pack и WP Mobile Detector.
Преимущества этого метода: это, пожалуй, самый быстрый способ адаптации сайта под мобильные устройства.
Минусы: сегодня на рынке представлено огромное количество смартфонов, и все время выходят новые. В таких случаях скрипты могут некорректно определять нестандартные модели устройств и отображать полную версию сайта. Также, если вас интересует эстетика и дизайн, шаблон может выглядеть как очень упрощенная версия без декоративных элементов.
ДЛЯ КАКИХ САЙТОВ ИЛИ БИЗНЕСОВ ОН ПОДХОДИТ: Этот шаблон подходит для сайтов с большим количеством текстового контента, таких как блоги, форумы и информационные сайты. Возможные вариации настройки сайта интернет-магазина с помощью этого шаблона.
Мобильная версия сайта на поддомене.
В этом случае создается отдельная мобильная версия, которая, по сути, является отдельным сайтом. Когда пользователь нажимает на ссылку с мобильного устройства, он автоматически перенаправляется на мобильную версию. Важно убедиться, что эта версия создана в поддомене, а не в подпапке. Это большая ошибка, но все еще распространенная.
Преимущества такого подхода: он изучен с точки зрения пользовательского опыта и показателей скорости загрузки, а дизайн может быть детально адаптирован под мобильное устройство.
Минусы: это очень кропотливый выбор, когда дело доходит до реализации. Необходимо создавать поддомены, настраивать их и писать скрипты. После создания мобильной версии работа не заканчивается. Помимо настольной версии, данные в мобильной версии необходимо каждый раз обновлять. Тем не менее, если речь идет о достаточно крупных сайтах со сложной структурой, мобильная версия на поддомене часто является единственным решением.
Для какого типа сайта или бизнеса она подходит: крупные интернет-магазины, социальные сети.
Ваш сайт не оптимизирован для мобильных устройств. Группа инструментов для веб-мастеров Google.
Несколько пользователей AB Inspiration Template Builder уже обратились в техническую поддержку и спросили, что делать в этом случае.
Решение есть, но сначала позвольте мне объяснить.
Как вы знаете, AB-Inspiration 5.0 Standard не имеет отдельной мобильной версии и предназначен для стационарных компьютеров, ноутбуков и планшетов. И это объясняется разными причинами.
1. Одной из целей создания Стандарта было предоставить всем пользователям возможность проявлять креативность и творить, не нарушая при этом оригинальный код внешнего вида. Это подчеркивается только постоянными размерами границ блога и внутренних элементов стандарта.
2. Чтобы все было аккуратно и ровно, в шаблоне снова можно использовать фиксированные размеры полей для подвеса, размеры изображений и видео, ширину боковых колонок и виджетов. Все это позволяет создать блог. аккуратно и профессионально без единого кода.
3. по статистике только 1-5 % пользователей читают блоги на мобильных устройствах. Имеются в виду смартфоны. И это в основном новостные и подобные блоги. На планшетах, как правило, сайты отлично смотрятся и без мобильной версии. И по всем оценкам, это число вряд ли увеличится в ближайшие год-два. Напротив, экраны смартфонов дают пользователям преимущество.
Поэтому лично я не придаю особого значения тому, есть ли у сайта мобильная версия или нет. Для меня это имеет большее значение как пользователь и как выгода.
Например, я часто нажимаю на кнопку «Проблема», потому что мобильная версия обычно не работает. Типичный пример — сайт airasia. com, где я часто покупаю билеты. В мобильной версии не все поля отображаются в поле поиска билетов. Поэтому я перехожу на полную версию сайта.
Тем не менее. Если подавляющее большинство читателей блога пользуются мобильными устройствами, то определенно стоит обзавестись мобильной версией блога.
Как выходят из этой ситуации пользователи обычных блогов, не предназначенных для мобильных устройств?
Как сделать так, чтобы Google был доволен?
Мы рекомендуем использовать Wptouch Add. Создайте мобильную версию вашего блога. На планшетах, ноутбуках и компьютерах блог будет выглядеть нормально. Этого достаточно, чтобы Google распознал блог с пометкой «mobile friendly».
1. скачайте плагин на свой компьютер — https://wordpress. org/plugins/wptouch/ 2. перейдите в раздел «Плагины» — Добавить новый 3. скачайте и активируйте файл плагина WPTouch.
Плагин не требует специальной настройки. Все настройки можно оставить по умолчанию.
Однако если вы используете плагин Front Page или создаете статичную домашнюю страницу, вам потребуется изменить некоторые настройки плагина WPtouch.
1. После активации плагина в меню в админке появится новый раздел WPtouch. Перейдите в этот раздел. 2. перейдите к подразделу «Быстрые настройки». 3. опуститесь ниже и перейдите к блоку «Главная». 4. установите флажок «Пользовательский». 5. В поле ниже введите ссылку, по которой будет вестись ваш блог. Статья.
Здесь вы можете проверить, принимает ли Google версию для мобильных телефонов.
1. перейдите по следующей ссылке: http://www. google. com/webmasters/tools/mobile-friends/ 2. введите адрес вашего блога в поле и нажмите кнопку «Анализировать». Если все в порядке, Google отобразит следующую запись
PS Мы с командой сейчас работаем над новым многоязычным шаблоном для DIY и профессиональных блогов на WordPress — конструктором AB-Inference. В этом шаблоне учтены все аспекты, которые не удалось реализовать в шаблоне AB-Inference, включая мобильную версию. Интернет стремительно меняется, и мы готовы предоставить вам новые инструменты для ведения бизнеса в сети в соответствии с новыми тенденциями.
Ваш сайт не оптимизирован для мобильных устройств