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

Mobile-Friendly

Сервис под названием Mobile-Friendly покажет насколько сайт оптимизирован под мобильные устройства и какие есть ошибки в плане оптимизации:

Ссылка на сервис — google.com/webmasters/tools/mobile-friendl.

PageSpeed Insights

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

Сервис называется просто — PageSpeed Insights.

Ссылка на сервис — developers.google.com/speed/pagespeed/insights.

WebPage Test

Проверку загрузки сайта правильно бы проводить для разных устройств и с разных регионов. Сделать проверку можно используя WebPage Test.

Сервис абсолютно бесплатный.

Ссылка на сервис — webpagetest.org.

ScreenFly

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

Инструмент бесплатный.

Ссылка на сервис — quirktools.com/screenfly.

Adobe Edge Inspect

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

Если использовать специально созданное для открытия сайта на разных устройствах приложение под названием Adobe Edge Inspect, задача упрощается.

Инструмент бесплатный.

Ссылка на приложение — adobe.com/ru/products/edge-inspect.html.

Приложение кросс-платформенное.

BrowserStack

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

Инструмент платный.

Ссылка на сервис — browserstack.com.

Bing Mobile Test

Проверить бесплатно сайт на соответствие требованиям мобильных устройством можно посредством инструмента Mobile Test от поисковой системы Bing.
Ссылка на сервис — bing.com/webmaster/tools/mobile-friendliness

www.megaindex.org

Дружелюбность сайта мобильным устройствам

Адаптивность к мобильным устройствам оценивается по различным параметрам. Важно проверить мобильную версию сайта не только в плане корректного отображения, стоит учесть и другие факторы:

• отсутствие анимации, «тяжелого» дизайна и картинок;
• скорость загрузки ресурса (должна быть минимальной);
• отсутствие необходимости горизонтальной прокрутки;
• отсутствие Silverlight-плагинов и Java-апплетов;
• простая навигация по сайта;
• в коде прописан мета-тег viewport.

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

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

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

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

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

Переход в режим разработчика в браузере

Более оптимальный способ проверить мобильную версию сайта (Google или «Яндекс», как впрочем и другие поисковые системы выделяют адаптивность в списке важнейших факторов, влияющих на ранжирование) — это перейти в режим разработчика в браузере. Способ работает подобным образом с несколькими браузерами:

• Mozilla: перейти в режим разработчика можно, выбрав опцию «Адаптивный дизайн» в меню «Разработка»; нажав комбинацию Ctrl + Shift + M; кликнув по кнопке «Режим адаптивного дизайна» на панели инструментов веб-разработчика;
• Chrome: переход в мобильный режим осуществляется нажатием функциональной клавиши F12, затем следует выбрать значок мобильной версии (смартфон в левом верхнем углу появившегося окна).

В Opera переход в режим разработчика для проверки мобильной версии осуществляется нажатием комбинации Ctrl+Shift+i, но есть и другой способ. Специальная версия браузера — Opera Mobile Classic Emulator — позволяет разносторонне оценить мобильный дизайн. Версии программы существуют для основных операционных систем.

Эмуляторы мобильных устройств: Android Studio и Apple Xcode

Проверить мобильную версию сайта («Яндекс» и Google) можно при помощи эмуляторов мобильных устройств, которыми для Android и Apple являются соответственно Android Studio или Apple Xcode.

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

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

Веб-сервисы проверки мобильного дизайна

Существуют и более простые способы проверить мобильную версию сайта . Например, онлайн-сервис Responsinator позволяет оценить корректность отображения ресурса на мобильных устройствах и удобство пользования сайтом со стороны пользователя. Ресурс отображает сайт в том виде, как он выглядел бы на шести различных устройствах на базе Android или Apple и в нескольких ориентациях.

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

Другие ресурсы, позволяющие проверить мобильную версию сайта, дополнительно оценивают адаптивность, а не только показывают, как выглядела бы площадка на различных устройствах. Самые авторитетные сервисы: Google Mobile Friendly и «Яндекс ВебМастер» (проверка веб-страниц). Оценивают оптимизацию сайта для мобильных устройств также средство проверки Bing или, например, Mobile Checker от W3C.

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

