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

Возможно, он не адаптирован для просмотра с телефонов, смартфонов, посетители не видят картинки, шрифты разъезжаются.

В таком случае даже фанаты блога не смогут читать статьи и тем более что-либо покупать.

Как анализировать источники трафика можетепрочитать здесь.

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

Угодить всем пользователям, вам, возможно, не удастся. Но по статистике Яндекс Метрики можно выделить чаще всего использующиеся устройства и адаптировать сайт именно под них.

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

Сервисы для проверки мобильной версии сайта

quirktools.com/screenfly

Проверяем и видим, первый сайт не адаптирован, у второго шапка, контент адаптируются к области просмотра.

Mobilephoneemulator.com

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

Гугловский ИНСТРУМЕНТ http://developers.google.com/speed/pagespeed/insights/ проверит сайт на адаптивность, даст рекомендации, как улучшить работу веб-ресурса.

ИНСТРУМЕНТ Chrome Dev Tools работает в браузере Chrome, выполняя проверку адаптивности сайта онлайн.

Откройте любую страницу, нажмите правую клавишу мыши - ПРОСМОТРЕТЬ ИСХОДНЫЙ КОД.

В левом углу нажмите на значок мобильного телефона.

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

Аналогично можете проверять в браузере MOZILLA FIREFOX. Для проверки сайта на адаптивность нажмите правую клавишу мыши - ИССЛЕДОВАТЬ. Справа откроется окно, выберите знак Режим адаптивного дизайна, нажмите на него.


Откроется эмулятор, где можно установить необходимые размеры экрана, двигая линейку.

Выбирайте подходящий инструмент, чтобы проверить, как выглядит сайт на мобильных устройствах. Выполняйте проверку адаптивности сайта онлайн, чтобы быстро исправить ошибки.

Метки:

Сервисы для вебмастеров

ПОХОЖИЕ СТАТЬИ:

ДРУЗЬЯ, СПАСИБО, ЧТО ПОДЕЛИЛИСЬ СТАТЬЕЙ:

5 отзывов к “Где тестировать, как выглядит сайт на мобильных устройствах

  • Сероколов:

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

  • Андрей:

    screenfly хорошая штука, постоянно пользуюсь для проверки «как выглядит сайт»

  • Михаил:

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

  • Вадим:

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

  • Павел:

    iloveadaptive.ru – самый современный сервис на текущий момент, который я видел.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

 для диалога необходимо принять правила кофиденциальности *