Где тестировать, как выглядит сайт на мобильных устройствах
Если вы проанализировали трафик своего блога и обнаружили большую долю отказов, посмотрите, как он отображается на мобильных устройствах. Возможно, он не адаптирован для просмотра с телефонов, смартфонов, посетители не видят картинки, шрифты разъезжаются. В таком случае даже фанаты блога не смогут читать статьи и тем более что-либо покупать.
Как анализировать источники трафика можно прочитать здесь.
Для проведения теста вам не понадобятся модели всех телефонов, в сети есть сайты-эмуляторы мобильных устройств. Они предоставляют возможность онлайн увидеть сайт на устройствах с различной диагональю дисплея, разным соотношением сторон и разрешением. Угодить всем пользователям, возможно не удастся. Но по статистике Яндекс Метрики можно выделить чаще всего использующиеся устройства и адаптировать сайт под них.
В эмуляторах необходимо ввести урл сайта. Одни сразу отобразят его в разных устройствах, в других эмуляторах надо будет дополнительно выбрать вид устройства.
Вот популярные сервисы для проверки:
quirktools.com/screenfly
Проверяем и видим, первый сайт не адаптирован, у второго шапка, контент адаптируются к области просмотра.
Mobilephoneemulator.com
Пишем адрес сайта, задаем вид мобильного устройства, ориентацию экрана, проверяем результат.
Гугловский инструмент http://developers.google.com/speed/pagespeed/insights/ проверит, адаптирован ли веб-ресурс и даст рекомендации, как улучшить работу сайта.
Инструмент Chrome Dev Tools работает в браузере Chrome, выполняя мобильную эмуляцию.
Откройте любую страницу, нажмите правую клавишу мыши => Просмотреть исходный код.
В левом углу нажмите на значок мобильного телефона.
Передвигая линейку, установите нужный вам размер экрана мобильного устройства, размер смотрите вверху. Если вы уже сделали какие-то действия, чтобы адаптировать сайт, здесь можно онлайн смотреть успешность этих манипуляций.
Аналогично можно проверять в браузере Mozilla Firefox, нажмите правую клавишу мыши => Исследовать элемент. Справа откроется окно, выберите знак Режим адаптивного дизайна, нажмите на него.
Откроется эмулятор, где можно установить необходимые размеры экрана, двигая линейку.
Выбирайте подходящий инструмент, чтобы проверить, как выглядит сайт на мобильных устройствах, выполняйте аудит во время процесса адаптирования.