Итак, оценить адаптивность веб-ресурса можно несколькими способами: начиная от тестирования на реальных смартфонах, планшетах или других мобильных устройствах или изменения размеров окна веб-браузера, проверки в эмуляторах или в режиме разработчика веб-браузеров и заканчивая использованием сервисов от «Яндекс» и «Гугл». Проверить мобильную версию сайта всесторонне очень просто, а это позволит внести необходимые правки и улучшить позиции сайта в поисковой выдаче.

autogear.ru

Проверяем качество мобильной вёрстки с помощью Google Chrome

Для разработчиков у Google есть отличный инструмент для имитации мобильных устройств. Этот инструмент встроен в браузер Google Chrome. Для доступа к нему нужно нажать F12 в браузере (перейти в режим разработчика) и нажать на значок смартфона:

Страница преобразуется в режим переключения устройства, где вы сможете выбрать одно из популярных мобильных устройств, тип сети (GPRS, 2G, 3G, 4G и т.д.), указать строгие параметры дисплея. Это позволяет имитировать работу сайта на конкретных мобильных девайсах. К числу доступных устройств относятся различные версии iPad, iPad Mini, iPhone, BlackBerry, Google Nexus, HTC, LG, Nokia, Samsung Galaxy и некоторых других популярных устройств.

Выбрав определенный девайс вы сможете проверить сайт на мобильном устройстве. Например, отображение главной страницы сайта «Нубекс» на iPad 3:

И на Samsung Galaxy S4:

Здесь вы сможете не только увидеть отображение сайта на том или ином девайсе, но и полноценно работать с сайтом, будто перед вами находится нужный гаджет. Несомненно, этот инструмент является просто незаменимым при разработке мобильной версии сайта, но как будет отображаться ваш сайт на реальных устройствах — нужно проверять на реальных устройствах. Особенно это важно, если нужно проверить отображение сайта в «родных» браузерах (Safari — для iPad/iPhone, IE — для Windows Phone и т.д.).

nubex.ru

Дружелюбность сайта мобильным устройствам

Адаптивность к мобильным устройствам оценивается по различным параметрам. Важно проверить мобильную версию сайта не только в плане корректного отображения, стоит учесть и другие факторы:

• отсутствие анимации, «тяжелого» дизайна и картинок;
• скорость загрузки ресурса (должна быть минимальной);
• отсутствие необходимости горизонтальной прокрутки;
• отсутствие Silverlight-плагинов и Java-апплетов;
• простая навигация по сайта;
• в коде прописан мета-тег viewport.

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

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

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

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

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

Переход в режим разработчика в браузере

Более оптимальный способ проверить мобильную версию сайта (Google или «Яндекс», как впрочем и другие поисковые системы выделяют адаптивность в списке важнейших факторов, влияющих на ранжирование) — это перейти в режим разработчика в браузере. Способ работает подобным образом с несколькими браузерами:

• Mozilla: перейти в режим разработчика можно, выбрав опцию «Адаптивный дизайн» в меню «Разработка»; нажав комбинацию Ctrl + Shift + M; кликнув по кнопке «Режим адаптивного дизайна» на панели инструментов веб-разработчика;
• Chrome: переход в мобильный режим осуществляется нажатием функциональной клавиши F12, затем следует выбрать значок мобильной версии (смартфон в левом верхнем углу появившегося окна).

В Opera переход в режим разработчика для проверки мобильной версии осуществляется нажатием комбинации Ctrl+Shift+i, но есть и другой способ. Специальная версия браузера — Opera Mobile Classic Emulator — позволяет разносторонне оценить мобильный дизайн. Версии программы существуют для основных операционных систем.

Эмуляторы мобильных устройств: Android Studio и Apple Xcode

Проверить мобильную версию сайта («Яндекс» и Google) можно при помощи эмуляторов мобильных устройств, которыми для Android и Apple являются соответственно Android Studio или Apple Xcode.

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

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

Веб-сервисы проверки мобильного дизайна

Существуют и более простые способы проверить мобильную версию сайта . Например, онлайн-сервис Responsinator позволяет оценить корректность отображения ресурса на мобильных устройствах и удобство пользования сайтом со стороны пользователя. Ресурс отображает сайт в том виде, как он выглядел бы на шести различных устройствах на базе Android или Apple и в нескольких ориентациях.

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

