Сайт

Проверка сайта на мобильных устройствах онлайн: Проверки мобильной версии сайта, 9 сервисов

25.09.2018
Анализ удобства просмотра сайта на мобильных устройствах при помощи инструментов Google
Апдейт алгоритмов ранжирования Google от 21 апреля стал сигналом для многих веб-мастеров к адаптации своих сайтов под мобильные устройства – это официально стало весомым фактором ранжирования сайта в поисковой выдаче. Теперь, по прошествии 5 месяцев можно сказать что этот тренд не только сохранился, но и продолжает развиваться. А это значит, что уже давно пора принять меры для того, чтобы ваш сайт был готов к просмотру на мобильных устройствах.

Вот несколько фактов, которые нужно знать об этом апдейте:

  • Робот сканирует страницу за страницей последовательно и проверяет их в режиме реального времени
  • Оценка готовности страницы к отображению на мобильных устройствах бинарна: или страница проходит проверку, или нет. Промежуточные значения отсутствуют.
  • Google предоставил инструменты для проверки удобства просмотра на мобильных устройствах.
  • Только ожидание этого обновления увеличило показатель адаптивных страниц на 5% за два месяца до релиза.

Если страница проходит проверку, то она отмечается значком в мобильной версии результатов поиска. Множество крупных западных сайтов, такие как Reddit, NBC Sports, Vogue, SongLyrics, и Business Week не успели внести изменения и существенно потеряли позиции.

Итак, что же нужно предпринять, чтобы не повторить их печальный опыт?

Как уже было упомянуто, Google запустил несколько инструментов для анализа работы сайта.



Отличный результат, что сказать

Принцип работы очень прост: копируете адрес странички, предназначенной для проверки, ждете и анализируете результат. Проверка происходит небыстро, как правило секунд 20-40. Результаты проверки довольно наглядны и позволяют быстро найти проблемные места. Чаще всего это: «Слишком мелкий шрифт», «Не задана область просмотра для мобильных устройств», «Контент шире экрана», «Ссылки слишком близко друг к другу». Сервис обязательно будет ругаться на использование Flash – в современном мире он поддерживается все хуже и хуже. Этот сервис стоит использовать в первую очередь, для проверки сайта.



Мда, как же так?

Замечательный, хоть и достаточно строгий сервис, который не раз и не два упоминался на Хабре, и которым в обязательном порядке должен проверяться любой сайт (по моему личному мнению). Принцип работы тот же – вводим ссылку, ждем, получаем ряд комментариев и оценку страницы. Чем выше – тем лучше, но редко кому удается достичь результата в 100 баллов, особенно если на сайте используется яндекс.метрика/google analytics и другие подключаемые скрипты.

Итак, чем же он полезен? Во-первых, он проводит схожую проверку страницы, что и предыдущий сервис (но немного быстрее). Во-вторых – PageSpeed, как видно из названия, предназначен для анализа и оптимизации скорости загрузки страницы. Это немаловажный фактор ранжирования, и он учитывается уже достаточно давно. Да и в любом случае, медленно загружающаяся страница всегда теряет посетителей. PageSpeed дает рекомендации не только по внешнему виду страницы на мобильных устройствах, но и напоминает о том что стоит включить кеширование, прописать gzip/deflate сжатие ресурсов, минифицировать css и js, а также убрать оные в конец кода, чтобы не блокировать загрузку. Но на практике, самый большой прирост скорости дает оптимизация картинок – именно этот ресурс обычно грузится дольше всех. Утилита под названием FileOptimizer позволяет решить эту проблему достаточно быстро, кроме нее есть ряд серверных утилит и аналогов – в общем, было бы желание.

Также, можно получить рекомендации по удобству просмотра в инструментах разработчика — www.google.com/webmasters/tools (если у вас уже есть аккаунт). Там вы можете получить все сообщения об ошибках по своему сайту, графики и другую ценную информацию. К сожалению, объем предоставляемой информации этим сервисом настолько велик, что его разбора хватит на несколько отдельных статей.

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


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

Содержание

Вместо заключения


Сегодня каждый вебмастер, которому, важна посещаемость его сайтов, должен учитывать, насколько хорошо его творения отображаются на планшетах и смартфонах. Это больше не получится игнорировать, ссылаясь на небольшой процент таких пользователей. Возможно, скоро их количество превысит тех, кто заходит на ваш сайт с компьютера или ноутбука. Крайне важно своевременно внести изменения в верстку и структуру сайта. Google предоставляет удобные инструменты для анализа работы сайта, которым нет аналогов – они помогут вам сохранить и удержать пользователей. А тем, кто уже адаптировал свои сайты будет полезно время от времени проверять новые странички, чтобы не упустить ничего важного.

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

