как проверить сайт на телефоне
“Протестируй на всех браузерах на телефоне” или инструменты для тестирования Mobile Web приложений
На сегодняшний день телефоны являются наиболее популярным устройством. По мировой статистике они занимают самый высокий показатель использования, в сравнении с десктопом и планшетом.
Поэтому мобильный веб стал главной необходимостью, а новое приложение во многих случаях будет именно веб-приложением, актуальной задачей которого будет способность работать во всех браузерах на мобильном устройстве.
В этой статье, я хочу поделиться своим подходом к тестированию подобных приложений и инструментами, которые существенно упростят этот процесс.
Давайте для начала определимся, что является мобильным веб-приложением.
Мобильное веб-приложение — это, по сути, веб-сайт, адаптированный и оптимизированный для любого гаджета — например телефона, планшета и т.д. Для того, чтобы им пользоваться, достаточно иметь на устройстве браузер и выход в Интернет.
Такие приложения не требуют установки, легко доступны по ссылке в браузере, но имеют ограниченную функциональность в сравнении с гибридными и нативными приложениями.
Если вы столкнулись с подобным приложением, стоит решить как и на чем вы будете его тестировать. Как выбрать подходящий инструментарий и достаточный набор конфигураций? Сейчас разберемся.
Существует как минимум 3 способа для тестирования:
+ Точность результатов;
+ Облегчает тестирование ориентации устройства;
— Дорого;
— Трудоемкий процесс создания и последовательного воспроизведения
результатов;
Эмуляторы:
+ Легче управлять переключением типов устройств, загрузив новый профиль устройства;
+ Бесплатно или небольшие затраты;
— Возможно небольшие погрешности в результате;
— Ограниченные возможности при использовании изменения размера окна.
+ Экономически выгодно;
— Не принимает во внимание аппаратное обеспечение;
— Возможны ложные срабатывания;
— Результаты моделирования могут быть трудными для анализа из-за неполных данных.
Я бы не рекомендовала использовать симуляторы. Во-первых: вы не столкнетесь со всеми проблемами, которые может вызвать аппаратное обеспечение. Во вторых: некоторые приложения могут работать немного по-другому, а это говорит о ненадежности их использования.
Если вы решили идти по пути использования эмуляторов, нужно будет определиться с инструментом, который будете применять.
Вот список инструментов, которые я бы посоветовала вам использовать:
Как выбрать на чем тестировать?
После выбора инструментария определяемся с набором браузеров на которых будем тестировать. Они бывают обычные и InApp.
Обычный браузер — это отдельное приложение для просмотра веб-сайтов на мобильных устройствах. Как правило, такие браузеры отличаются гибкостью настроек и расширенными функциями, относительно встроенных. Наиболее популярные: Google Chrome, Safari, Mozilla Firefox, Operа mini, Tor Browser, UC Browser.
In-App браузер — это встроенный браузер в приложении, который имеет окно веб-просмотра. Каждый раз, когда вы нажимаете на ссылку в мобильном приложении (например Facebook), вы используете встроенный браузер, то есть переходите по ссылке внутри самого приложения.
Браузеры In-App имеют легкий функционал, но они не позволят Вам добавлять закладки, не имеют изменяемой адресной строки и не дают открывать ссылки в новых окнах (только дают перейти в обычный браузер).
При выборе браузера можете использовать опять же таки gs.statcounter.com и для статистики траффика вашего приложения — www.similarweb.com
В заключение скажу, лучше всего использовать комбинацию инструментов и помнить о том, что реальное устройство – лучшее решение, которое всегда дает вам максимальную точность результатов.
Спасибо за прочтение! Всем правильных мыслей и оптимальных инструментов для тестирования для своего приложения.
6 онлайн-сервисов для проверки адаптивности сайта
Смотрим глазами клиента. Удобно с его устройства, браузера, ОС? Правильно ли всё отображается? Он точно не хочет покинуть сайт?
Адаптивность — корректное отображение на всех устройствах: компьютерах, планшетах, смартфонах. Если пользователь с телефона зайдёт на сайт, у которого горизонтальная прокрутка, мелкий шрифт, обрезанные картинки, некликабельные кнопки, — вряд ли дойдёт до покупки. Проще не мучиться, а уйти на сайт конкурента.
Адаптивность становится всё более важной с ростом мобильного интернета. Согласно исследованию GfK, в 2018 году 35% россиян пользовались интернетом только со смартфонов и планшетов. Также это большой плюс для SEO: так, Google обещает в течение 2020 года отдать приоритет в выдаче сайтам, удобным для просмотра с мобильных устройств. Именно поэтому стоит проверять свой сайт на адаптивность/мобильность (лучше и на кроссбраузерность/кроссплатформенность — удобство пользования в любых браузерах и операционных системах).
Я подобрала и протестировала шесть онлайн-инструментов для проверки адаптивности. Описания и тарифы актуальны на октябрь 2020 года.
Автор-фрилансер, пишет на разные темы, чаще о растениеводстве и технологиях в сельском хозяйстве.
Google Mobile-Friendly Test
Сервис проверяет мобильность сайта, показывает, как он выглядит на экране смартфона. В результатах теста будут описаны проблемы с загрузкой или отображением. Ошибки могут быть связаны со шрифтами, плагинами, стилями CSS, размерами интерактивных элементов.
Инструмент полностью бесплатный.
Resizer
Сервис проверяет адаптивность на трёх устройствах: компьютере, планшете, смартфоне. Просмотр — интерактивный, то есть можно взаимодействовать с сайтом: скроллить, кликать, переходить в другие разделы. Конкретные модели устройств не указаны, произвольные размеры экранов тоже задать нельзя — есть только стандартные.
Проект снова бесплатный и снова принадлежит Google.
Adaptivator
Этот онлайн-сервис показывает, как сайт может выглядеть на разных моделях планшетов и смартфонов: iPhone, Lumia, Nexus, iPad и др. Здесь не скриншоты, как в Google Mobile-Friendly Test, — на каждом устройстве можно листать страницу, смотреть все картинки, проверять, как отображаются разные элементы.
Некоммерческий проект, приветствуются донаты. Англоязычный аналог — Responsinator.
Screenfly
Англоязычный сервис (сейчас принадлежит Blue Tree, раньше — QuirkTools). Представлено 30+ моделей смартфонов, планшетов, ПК и ТВ. Можно поворачивать экраны, запрещать прокрутку, задавать произвольные размеры. Судя по всему, сервис не боится вышеупомянутого запрета на удалённый просмотр. Удобно сразу делиться ссылкой на проверку адаптивности.
I Love Adaptive
Ещё один инструмент для тестирования сайтов на адаптивность. Большой выбор устройств, моделей, операционных систем. Как и в Screenfly, можно задать произвольный размер экрана. Дополнительные функции: валидация HTML-кода, проверка скорости загрузки, сравнение нескольких сайтов. Чтобы обойти запрет на отображение контента, разработчики предлагают установить расширение Chrome.
Сервис бесплатный, как и предыдущие.
Browserling
Англоязычный сервис для проверки адаптивности. Ключевое отличие от других — полноценное тестирование на кроссбраузерность и кроссплатформенность.
Бесплатно можно проверить сайт только на Internet Explorer 11, Windows 7 и при разрешении 1024×768. Чтобы получить доступ ко всем функциям, нужно платить от 19 долларов в месяц.
Подытожим
Если достаточно проверить мобильность (правильность отображения на смартфонах) в целом — хватит Google Mobile-Friendly Test.
Нужно посмотреть, как сайт выглядит на разных экранах, — для тестирования подойдут Resizer, Adaptivator или Screenfly (умеет обходить запрет на просмотр). Если ещё требуется сравнить отображение нескольких сайтов, а заодно проверить валидность кода и скорость загрузки, — в помощь I Love Adaptive.
Когда важно протестировать не только мобильность, но и юзабилити на конкретных браузерах и ОС, — не обойтись без Browserling. Это единственный платный инструмент в подборке, хотя у него есть и ограниченная бесплатная версия.
Если предстоит не только проверить, но и освоить адаптивную вёрстку, — пора учиться в Skillbox.
7 сервисов для проверки сайта на мобильность
Поисковые системы стремятся улучшить поисковую выдачу пользователям мобильных устройств (смартфонов, планшетов), поэтому сайты оптимизированные под разные размеры экранов будут отображаться выше, чем сайты не имеющие такой оптимизации. Сюда же относятся мобильные версии сайтов.
Признаки дружелюбного к мобильным устройствам сайта:
Сервисы для проверки сайта на «мобильность»
1. Google Mobile Friendly
Проверить можно любой сайт, просто вбив его адрес в строку.
Отображает на экране как выглядит сайт на смартфоне и даёт общую оценку его оптимизации под мобильные устройства.
В отличии от остальных сервисов, тут можно проверить не каждый сайт, а только свой. То есть после того, как сайт добавлен в интерфейс вебмастера с подтверждением прав на него.
Сервис отображает общую оценку, проверяет по 6 пунктам соответствия и показывает как выглядит сайт на смартфоне.
3. Средство проверки Bing
Проверяется общая оптимизация плюс соответствие 4 пунктам.
Также отображается то, как сайт выглядит на экране смартфона (конечно же, на OS windows, в то время предыдущие сервисы отображали android-смартфон =)).
4. Mobile Checker от W3C
Самый «долгий» из всех сервисов. Настолько «долгий», что окончания проверки я так и не дождался =)
Ждал минут 5, в то время как остальные сервисы справлялись за 5-20 секунд.
Пробовал Google chrome и Opera.
5. Responsinator
В отличии от остальных не даёт каких-либо оценок, но отображает как выглядит ваш сайт на 6 различных устройствах в двух ориентациях на IOS и Android, что очень круто.
UPD1: 20.07.2017:
6. Adaptivator
Сервис предложенный в комментариях к этой статье. Лично не пользовался, но вроде всё довольно-таки неплохой. Возможности аналогичны респонизатору, но есть ещё и оценка результата адаптивности.
UPD2: 3.11.2017:
7. iloveadaptive.ru
Ещё один новенький сервис, предложенный в комментариях. Как по мне, немного грузноват и непрактичен, но это с лихвой окупается большими возможностями. Имеется даже сортировка по ОС.
Вывод
Несомненно, адаптация сайта под мобильные устройства, не просто дань моде и времени, а необходимый атрибут современного сайта, помогающий не только конечному пользователю.
8 сервисов для аудита мобильной версии сайта
Аудит мобильной версии сайта — важный, но трудоемкий процесс. Степень сложности во многом зависит от типа мобильной конфигурации. Только используя комплексный подход можно составить грамотное техническое задание для разработчиков и добиться заметных результатов.
В этой статье рассмотрим сервисы, использование которых облегчит SEO-специалистам процесс проверки и анализа работы мобильной версии сайта.
Возможно, некоторые инструменты вы уже давно используете, а с чем-то познакомитесь только сегодня.
Mobile-Friendly Test
Это инструмент от Google, с помощью которого можно узнать оптимизирована ли страница под мобильные устройства. В нем же отобразятся проблемы, если они есть.
Даже при получении положительного результата, не забывайте переходить в раздел «Проблемы при загрузке страницы». Так, например, можно увидеть скрипты, блокирующие работу Googlebot через robots.txt.
Лайфхак: доступ к проверке оптимизации есть в Netpeak Spider. Вы можете по окончанию сканирования выборочно проверить страницы, выбрав в контекстном меню Mobile Friendly Test. Спайдер передаст данные о странице в сервис Google.
Подобный инструмент есть и от Яндекс.Вебмастер, он доступен по ссылке.
Если же вам нужно проверить оптимизированность для мобильных устройств у списка URL / доменов, это можно сделать в программе Netpeak Checker. Для начала настройте связь с API (это бесплатно), а затем просто вставьте список URL в таблицу, выберите параметр ‘Is Mobile-Friendly’ на боковой панели и запустите анализ. Данные по страницам подтянутся в таблицу по формату ‘True / False’.
Google Search Console
На данный момент в Search Console вы найдете отчет «Удобство для мобильных».
В отчете указаны только те ошибки, которые робот успел обнаружить. Эти примеры помогут понять тип страниц, нуждающиеся в дооптимизации.
В Search Console вы не найдете подробного объяснения, какой контент на странице шире экрана или какие плагины не поддерживаются. Для этого лучше использовать следующий сервис.
Adaptivator
adaptivator.ru — онлайн сервис проверки адаптивности сайта, который поможет прояснить, в каких именно элементах страницы проблема, и составить подробное техническое задание для разработчиков.
Netpeak Spider
Ещё один способ проверить сайт на мобайл-френдли — просканировать его с помощью Netpeak Spider. Главное — перед началом проверки выбрать в настройках user-agent: Googlebot (Smartphone).
Если у вас SPA-сайт, не забудьте включить рендеринг JS-запросов, чтобы поисковой робот мог сканировать и обрабатывать контент, который скрыт через JavaScript.
Mobile First Index Checker
Того, что сайт будет корректно отображается на мобильных устройствах, недостаточно. Он также должен полностью соответствовать десктопной версии.
Инструмент Mobile First Index Checker предназначен для поиска несоответствий между версиями сайта для ПК и для мобильных устройств.
С помощью этого чекера можно получить информацию о соответствии:
В результате — проверка по чек-листу, описание проблем (если они есть) и анализ скорости мобильной версии.
Браузер Blisk
Вы можете использовать этот браузер, чтобы просматривать сайт синхронно на десктопной и мобильной версии. Все элементы страницы и контент должны корректно отображаться на мобильных устройствах.
Выбирайте любой смартфон или планшет и отслеживайте работу мобильной версии относительно основной.
Проверьте наличие скрытого контента, его должно быть минимальное количество. Так как разница между экраном смартфона и десктопом большая, Google допускает небольшое расхождение контента на страницах.
С помощью этого инструмента вы сможете отследить не только корректное отображение на устройствах, но и нарушение функционала сайта. Например, на карточке товара может отсутствовать кнопка «Купить».
У браузера есть ограничение по времени для бесплатного использования — 30 мин/день.
Mobile SERP Test
Полезным будет также анализ ранжирования мобильной версии сайта. Вы можете использовать сервис Mobile SERP Test, если хотите сравнить результаты мобильной выдачи в зависимости от местоположения и типа устройства. Есть возможность поверки для двух мобильных устройств одновременно. До 5 раз в сутки сервис можно использовать бесплатно.
Для постоянного мониторинга позиций в мобильной выдаче используйте Serpstat.
Проверка AMP-страниц
Чтобы выполнить проверку работы AMP-страницы, воспользуйтесь сервисом Google, который доступен по ссылке. Кроме стандартных ошибок (страница недоступна, закрыта от индексации и прочее) сервис укажет на проблемы с контентом, в настройке канонических ссылок и микроразметке.
Если нужно массово проверить ускоренные мобильные страницы, при сканировании в Netpeak Spider выберете пункт AMP в разделе Head теги. Включите и проверку канонических ссылок.
Для упрощенной проверки AMP-страниц можно использовать расширение для Chrome, а для более детальной работы с кодом — веб-интерфейс validator.ampproject.org.
Выводы
При оптимизации мобильной версии сайта нужно помнить не только об удобстве пользователей, но и о поисковом роботе для смартфонов. Именно он определяет успешность вашего сайта в мобильной выдаче.
При аудите используем сервисы, которые помогут:
Пишите в комментариях, без каких сервисов не можете обойтись вы при проверке мобильной версии сайта.
10 способов посмотреть, как выглядит сайт на мобильном
Удобство отображения сайта на мобильных устройствах – важный фактор, значимость его растет с каждым годом. И не только по той причине, что все больше пользователей заходят в Интернет с телефона, а и потому, что это влияет на ранжирование сайта в поисковых системах.
Еще в 2015 году компания Google сообщила о том, что адаптация сайта под мобильные устройства влияет на позиции сайта. А с 2016 года и Яндекс объявил о мобильных изменениях поискового алгоритма. Это говорит о том, что поисковые системы выводят оптимизированные под мобильные устройства сайты выше, чем те, которые не имеют оптимизации.
Адаптация страниц под нужды мобильных пользователей просто необходима, так как это влияет еще и на конверсию посетителей. Многие отмечают, что адаптивность сайта повышает конверсию от 30% до 60%.
С лета 2018 года Google также вводит ранжирование мобильных страниц по скорости загрузки. «Подвисающие», медленно загружающиеся сайты окажутся далеко от первых позиций в поисковой мобильной выдаче. Самое время задуматься о применении новых подходов, например, технологии совмещения свойств мобильного сайта и мобильного приложения, как Progressive Web App. Сайты на PWA работают даже в режиме оффлайн, сохраняются по 1 клику в смартфоне клиента (как обычное приложение), но при этом не тратят ресурсы смартфона (вес до 200 кб). Повышение конверсии при таком подходе дает более 50%. Больше о качествах и преимуществах Progressive Web App читайте в статье — «Progressive Web Apps: новая услуга для бизнеса, который стремится стать лидером в мобильной выдаче«.
Какими признаками обладает хороший мобильный сайт?
Контент должен удобно читаться, чтобы текст не приходилось увеличивать или бесконечно прокручивать вниз;
Как проверить сайт на мобильность?
Увидеть, как выглядит сайт на мобильном можно онлайн с помощью специальных сервисов. Достаточно вписать полный URL страницы и буквально через минуту тест будет готов. Большинство сервисов обрабатывают и страницы вместе с перенаправлениями.
В результате вы узнаете, как ваш страница выглядит на смартфоне, и возможные проблемы при ее просмотре. Вы получите полный отчет о проверке и рекомендации по устранению недочетов.
Лучшие сервисы для проверки страниц на «мобильность»
1. Google Mobile Friendly
Этот сервис проверяет любой сайт. Достаточно вписать его адрес в строку — и на вашем экране отобразиться, как будет выглядеть ваша страница на смартфоне. Кроме того, сервис даст общую оценку его оптимизации.
Для просмотра ошибок переходите во вкладку Google Webmaster Tools. Выбираете в пункте “Поисковый трафик” — “Удобство просмотра на мобильных устройствах”.
Затем нужно перейти к тесту с самого начала, ввести домен и ознакомиться со всеми рекомендациями в пункте “Как сделать страницу удобной для мобильных”.
2. Яндекс Вебмастер
Это инструмент для проверки мобильных страниц. Здесь можно проверить лишь собственный сайт. Прежде, чем начать проверку, вам нужно будет подтвердить права на него. Он также показывает, как будет выглядеть сайт на телефоне и проверяет его по 6 пунктам соответствия требованиям адаптации к мобильным устройствам:
3. Mattkersley
Тестирование доступно для всевозможных размеров экранов с разным расширением. Уже за несколько секунд после начала теста можно будет наглядно посмотреть, как именно выглядят ваши страницы на разных экранах.
4. Bing
Этот сервис, в отличие от двух предыдущих, отображает, как сайт будет выглядеть не только на андроиде, но и на смартфоне с операционной системой Windows. Помимо выше указанных параметров, он проверяет сайт дополнительно еще по 4 пунктам:
5.Responsinator
Этот сервис, в отличие от других, не дает оценки, но показывает сайт в разных расширениях для 6 разных устройств на IOS и Android.
6.Ipadpeek и iPhone Tester
Эти сервисы позволяют проверить свой сайт прямо с мобильного устройства.
7.Screenfly
Позволяет тестировать сайт на экранах разных телефонов, включая HTC, LG, BlackBerry и Samsung.
8.Gomez
Очень популярный сервис, который, помимо картинок, также показывает аналитику и подсказывает, что и как можно улучшить, чтобы сайт отображался на экране мобильного правильно.
9.Testmysite
Этот сервис проверяет сайт не только на адаптивность, но и на скорость загрузки ваших страниц на мобильном устройстве. Именно из-за длительной загрузки теряется половина пользователей.
Для получения отчета вам нужно будет указать адрес электронной почты, на которую придет письмо не только с отчетом, но и рекомендациями, как ваш сайт можно улучшить.
10. Responsivedesign
Он дает отличную возможность просмотреть отображение страниц на телефоне, планшете, ноутбуке и настольном компьютере. Все, что нужно сделать – это ввести адрес сайта и подождать меньше минуты.
http://ami.responsivedesign.is
Выводы
Для проверки своего сайта не ограничивайтесь только онлайн-сервисами. Адаптировав свой сайт, попросите знакомых выполнить определенные задачи и протестировать его. Проанализируйте их отзывы: насколько все им было понятно, как быстро загрузился сайт, с легкостью ли они нашли то, что искали.
Если необходимо увеличить скорость загрузки мобильного сайта, используйте новую технологию Progressive Web Apps.
Используя данные аналитики, фидбэк от пользователей и отзывы ваших знакомых, вы сможете понять, насколько хорош и удобен ваш сайт и довести его до совершенства.