Другие ресурсы, позволяющие проверить мобильную версию сайта, дополнительно оценивают адаптивность, а не только показывают, как выглядела бы площадка на различных устройствах. Самые авторитетные сервисы: Google Mobile Friendly и «Яндекс ВебМастер» (проверка веб-страниц). Оценивают оптимизацию сайта для мобильных устройств также средство проверки Bing или, например, Mobile Checker от W3C.

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

Итак, оценить адаптивность веб-ресурса можно несколькими способами: начиная от тестирования на реальных смартфонах, планшетах или других мобильных устройствах или изменения размеров окна веб-браузера, проверки в эмуляторах или в режиме разработчика веб-браузеров и заканчивая использованием сервисов от «Яндекс» и «Гугл». Проверить мобильную версию сайта всесторонне очень просто, а это позволит внести необходимые правки и улучшить позиции сайта в поисковой выдаче.

fb.ru

Бесплатные

Mobile Friendly. Данное приложение создано компанией Гугл специально для того, чтобы проверить оптимизирован ли веб-ресурс под смартфоны и прочие гаджеты.

Responsinator. Благодаря данному приложению вы легко сможете увидеть, как выглядит сайт на Kindle, iPad, Android, iPhone.

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

Opera Mini Simulator. Эмулятор от компании Opera содержит весьма большую базу мобильных гаджетов. Единственным его недостатком можно считать отсутствие режима онлайн, то есть для тестирования вашего ресурса вам придется скачать и установить нужное ПО.

Gomez. Оценивает совместимость вашего ресурса с мобильными устройствами по 30 параметрам, что позволяет получить наиболее полную оценку. Для бесплатного использования следует ввести свои контактные данные.

MobiReady. Отличный инструмент для тестирования, который оценивает адаптивность дизайна. Проверка основана на лучших стандартах W3C (Консорциума Всемирной паутины).

Mobile Phone Emulator и Screenfly. Схожие сервисы, которые тоже дают возможность просматривать состояние веб-ресурса на экранах любых гаджетов.

Платные

CrossBrowserTesting. Проверяет на 130 различных браузерах и 25 операционках, включая: Blackberry, Android, iPad, iPhone. За его использование вам надо будет ежемесячно платить по 29.95$.

BrowserStack. Обеспечивает быстрый доступ к огромной базе браузеров. Стоит до 19$ за один месяц, но есть и бесплатная версия.

Browshot. Предназначен для снятия скриншотов с Android, iPad, iPhone. За пять скриншотов вам придётся заплатить 1 доллар.

Perfecto Mobile. Даёт доступ к базе планшетов и сотовых телефонов, что позволяет вам видеть, насколько качественна оптимизация на каждом типе устройств. За его использование нужно платить до 15 долларов за сутки.

Multi-Browser Viewer. Кросс-браузерное приложение, содержащее мобильные эмуляторы и браузеры для проведения тестирования в любом формате. Стоит до 140 долларов, есть и бесплатная демо-версия.

DeviceAnywhere. Прекрасный инструмент, дающий возможность точечно проверять веб-контент, тестируя ресурс в реальном времени. Может быть как платным (по 100 долларов в месяц), так и бесплатным.

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

abdullinru.ru

Почему вы должны заботиться о оптимизации своего мобильного сайта

В конце 2016 года более 3,2 миллиарда человек имели доступ к Интернету, и около 2 миллиардов из них использовали для этого мобильные устройства. Согласно аналитическим прогнозам, в ближайшие 5 лет число людей, которые используют только мобильные устройства для интернет-активности, будет ежегодно увеличиваться на 25 процентов.

Поэтому очень важно проверить, поддерживает ли ваш сайт мобильный контент.

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

• Как быстро загружается сайт?
• Является ли контент привлекательным?
• Привлекает ли сайт внимание к основным моментам вашего бизнеса?
• Предлагает ли сайт хорошие решения?
• Является ли сайт легким и понятным для навигации?
• Вызывает ли целевая страница интерес к другим страницам вашего сайта?

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