Поисковые системы стремятся улучшить поисковую выдачу пользователям мобильных устройств (смартфонов, планшетов), поэтому сайты оптимизированные под разные размеры экранов будут отображаться выше, чем сайты не имеющие такой оптимизации. Сюда же относятся мобильные версии сайтов.

Признаки дружелюбного к мобильным устройствам сайта:

  1. Удобно читаемый контент (читается без увеличения), крупные поля форм и кнопки.
  2. Отсутствие «тяжелых» картинок, Flash — элементов и излишней анимации.
  3. Отсутствие Java-апплетов и Silverlight-плагинов.
  4. Отсутствие горизонтальной полосы прокрутки.
  5. Минимальная скорость загрузки сайта.
  6. Максимально простая навигация.
  7. Прописан мета-тег viewport.

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

Для демонстрации работы сервисов возьмём сайт моих хороших партнёров — бюро переводов КОНТЕКСТ.

1. Google Mobile Friendly

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

Отображает на экране как выглядит сайт на смартфоне и даёт общую оценку его оптимизации под мобильные устройства.

https://search.google.com/test/mobile-friendly

b_56ebd2b1c623a.jpg

2. Яндекс Вебмастер (beta) — инструмент «проверка мобильных страниц»

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

Сервис отображает общую оценку, проверяет по 6 пунктам соответствия и показывает как выглядит сайт на смартфоне.

https://beta.webmaster.yandex.ru/

b_56ebd2c64bbf7.jpg

3. Средство проверки Bing

Проверяется общая оптимизация плюс соответствие 4 пунктам.

Также отображается то, как сайт выглядит на экране смартфона (конечно же, на OS windows, в то время предыдущие сервисы отображали android-смартфон =)).

https://www.bing.com/webmaster/tools/mobile-friendliness

b_56ebd34fcaa32.jpg

4. Mobile Checker от W3C

Самый «долгий» из всех сервисов. Настолько «долгий», что окончания проверки я так и не дождался =)

Ждал минут 5, в то время как остальные сервисы справлялись за 5-20 секунд.

Пробовал Google chrome и Opera.

https://validator.w3.org/

b_56ebd31f48193.jpg

5. Responsinator

В отличии от остальных не даёт каких-либо оценок, но отображает как выглядит ваш сайт на 6 различных устройствах в двух ориентациях на IOS и Android, что очень круто.

http://www.responsinator.com/

b_56ebd33ce86a1.jpg

UPD1: 20.07.2017:

6. Adaptivator

Сервис предложенный в комментариях к этой статье. Лично не пользовался, но вроде всё довольно-таки неплохой. Возможности аналогичны респонизатору, но есть ещё и оценка результата адаптивности.

http://adaptivator.ru/

b_5970b3bd15854.jpg

UPD2: 3.11.2017:

7. iloveadaptive.ru

Ещё один новенький сервис, предложенный в комментариях. Как по мне, немного грузноват и непрактичен, но это с лихвой окупается большими возможностями. Имеется даже сортировка по ОС.

www.iloveadaptive.ru

Вывод

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

Поэтому всем, кто хочет быть ближе к клиенту и иметь больше посещений\лидов, рекомендую как можно быстрее адаптировать свои сайты. Задать мне вопрос — https://vk.com/topic-111053731_33165203

Бесплатный аудит вашего сайта\лэндинга\группы — https://vk.com/topic-111053731_33178124

Больше интересной информации о digital — https://vk.com/bilalovpro

5 лучших способов тестирования мобильных сайтов.

Темпы использования мобильных браузеров растут ежедневно. По статистике, около 32% интернет-трафика приходится на мобильные телефоны и планшетные компьютеры. Это означает и рост ожидания потребителей в отношении мобильных сайтов.

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

Выделяется несколько различных подходов к проверке мобильных сайтов. Ниже раскрывается пять основных способов тестирования, расположенных в порядке от самых эффективных до наименее предпочтительных.

1. Тестирование на реальных мобильных устройствах

Лучше всего проверять сайт на реальных устройствах, поскольку многие нюансы взаимодействия невозможно эмулировать. На опыт взаимодействия (UX) влияет целый ряд факторов: неустойчивое подключение к сети, плотность пикселей, относительный размер активных элементов на странице и реальное время загрузки страницы. В идеале сайт необходимо проверять на всех мобильных устройствах.

