Сегодня пост про очень важное тестирование, которые многие руководители упускают из виду, когда принимают готовый сайт от подрядчиков. Речь идет о том, как открывается ваш сайт на мобильных.
Вы скажете, на дворе 20-й год, это известно даже ребенку. Но если бы вы знали, как много бизнесменов даже не задают себе вопрос, как это сделать правильно!
Что они делают в реальности. Все просто. Открывают свой сайт в своем мобильнике. Вот именно в своем директорском с диагональю 8-10 “. И все работает. И они принимают работу у подрядчиков. А потом возникает масса сложностей и сливается рекламный бюджет.
Мне бывает трудно убедить такого человека провести тестирование. Но многие получают сильное впечатление, когда соглашаются и наблюдают искаженные каталоги и отсутствующие меню.
Поэтому запишите алгоритм действий, который поможет вам правильно отследить вашу мобильную версию.
1. Проверяем, как видит страницу Google здесь
https://search.google.com/test/mobile-friendly
2. Проверяем, как видит страницу Яндекс здесь
https://webmaster.yandex.ru/site/tools/mobile-friendly/
(Требуется регистрация)
3. Используем специальные сервисы, чтобы просмотреть страницы сайта визуально при разной ширине экрана.
http://www.responsivepx.com/
Передвигая ползунок, меняйте ширину экрана. Обязательно проверьте, как выглядит сайт при проблемной ширине для следующих устройств:
Настольный компьютер
1600x992px
Ноутбук
1280x802px
Планшет
768x1024px
Мобильное устройство
320x480px
Как вариант, можно проверить сайт в браузере Хром, открыв его в настольном компьютере или ноутбуке. Для этого выделите любую часть текста или картинку на странице и нажмите на экран правой кнопкой мыши. Выберите самый нижний пункт “Просмотреть код”. Экран разделится на 2 части. В левой будет размещен ваш сайт, а над ним вы увидите черный треугольник с возможностью выбора устройства просмотра. Нажмите на треугольник и выберите пункт Responsive. Отобразится текущая ширина и высота экрана, имитирующая просмотр сайта. Передвигая правую границу сайта вправо и влево, вы можете наблюдать, как будет выглядеть страница при каждой ширине.
4. Обязательно проверьте разные страницы сайта. Особенное внимание обратите на страницы с широкими картинками, видео, красивыми слайдерами, а также если у вас интернет-магазин, страницу товара и страницу раздела каталога, просмотр корзины, а также другие важные страницы, которые будет просматривать практически каждый ваш покупатель.
5. Проверяйте и тестируйте в дальнейшем все страницы, на которых по данным аналитики большое число посетителей будет покидать ваш сайт.
Это позволит вам быть уверенными в том, что сайт выглядит корректно.
Ниже описаны некоторые наиболее распространенные ошибки, которые допускают веб-мастера при создании мобильных сайтов.
– Блокировка JavaScript, CSS и графических файлов
Если в файле robots.txt закрыт доступ к к JavaScript, CSS и графическим файлам на сайте, то Google не удастся правильно проанализировать и проиндексировать контент. Это может ухудшить позиции вашего сайта в Поиске.
– Невоспроизводимый контент
Некоторые типы видео и контента не поддерживаются на мобильных устройствах. Это, например, контент с ограничивающей лицензией или видео, требующие Flash либо других проигрывателей, которые не поддерживаются на мобильных устройствах. Невоспроизводимый контент на страницах сайта может сильно разочаровать посетителя.
– Неправильные переадресации
Если у вас есть отдельные мобильные версии страниц, рекомендуем настроить для каждой из них переадресацию на соответствующую версию для компьютеров. Перенаправление на другие страницы, например на главную, будет считаться ошибкой.
– Ошибки 404 на мобильных устройствах
Некоторые сайты нормально показываются на компьютерах, но на мобильных устройствах появляется сообщение об ошибке.
– Нежелательные межстраничные объявления
На многих сайтах размещены межстраничные объявления или оверлеи с рекламой приложений, формами подписки и т. д. На мобильных устройствах такие объявления могут частично или полностью закрывать контент, а это мало кому понравится. В некоторых случаях межстраничные объявления созданы таким образом, чтобы пользователю было сложно закрыть их. Поскольку экраны мобильных устройств обычно невелики, межстраничные объявления могут доставлять существенное неудобство.
– Ошибки в перекрестных ссылках
Обычно, если пользователи перенаправляются на отдельный сайт для мобильных устройств, на него добавляют ссылку, по которой можно вернуться на сайт для компьютеров, и наоборот. Одна из распространенных ошибок – ссылка не на ту страницу (например, на главную).
– Медленная загрузка страниц
Обязательно убедитесь, что страницы для мобильных устройств открываются быстро. Пользователей раздражает, если приходится долго ждать загрузки контента.
– Как правильно настроить область просмотра
Чтобы ваш сайт правильно отображался на экранах разных размеров, настройте область просмотра с помощью метатега viewport. Он сообщает браузеру, как правильно изменить размеры элементов страницы. Учтите две распространенные ошибки:
• При фиксированной ширине области просмотра страница будет показываться в нужном масштабе далеко не на всех экранах, если учесть многообразие их размеров.
• Если минимальная область просмотра слишком широка, то пользователи устройств с небольшими экранами вынуждены прокручивать страницу по горизонтали. Эта проблема возникает, когда размеры в стилях CSS заданы абсолютными значениями или используются изображения, которые лучше всего показывать в окне конкретной ширины (например, 980 пикселей).
– Маленький размер шрифта
Не используйте слишком мелкий шрифт (меньше 12 пикселей), для прочтения которого приходится использовать жесты увеличения масштаба.
– Интерактивные элементы расположены слишком близко
Не размещайте элементы навигации слишком близко друг к другу, чтобы пользователь мог нажимать нужные, не задевая другие. Позаботьтесь об оптимальных размерах кнопок, ссылок и т. п. и расстояниях между ними, чтобы пользователям мобильных устройств было удобно с ними взаимодействовать.
Все ведущие поисковики едины в том, что сайты, не отвечающие требованиям мобильной вёрстки, пессимизируются в поиске, осуществляемом при помощи мобильных устройств. Этот алгоритм уже работает. Поэтому нужно обязательно проверять качество мобильной вёрстки, иначе вы будете терять до 70 % покупателей и буквально выбрасывать рекламный бюджет.
Если вы развиваете сайт для бизнеса, подписывайтесь на мою группу, здесь я размещаю важные материалы для увеличения вашего дохода.