Даже если вы ответили «Да» на все вопросы, вы должны обратить внимание на следующие факторы оптимизации производительности мобильных устройств:

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

Ограничительная загрузка. Вы должны убедиться, что пользователи не загружают все, что повлияет на скорость сайта.

Реагирующая платформа помогает ускорить прототипирование мобильных функций и макетов.

Быстрое время загрузки дает вам серьезное конкурентное преимущество. На время загрузки влияют следующие действия:

• Сокращение зависимостей
• Уменьшить обработку на стороне клиента
• Уменьшить размер изображения
• Уменьшить содержание
• Избегайте перенаправления m-точек
• Подберите правильное решение для хостинга
• Ограничить HTTP-запросы
• Активировать сжатие

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

Тестирование соединения между компьютерной и мобильной версией сайта

Тестирование перенаправления:

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

Проверка заголовка Vary-HTTP. Если ваши сайты динамически обслуживаются, вы должны настроить заголовок Vary-HTTP, чтобы сообщить Google и браузерам, что пользовательский агент отличается от HTML.

Проверка тегов rel = alternate / canonical. Если на ваших сайтах есть отдельный URL-адрес, рабочие страницы должны быть настроены с помощью тега rel = «alternate», указывающего на мобильную версию этой страницы. Мобильные страницы должны быть настроены с помощью тега rel = “canonical”, указывающего на компьютерную версию этой страницы.

Тестирование технических проблем

Карта мобильного XML:

• Все мобильные страницы должны быть отправлены в Google через XML-карту сайта в Инструментах Google для веб-мастеров
• Мобильные страницы должны быть отделены от компьютерных страниц

Скорость сайта для мобильных устройств. У мобильных пользователей, вероятно, будет ограниченное время на ваше приложение, и поэтому нужно чтобы оно быстро загружалось. Google page speed tool, WebPagetest – полезные инструменты для измерения скорости сайта.

Хранение и данные:

• Убедитесь, что программный код недоступен
• Пользователь не очищает кеш, поэтому убедитесь, что ничего не сломается.

User Experience (UX) тестирование

Просмотр веб-сайта:

Смартфоны: iPhone (iOS), Samsung Galaxy (Android), Nexus (другой Android) и Windows Phone (Windows).

Планшеты: iPad (iOS), Samsung Galaxy Tab в разных размерах (Android), Kindle Fire (Amazon) и Asus Transformer Book (Windows).

Вы должны использовать такие инструменты, как Google Analytics , для идентификации устройств, которые часто используются вашими посетителями.

Размер ссылок. Поля между ссылками должны быть не менее 28×28 пикселей. Таким образом, чтобы на ни можно было легко щелкнуть пальцем.

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

Viewport позволяет мобильным браузерам изменять размеры страниц, чтобы они идеально соответствовали устройствам. Вот почему вам нужно настроить его.

Всплывающие окна. Существует две причины не использовать всплывающие окна в мобильной версии вашего сайта:

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

Розположение елементов. Самые важные элементы должны быть наверху. Размещение других элементов должно иметь смысл.

Навигация. Обеспечьте доступ всех страниц мобильного сайта посетителями.

Контент

• Для каждой настольной страницы должна быть эквивалентная мобильная страница
• Количество мобильных страниц может быть больше, чем страниц компьютерной версии, потому этому часто проще перемещаться по мобильным сайтам.
• Убедитесь, что в вашем сайте нет лексических и грамматических ошибок.
• Если ваш сайт предназначен не только для местных посетителей, вы должны провести тестирование локализации, чтобы проверить соответствующие языковые и культурные аспекты для определенного региона.
• Ненужные изображения следует удалить.

Видео

• Убедитесь, что видео загружены и запущены правильно.
• Используйте видеопроигрыватель HTML5, потому что его легко обрабатывать и облегчать.

Страница результатов поисковой системы, SERP:

Убедитесь, что ваш мобильный URL-адрес удобен для пользователя и содержит ключевое слово

Google отключает мобильные мета-описания примерно на 120 символов, поэтому он не должен превышать этот предел.

