9 Сервисов проверки мобильной версии сайта
Вступление
Содержание статьи:
Вопрос, нужна ли мобильная версия сайту, на сегодня не актуален. Безусловно, нужна. Мобильный трафик неуклонно растёт, и игнорировать версию сайта для мобильных устройств это ненормально для владельца сайта. В статье проверки мобильной версии сайта на онлайн сервисах.
О мобильной версии сайта – два слова
Напомню, что оптимизировать сайт WordPress для просмотра на мобильных гаджетах можно двумя способами. Первый способ – использовать адаптивную тему (шаблон) для сайта. Второй способ – создать мобильную версию сайта для гаджетов типа смартфон и планшет.
На самом деле есть третий способ — использовать прогрессивное веб-приложение PWA. Приложение не только адаптируют ваш сайт под любое мобильное устройство, но выполняет уведомления в режиме реального времени (push-уведомления), поддерживает ваш сайт в автономном режиме и имеет ряд других уникальных возможностей.
Лично я предпочитаю использовать адаптивный шаблон, хотя адаптивный сайт априори будет дольше загружаться на мобильном устройстве, так как не сокращает объем страниц.
Также напомню, что мобильная версия и адаптивный дизайн НЕ имеют ничего общего с AMP версией сайта. (читать об AMP тут).
9 Сервисов проверки мобильной версии сайта
Если по каким либо причинам вы отдали предпочтение мобильной версии сайта, вместо адаптивного дизайна, предлагаю следующие сервисы для проверки мобильной версии сайта, не только WordPress.
Важно! Обращу ваше внимание, что большинство предлагаемых сервисов проверяют НЕ только мобильную версию сайта (mobile), но и его адаптивность (responsive). То есть выполняется проверка на общую адаптивность сайта для мобильных устройств.
Сервис №1: Проверка мобильных версий от Google Search Console
search.google.com/test/mobile-friendly?hl=ru
Работать с данным сервисом можно без аккаунта Google. Пояснять работу сервиса, наверное, не стоило, но всё же. В поле проверки вписываете URL своего сайта и нажимаете кнопку «проверить».
Адаптация сайта будет проинформированная зеленой информацией. Нарушение адаптации будет сообщено красным цветом.
Сервис №2: Проверка мобильных страниц Яндекс.Вебмастер
webmaster.yandex.ru/site/tools/mobile-friendly/
Работать с этим сервисом без Яндекс аккаунта и добавление сайта в Яндекс.Вебмастер НЕ получится. Однако, если вы всё перечисленное сделаете, проверка мобильных страниц станет лишь одним из инструментов Яндекс.Вебмастер.
Для проверки вам нужна вкладка сервиса «Инструменты>>> Проверка мобильных страниц. Далее выбираете свой сайт в списке сайтов и проверяете его мобильность.
Результаты проверки будут расписаны по шести позициям. Общий результат мобильности вверху списка проверок. Информация «Страница оптимизирована для мобильных устройств», говорит, что на вашем сайте с оптимизацией под мобильные всё хорошо.
Эмулятор мобильного телефона COWEMO
www.mobilephoneemulator.com
Один из сервисов компании COWEMO позволяет создать эмуляцию просмотра сайта на одном из 13-ти устройствах.
После заполнения настроек вы сразу видите, ваш сайт на выбранном гаджете.
Особенности:
- Сервис делает эмуляцию только для мобильных телефонов, обходя планшеты и десктопы;
- В настройках есть варианты просмотра по ориентации экрана (горизонт или вертикаль);
- Есть просмотр в пикселях и реальном размере;
- Меняя параметры, можно один сайт посмотреть на всех устройствах и при всех параметрах.
Проверки мобильной версии сайта на Responsinator
www.responsinator.com
Responsinator помогает разработчикам и владельцам сайтов быстро узнать, как их сайт будет выглядеть на популярных мобильных устройствах.
Сервис не точно реплицирует, как будет выглядеть сайт, поскольку точное тестирование всегда проверяется на реальных устройствах.
Screenfly
quirktools.com/screenfly
Screenfly позволяет просматривать ваш сайт на различных экранах устройств и разрешениях. Введите URL-адрес и нажмите GO.
Особенности
- Можно посмотреть свой сайт не только на мобильных устройствах;
- Сервис прост в работе и практически не имеет настроек;
- Есть эмуляция прокси-сервера;
- Есть возможность регистрации и получения личного кабинета для разработчиков;
- На quirktools.com есть другие инструменты для разработчиков сайта.
Responsivepx
responsivepx.com
Введите URL своего сайт, используйте элементы управления установите ширину и высоту окна просмотра. Точную ширину можно вписать вручную.
Проверки мобильной версии сайта на Responsivedesign
ami.responsivedesign.is
Это не инструмент тестирования сайта. Это простой и визуальный инструмент, позволяющий быстро посмотреть, как выглядит сайт сразу на 4-х устройствах, включая мобильные устройства.
Проверки мобильной версии сайта на iPhone
www.testiphone.com
Простой и узконаправленный сервис, чтобы посмотреть как выглядит сайт на iPhone.
Платный мобильный эмулятор страницы
Не нужно думать, что все эмуляторы бесплатны. Вот пример платного эмулятора, который дает 30 дней триала после регистрации.
mobilemoxie.com/tools/mobile-page-emulator
Этот эмулятор мобильных страниц, покажет ваши целевые страницы на двух устройствах одновременно. Пройдите свой сайт легко в эмуляторе, чтобы ускорить тестирование.
Вывод
Я не включил в обзор инструменты и расширения браузеров, которые позволяют просматривать сайт на различных мобильных устройствах. Например, в Chrome есть на правой кнопке мыши, ссылка «Просмотреть код», где есть отличный эмулятор. Но даже без этих расширений, используя сервисы обзора, вы всегда можете сделать проверки мобильной версии сайта.
Источник: www.wordpress-abc.ru