Естественно, полное тестирование практически неосуществимо, поскольку требует много времени и ресурсов. Оптимальным выходом станет приобретение нескольких мобильных устройств для так называемого тестового комплекта, что особенно актуально для клиентоориентированного бизнеса. Тестовый комплект обычно состоит из самых популярных устройств, используемых для просмотра веб-страниц. Данный подход позволяет провести физические испытания в реальных условиях и взглянуть на сайт глазами пользователя. Если покупка мобильных телефонов для тестового комплекта не вписывается в бюджет проекта, воспользуйтесь собственным смартфоном. Вероятнее всего, ваш смартфон будет работать на базе Android или iOS, что хотя бы даст представление, каким видят анализируемый сайт большинство пользователей. Поинтересуйтесь, какими мобильными устройствами располагают родственники, коллеги и друзья, чтобы проверить сайт и на других девайсах.

2. Использование симулятора iOS и эмулятора Android

Настоящее «железо» заменить невозможно, однако за неимением лучшего подойдут программные эмуляторы. Эмуляторы для iOS и Android рассчитаны, главным образом, для тестирования родных приложений. Однако в них предусмотрены дефолтные браузеры мобильных устройств, которые достаточно точно воспроизводят сайт, каким он будет выглядеть на реальном устройстве. Подчеркнем фразу достаточно точно, поскольку эмуляторы не учитывают состояние сетевого подключения, скорость загрузки страниц, относительные размеры активных элементов и другие нюансы, которые можно наблюдать только в реальных условиях. Тем не менее, инструменты визуализации функционально эквивалентны настоящим устройствам и неплохо справляются с проверкой кроссбраузерной совместимости.

  • Симулятор iOS, поставляемый в интегрированной среде разработки Xcode, имитирует отображение сайта в iPhone и iPad

Симулятор iOS входит в интегрированную среду разработки ПО Xcode. Сначала установите Xcode с платформы App Store. Зайдите в меню Xcode и выберите Xcode > Open Developer Tool >iOS Simulator. К сожалению, инструмент совместим только с операционкой Mac OS, поэтому пользователям Windows или Linux придется поискать другой вариант.

Эмулятор Android поставляется в среде разработки приложений Android SDK. Подробная информация об эмуляторе Android находится здесь.

3.  Браузерное тестирование

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


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

4. Сервис Responsinator

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


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

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

5. Изменение размеров окна браузера

В процессе работы над сайтом на настольном компьютере дизайнеры и разработчики часто проверяют поведение элементов адаптивного дизайна путем переключения размеров окна браузера. Это действие настолько элементарно, что язык не поворачивается назвать его «тестированием», однако отказываться от него не имеет смысла. В процессе работы над фрагментами кода, связанными с адаптивным дизайном, быстрая проверка типа «переключил – посмотрел – переключил обратно» помогает оценить внесенные изменения. Однако этот прием даже нельзя сравнивать с другими методами тестирования: погрешность в размерах, разные графические движки, отсутствие сетевой задержки сигнала и т. п. Этот метод имеет слишком много недостатков, чтобы быть равноценной заменой другим вариантам тестирования.

А как проводите тестирование вы?

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

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

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

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

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

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

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

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

анализ трафика сайта, проверка посещаемостианализ трафика сайта, проверка посещаемости

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

СТАТЬИ ПО ТЕМЕ:

Что такое слайд шоу из фотографий, как сделать его онлайн

Яндекс метрика: что это такое, для чего нужна, как подключить, установить код на сайт wordpress, настроить

Доступ к счетчику метрики яндекс

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

quirktools.com/screenfly позволяет проверить сайт на разных разрешениях. Вводим адрес страницы, выбираем устройство и видим, первый не адаптирован, у второго шапка, контент адаптируются к области просмотра. отображение сайта на мобильных устройствахотображение сайта на мобильных устройствах

как проверить сайт на мобильных устройствах,проверка мобильной версии сайтакак проверить сайт на мобильных устройствах,проверка мобильной версии сайта
Чтобы проверить сайт на разных разрешениях в Mobilephoneemulator.com, пишем url, задаем вид устройства, ориентацию экрана, проверяем результат.
мобильная проверка сайта,проверить сайт на адаптивностьмобильная проверка сайта,проверить сайт на адаптивность

Проверить сайт на адаптивность в яндекс

Как хорошо оптимизирован сайт для просмотра на мобильных устройствах проверьте В Яндекс Вебмастер.
ИНСТРУМЕНТЫ — ПРОВЕРКА МОБИЛЬНЫХ СТРАНИЦ.