Хотя Google дает вам примерно 70 символов (512 пикселей) в заголовке вашей страницы, ширина экрана заставляет разбивать заголовок страницы на две строки. Вот почему вы должны убедиться, что каждое название страницы выглядит хорошо на двух строках.

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

10 советов по оптимизации мобильной версии вашего сайта

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

• Обеспечьте совместимость с функциями смартфонов и планшетов
• Проверьте нормальное время загрузки
• Сделайте навигацию по сайту максимально простой
• Убедитесь, что кнопки достаточно велики для людей с большими пальцами
• Нет больших блоков текста. Используйте маркеры и короткие предложения.
• Не используйте Flash.
• Не используйте всплывающие окна.
• Убедитесь, что изображения имеют оптимальный размер.
• Проверьте, чтоб ваш номер телефона находился на расстоянии одного клика от набора номера
• Убедитесь, что веб-сайт может получить доступ к вашему местоположению через GPS

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

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

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

• Тестирование обеспечивается в реальной среде с очень реальными условиями
• Тестирование осуществляется на реальной ОС с помощью настроек производителя
• Реальная производительность устройства проще по сравнению с другими виртуальными опциями
• Легкость тестирования совместимости
• Легкая репликация ошибок
• Разрешение экрана и яркость можно легко протестировать в нескольких сценариях
• Разрешается тестировать такие функции, как push-уведомление, геолокация и ориентация, подключение Wi-Fi
• Функционирование в условиях входящих прерываний, таких как SMS и звонки, может быть проверено
• Функционирование в условиях низкого заряда батареи может быть проверено

К сожалению, мир, в котором мы живем, не идеален. Вот некоторые недостатки тестирования на реальных устройствах:

• Существует множество мобильных устройств
• Тестирование на реальных устройствах является дорогостоящим и трудоемким
• Даже если у вас есть широкий спектр мобильных устройств в вашей компании, сотрудники, находящиеся в других офисах или работающие удаленно, не будут иметь доступа ко всем устройствам
• Обслуживание устройства также требует затрат

Онлайн-тестирование мобильных устройств на реальных устройствах

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

Keynote Mobile Testing (former Keynote DeviceAnywhere)

Keynote Mobile Testing – облачное решение, имеющее полную библиотеку реальных мобильных устройств.

Конечно, это гораздо больше, чем просто инструмент для тестирования мобильных страниц. Но если мы рассмотрим Keynote Mobile Testing как инструмент такого рода, следует упомянуть следующие достоинства:

• Реальные сети мобильной связи и Wi-Fi
• День поддержки для новых устройств
• Он автоматически генерирует список устройств на основе критериев охвата: память, процессор, производители, версия ОС, оператор и т. Д.
• Подробная база данных функций устройства и операционной системы
• Простой в использовании мастер, который поможет вам быстро определить, какие устройства приоритетны для разработки и тестирования.

Некоторые недостатки Keynote Mobile Testing:

• Keynote Mobile Testing не проверяет работоспособность устройства
• Поддержка резервирования устройств отсутствует

BrowserStack

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

Вот некоторые особенности BrowserStack:

• Широкий спектр iOS и Android: версии iOS с iOS 3 до iOS 10, Android – от Donut (1,6) до Nougat (7.1)
• Быстрые проверки с помощью скриншотов
• Веб-аналитика для вашего сайта
• Отлаживайте свои мобильные сайты с помощью инструментов разработчика Chrome на iOS и Android.
• Доступ к дополнительным устройствам по географическим параметрам
• Природные жесты и взаимодействия
• Опция тестирования безопасности

Некоторые слабые стороны BrowserStack:

• Кажется, что производительность сервера ухудшается с течением времени, когда многие пользователи тестируют
• BrowserStack имеет тенденцию быть довольно дорогим, и бесплатный вариант очень ограничен.
• Способ имитации 2-х пальцевого нажатися и выхода на телефоны и планшеты

Perfecto Mobile Continuous Quality Lab

Perfecto Mobile Continuous Quality Lab – еще одна облачная платформа, в которой есть не только опция проверки мобильных страниц. В контексте тестирования мобильной версии вашего сайта должны быть определены следующие преимущества:

• Тестирование в режиме реального времени на более чем 500 различных устройствах
• Для тестирования доступны не только Android и iOS, но и платформы WinPhone, Symbian и Blackberry
• Совместное использование устройств
• Одновременное тестирование автоматизации на нескольких устройствах
• Поддержка скриншотов

Некоторые из недостатков Perfecto Mobile Continuous Quality:

• Нечеткое (часто нечитаемое) изображение
• Длительное время отклика
• Использование бесплатной пробной версии ограничено 60 минутами.

Тестирование с помощью мобильных эмуляторов

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

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

Люди часто путают «эмулятор» и «симулятор». Хотя оба они звучат почти одинаково, между ними все еще есть разница.

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

С другой стороны, симулятор может настроить аналогичную среду, такую как ОС оригинального устройства, но не пытается реплицировать свое оборудование.

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

Рассмотрим некоторые часто используемые эмуляторы

MobileMoxie

MobileMoxie Emulator является неотъемлемой частью MobileMoxie Marketing Toolset, которая помогает вам предоставлять клиентам отличные мобильные решения. Он очень простой в использовании. Просто введите URL-адрес веб-сайта в соответствующее поле.

Windows Phone Emulator

Эмулятор Windows Phone – это специальная мобильная среда, где вы можете тестировать, просматривать и отлаживать приложения для Windows Phone и использовать браузер для проверки веб-сайтов.

Некоторые достоинства эмулятора Windows Phone:

• Полномасштабный SDK с эмулятором устройства
• Множественные разрешения экрана
• Инструмент скриншотов
• Моделирование акселерометра

Ограничения эмулятора Windows Phone:

• Он работает только с Windows.
• Уровень яркости эмулятора всегда «Высокий»,
• Камера и видео используются с ограничениями

Android Studio emulator

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

Преимущества эмулятора Android Studio:

• Он работает на Windows, Mac OS X, Linux
• Эмулятор Android Studio может передавать информацию быстрее, чем при использовании подключенного аппаратного устройства
• Унифицированная среда, в которой могут использоваться все устройства Android

Некоторые недостатки эмулятора Android Studio:

• Если вам просто нужен браузер для проверки мобильных веб-сайтов, вы должны загрузить много ненужных вещей
• Некоторые технические ограничения: рекомендуется 8 ГБ оперативной памяти; Рекомендуется 4 ГБ свободного места на диске.

Opera Mobile Emulator

Opera Mobile Emulator – это живая демонстрация браузера мобильного телефона Opera, которая функционирует так же, как при установке на телефон. Также доступны дополнительные инструменты для отладки, такие как сочетания клавиш, селектор профилей и различные флаги командной строки.

Основные достоинства Opera Mobile Emulator:

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

Некоторые слабые места Opera Mobile Emulator:

• Вы можете проверить, как страницы выглядят только в браузере Opera.
• Меньше поддержки медиа

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

Хорошо известно, что Google индексирует мобильные и не мобильные мобильные сайты. Вот почему вы должны использовать специальные инструменты, чтобы проверить, соответствует ли ваш сайт общепринятым критериям.

Как правило, все эти инструменты просты в использовании. Все, что вам нужно сделать, просто введите URL-адрес вашей страницы в соответствующую форму.

Google’s Mobile-Friendly Test

Google Mobile-Friendly Test – это инструмент, который показывает, если Google считает вашу мобильную страницу мобильной или нет. Если ваш сайт проходит тест, вы увидите зеленое сообщение с надписью «Awesome! Эта страница мобильная ». Если это не пройдет, сообщение будет красным и скажет «Не для мобильных устройств».

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

mobiReady

MobiReady позволяет оценивать мобильную готовность вашего сайта с использованием передовых методов и стандартов. В бесплатном отчете представлены как оценка (от 1 до 5), так и углубленный анализ страниц, чтобы определить, насколько хорошо ваш сайт работает на мобильном устройстве.

Основными достоинствами mobiReady являются:

• Подробные отчеты об ошибках
• Тестирование на сайте
• Инструмент визуализации, чтобы увидеть, как выглядит ваш сайт на экране мобильного телефона.
• Тесты W3C mobileOK
• Он советует улучшить мобильную готовность вашего сайта