На мобильных устройствах не отображаются странички, сделанные по технологии Silverlight, Flash, Applet. Содержимое страничек не должно выходить за вертикальную рамочку экрана. проверить сайт на адаптивность яндекспроверить сайт на адаптивность яндекс

Проверить сайт на адаптивность google

Есть несколько инструментов Google, чтобы проверить сайт на адаптивность.

Самый известный developers.google.com/speed/pagespeed/insights/. После проверки мобильной версии сайта он даст рекомендации, как улучшить работу веб-ресурса. проверить сайт на адаптивность googleпроверить сайт на адаптивность google
Приложение Гугл Mobile-Friendly Test  search.google.com/test/mobile-friendly поможет проверить мобильную версию сайта

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

Средство проверки адаптивности от Bing по этому адресу bing.com/webmaster/tools/mobile-friendliness
проверить мобильную версию сайтапроверить мобильную версию сайта

Как открыть мобильную версию сайта на компьютере

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

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

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

проверка блога, проверить мобильную версию сайтапроверка блога, проверить мобильную версию сайта

проверить адаптивность сайта онлайнпроверить адаптивность сайта онлайн

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

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

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

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

Проверка удобства просмотра сайта на мобильных устройствах

Категория: Нужно знать!

Буквально на днях, заглянув в поиск Google по запросу site:Ilyakhasanov.ru, я обнаружил под каждой страницей поисковой выдачи запись следующего содержания: «Ваша страница не оптимизирована для смартфонов».

В добавок к этому, на прикрепленной почте к Search Console не было никаких уведомлений об этом.

Ошарашенный данным фактом, я протестировал свой сайт при помощи сервиса PageSpeed Insights от той же Google и получил знакомые ранее цифры удобства использования ресурса для пользователей: 99/100.

Как робот Googlebot видит страницу сайта

На основе полученных данных стало понятно, что тут что-то не чисто. Вернувшись к списку поисковой выдачи я обратил внимание на то, что все предупредительные записи под моими страницами сопровождаются активными ссылками на неизвестный мне сервис. Так я открыл для себя еще один сервис от Google Mobile friendly, который анализирует удобство просмотра сайта на мобильных устройствах c точки зрения робота Googlebot.

Протестировав сайт ilyakhasanov.ru, сервис указал проблемы и, самое главное, причину их возникновения:

  1. Проблемы: контент шире экрана, ссылки слишком близко друг к другу;
  2. Причина: некоторые ресурсы страницы (дается список) заблокированы в robots.txt

В списке красуется файл стилей theme.css, в котором прописаны все необходимые медиа-запросы @media для реализации адаптивности сайта под мобильные устройства. Все верно, данный файл заблокирован в файле robots.txt, но какого черта поисковому боту нужны CSS файлы?

По идее поисковые боты сканируют и анализируют лишь только контент страницы, отсеивая JavaScript и CSS файлы. По крайней мере так было раньше, сейчас чтобы обеспечить правильное индексирование и отображение страниц сайта, нужно предоставлять роботу Googlebot доступ к JavaScript и CSS, согласно нового алгоритма.

Решение проблемы

Решение проблемы было одно — открыть доступ боту к запрашиваем файлам из списка. В основном это были файлы из директорий media и template.

После открытия доступа и повторной проверки сайта через сервис Mobile friendly все встало на свои места, сайт стал оптимизированным для мобильных устройств.

Как было сказано ранее, в основном нужно снять запрет с двух папок на которые ругается Googlebot — media и template, если у Вас также скрыта папка images, то её тоже нужно снять с запрета.

Реализовать данное действие можно удалив из файла robots.txt следующие строчки:

Disallow: /images/
Disallow: /media/
Disallow: /templates/

Данная проблема была решена еще в Joomla 3.4, однако файл robots.txt после обновления не перезаписывается автоматически. После обновления Joomla, рядом с файлом robots.txt должен появиться файл robots.txt.dist, который является оригинальным файлом из дистрибутива обновленной версии Joomla. Соответственно, в нем нет запрета на директории images, media и templates.

Подведем итоги

Если Вы обладатель сайта на более ранней версии Joomla чем 3.4 или же Вы обновили раннюю версию Joomla до последней — обновите файл robots.txt вручную.

В добавок сайт, помимо сервиса PageSpeed Insights, необходимо проверить еще и в Яндекс. Вебмастере (раздел «Инструменты» — «Проверка мобильных страниц»)

чек IMEI — Бесплатный чек IMEI онлайн

  • Проверьте IMEI онлайн

  • чирикать