W3C mobileOK checker service

W3C mobileOK checker – бесплатный сервис W3C (всемирный консорциум для веб-стандартов), который помогает проверить уровень мобильности веб-документов и, в частности, утверждать, является ли веб-документ «мобильным».

Тесты определены в спецификации mobileOK Basic Tests 1.0.Только если веб-возраст пройдет все тесты, он получит статус «mobileOK».

Другие варианты, которые могут быть проверены:

• Валидация разметки
• CSS stylesheets,
• Поиск неработающих ссылок
• RSS/Atom-каналы

Varvy

Varvy – это набор бесплатных инструментов для тестирования SEO, скорости и мобильных функций веб-сайта.

Основные возможности Varvy:

• Тест соответствия рекомендациям Google
• Оптимизация скорости страницы
• Широкий спектр советов и рекомендаций по оптимизации производительности веб-страницы

geteasyqa.com

Какими признаками обладает хороший мобильный сайт?

Контент должен удобно читаться, чтобы текст не приходилось увеличивать или бесконечно прокручивать вниз;

1. Элементы интерфейса должны быть контрастными. Если человек читает ваш контент на улице, где экран засвечен, он должен четко видеть текст, картинки и кнопки;
2. Мобильная версия не должна содержать Flash-элементы и излишнюю анимацию;
3. Недопустима горизонтальная полоса прокрутки;
4. Навигация должна быть максимально простой и последовательной;
5. Сайт должен быстро загружаться;
6. Тег viewport. При правильных настройках сайт будет отображаться на любых устройствах с любыми размерами экрана.

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

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

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

Лучшие сервисы для проверки страниц на «мобильность»

1. Google Mobile Friendly

Этот сервис проверяет любой сайт. Достаточно вписать его адрес в строку — и на вашем экране отобразиться, как будет выглядеть ваша страница на смартфоне. Кроме того, сервис даст общую оценку его оптимизации.

Для просмотра ошибок переходите во вкладку Google Webmaster Tools. Выбираете в пункте “Поисковый трафик” — “Удобство просмотра на мобильных устройствах”.

Затем нужно перейти к тесту с самого начала, ввести домен и ознакомиться со всеми рекомендациями в пункте “Как сделать страницу удобной для мобильных”.

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

2. Яндекс Вебмастер

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

• Наличие тега viewport;
• Горизонтальную прокрутку;
• Flash – элементы;
• Java – апплеты;
• Silverlight – плагины;
• Удобство чтения.

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

3. Mattkersley

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

4. Bing

Этот сервис, в отличие от двух предыдущих, отображает, как сайт будет выглядеть не только на андроиде, но и на смартфоне с операционной системой Windows. Помимо выше указанных параметров, он проверяет сайт дополнительно еще по 4 пунктам:

• Правильно ли настроено окно просмотра?
• Соответствует ли ширине экрана содержимое страницы?
• Читаемый ли текст?
• Достаточно ли крупны и удобны ссылки и кнопки на сайте.

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

5.Responsinator

Этот сервис, в отличие от других, не дает оценки, но показывает сайт в разных расширениях для 6 разных устройств на IOS и Android.

http://www.responsinator.com/

6.Ipadpeek и iPhone Tester

Эти сервисы позволяют проверить свой сайт прямо с мобильного устройства.

7.Screenfly

Позволяет тестировать сайт на экранах разных телефонов, включая HTC, LG, BlackBerry и Samsung.

8.Gomez

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

9.Testmysite

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

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

10. Responsivedesign

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

http://ami.responsivedesign.is

Выводы

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

Если необходимо увеличить скорость загрузки мобильного сайта, используйте новую технологию Progressive Web Apps.

Узнать больше о PWA

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

gravitec.net

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

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

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

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

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

1. Google Mobile Friendly

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

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

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

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

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

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

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

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

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

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

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

4. Mobile Checker от W3C

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

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

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

https://validator.w3.org/

5. Responsinator

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

http://www.responsinator.com/

UPD1: 20.07.2017:

6. Adaptivator

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

http://adaptivator.ru/

UPD2: 3.11.2017:

7. iloveadaptive.ru

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

www.iloveadaptive.ru

spark.ru