Сайт

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

21.09.1970

Содержание

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

Содержание статьи

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

Еще в 2015 году компания Google сообщила о том, что адаптация сайта под мобильные устройства влияет на позиции сайта. А с 2016 года и Яндекс объявил о мобильных изменениях поискового алгоритма. Это говорит о том, что поисковые системы выводят оптимизированные под мобильные устройства сайты выше, чем те, которые не имеют оптимизации.

Адаптация страниц под нужды мобильных пользователей просто необходима, так как это влияет еще и на конверсию посетителей. Многие отмечают, что адаптивность сайта повышает конверсию от 30% до 60%.

С лета 2018 года Google также вводит ранжирование мобильных страниц по скорости загрузки. «Подвисающие», медленно загружающиеся сайты окажутся далеко от первых позиций в поисковой мобильной выдаче. Самое время задуматься о применении новых подходов, например, технологии совмещения свойств мобильного сайта и мобильного приложения, как Progressive Web App. Сайты на PWA работают даже в режиме оффлайн, сохраняются по 1 клику в смартфоне клиента (как обычное приложение), но при этом не тратят ресурсы смартфона (вес до 200 кб).  Повышение конверсии при таком подходе дает более 50%. Больше о качествах и преимуществах Progressive Web App читайте в статье — «Progressive Web Apps: новая услуга для бизнеса, который стремится стать лидером в мобильной выдаче«.

Подключить услугу

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

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

  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

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

 

Вас также может заинтересовать

5 бесплатных сервисов для проверки адаптивности сайта

Время прочтения 6 минут

Почему так важно проверять сайты на адаптивность? По данным Яндекс.Метрики, количество людей, пользующихся мобильными устройствами в России, приближается к 50% и постоянно растёт.

 

В связи с этим поисковые системы стремятся сделать мобильную выдачу удобнее для пользователей. В феврале 2015 г. Google заявляет, что наличие адаптивной или мобильной версии положительно сказывается на ранжировании. Ровно через год, в феврале 2016-го, Яндекс объявляет то же самое.


Какими качествами должен обладать адаптивный сайт

  • Отсутствие горизонтальной прокрутки.
  • Быстрая загрузка, отсутствие тяжелых картинок.
  • Корректно прописан метатег viewport.
  • Интерактивные элементы (ссылки, кнопки, формы и т.д.) не находятся слишком близко друг к другу.
  • Отсутствие Flash -элементов, Silverlight- плагинов.
  • Удобная навигация по разделам.
  • Контент (текст и картинки) адаптирован под размер экрана и читаются без увеличения.

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

    1. Google Mobile Friendly — https://search.google.com/test/mobile-friendly

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

 

Преимущества

  • Официальный сервис Google.
  • Указывает на конкретные ошибки.
  • Умеет сам определять наличие мобильной версии.

Недостатки

  • Нельзя посмотреть, как выглядит сайт при разных размерах экрана.
  • Показывает только первый экран, нельзя взаимодействовать с сайтом.

  1. Яндекс.Вебмастер Mobile Friendly
     — https://webmaster.yandex.ru/site/tools/mobile-friendly/

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

Преимущества

  • Официальный сервис Яндекса.
  • Указывает на конкретные проблемы в оптимизации.
  • Понимает, есть ли у сайта мобильная версия.
  • Проверить можно только свои сайты.
  • Нет возможности посмотреть, как выглядит сайт на разных экранах

Недостатки

  • Проверить можно только свои сайты.
  • Нет возможности посмотреть, как выглядит сайт на разных экранах

  1. Quirktools — http://quirktools.com/screenfly/

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

Преимущества

  • Можно выбрать из готового списка устройств или задать собственное разрешение
  • Можно взаимодействовать с сайтом

Недостатки

  • Не умеет определять наличие мобильной версии
  • Нет списка ошибок

    1. Iloveadaptive — http://iloveadaptive.com/

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

Преимущества

  • Есть возможность посмотреть, как выглядит сайт на разных операционных системах (IOS и Android)
  • Сам понимает, есть ли мобильная версия
  • Расширение для Google Chrome

Недостатки

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

  1. Adaptivator — http://adaptivator.ru/

 

Преимущества

  • Подводит общую оценку качеству оптимизации, дает советы по исправлению ошибок.
  • «Не видит» мобильную версию.
  • Нет возможности указать свой размер экрана.

Недостатки

  • «Не видит» мобильную версию.
  • Нет возможности указать свой размер экрана.

Вывод

При наличии доступа к сервисам веб-мастеров (Яндекс.Вебмастер или Google Search Console) проводить тест на адаптивность лучше всего с их помощью. Они отражают наиболее актуальные требования поисковых систем к вашему сайту.

Если же такой возможности нет, то можно воспользоваться http://iloveadaptive.com/ в связке с http://adaptivator.ru/, так как они дополняют друг друга по функционалу.

 

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

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

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

  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

Вывод

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

Поэтому всем, кто хочет быть ближе к клиенту и иметь больше посещений\лидов, рекомендую как можно быстрее адаптировать свои сайты. Задать мне вопрос — 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 инструментов для создания мобильных лендингов,  это поможет избежать несовместимости и других проблем. Если вы применяете особый подход или можете рассказать о каком-либо инструменте, просьба оставить комментарий.

19 инструментов проверки работы сайта в мобильных устройствах — E-pepper.ru

Всем привет! Наши коллеги из Shopolog.ru опубликовали отличную статью на тему Мобильная версия интернет-магазина: 10 практических советов — рекомендуем к прочтению. Кратким дополнением к ней хотели бы порекомендовать 19 способов проверки того, как ваш сайт будет выглядеть на экранах мобильных устройств. Теперь вы сможете быть абсолютно уверенными, что все элементы верстки будут точно на своих местах.
GoMoMeter. Сервис от Google, показывающий вам, как ваш сайт смотрится на смартфоне, и предоставляющий бесплатный отчет с персональными рекомендациями. Стоимость — бесплатно.
iPhone Tester. Эмулятор iPhone позволяющий проверить ваш сайт на экранах iPhone 3G и 4G, и IPod Touch. Просто введите адрес сайта, который вы хотите проверить в адресной строке. Использование бесплатно.
Ipad Peek. Этот популярный инструмент тестирования интерфейсов позволяет вам видеть, как ваш сайт выглядит на IPad или iPhone. Сервис бесплатен.
Screenfly. Позволяет просматривать ваш сайт на различных устройствах и экранах. Сервис бесплатен.
Mobile Phone Emulator. Эмулятор, позволяющий увидеть свой сайт на экранах различных мобильных телефонов, включая iPhone, HTC, LG, BlackBerry и Samsung. Бесплатен.
Responsinator. Поможет вам быстро получить информацию о том, как ваш сайт будет выглядеть на самых популярных устройствах: iPhone, iPad, Android, и Kindle. Тестирование бесплатно.
Matt Kersley’s Responsive Design Testing. Интересный инструмент для тестирования ве-сайтов при различных разрешениях. Бесплатен.
Browshot. Сервис для снятия скриншотов с iPhone, iPad, Android. Стоимость — $1 за 5 скриншотов.
Opera Mini Simulator. Бесплатный эмулятор от Opera, который содержит в себе довольно внушительную базу мобильных устройств.
Gomez. Сервис Гомес оценивает, насколько хорошо ваш сайт будет работать на мобильном телефоне. Вы сможете мгновенно получить оценку на основе глубокого анализа более 30 различных параметров. Сервис бесплатен после указания контактной информации.
MobiReady. Хороший инструмент тестирования сайтов, оценивающий готовность дизайна к отображению на экранах мобильных устройств. Проверка осуществляется на основании лучших отраслевых стандартов W3C. Сервис бесплатен.
W3C mobileOK Checker. Стандартный чекер от W3C.
CrossBrowserTesting. Позволяет проверить ваш сайт более чем на 130 версиях браузеров и 25 различных операционных систем, в том числе мобильных устройств, таких как: iPhone, iPad, Android, Blackberry, и другие. Стоимость использования начинается от $ 29.95 в месяц.
BrowserStack. Предлагает к услугам быстрый доступ к широкой базе браузеров, а также «живым» тестированиям. Стоимость от $ 19 в месяц.
Multi-Browser Viewer. Представляет из себя крос-браузерное приложение, которое содержит 11 мобильных браузеров и эмуляторов, а также 55 автономных браузеров и 88 различных разрешений для тестирования экрана браузера в разных форматах. Стоимость приложения $ 139,95.
Perfecto Mobile. Сервис позволяет получить доступ к широкий базе мобильных телефонов и планшетов, а также различных мобильных устройств. данная возможность позволит вам проверять совместимость сайт на каждом устройстве. Стоимость от $15 в сутки.
DeviceAnywhere. Инструмент для точечной проверки веб-контента на мобильных устройствах, позволяющее в режиме реального времени тестировать ваши сайты на работающих устройствах. Стоимость от бесплатной до $100 в месяц.

Как оптимизировать сайт для мобильных: 14 правил мобилопригодного сайта

Правила с примерами и пояснениями в удобном чек-листе для работы. Обновленный материал.

По уровню материал близок к основам, поэтому будет полезен начинающим специалистам.

Мобилопригодным считается сайт, на котором пользователю удобно работать с мобильных устройств. Как показывает исследование PwC от 2019 года, 79% россиян покупают онлайн с мобильных.

В 2020 году мобилопригодность — обязательное требование к сайтам, оптимизируете вы ресурс для Яндекса или для Google. Учитывать мобилопригодность страниц в ранжировании Яндекс начал с февраля 2015 года, когда ввел алгоритм «Владивосток». Google начал тестировать Mobile-first index в 2016, а до конца 2020 обещает перевести на него все сайты. Этот индекс подразумевает, что независимо от устройства выдача будет мобильной.

По словам представителя Google Джон Мюллера, перевод сайта в Mobile-first index зависит от факторов:

  • способен ли Google просканировать весь контент на страницах ресурса;
  • может ли этот контент отображаться на мобильных устройствах в принципе.

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

Выбор адаптивного шаблона сайта

Для придания сайта мобильной адаптивности используют один из вариантов: мобильную версию, адаптивную или динамическую верстку — RESS (Responsive Design + Server Side).

Мобильная версия

Это отдельный сайт на поддомене. Сервер учитывает user-agent устройства пользователя, определяет, что тот зашел со смартфона, и перенаправляет на версию для мобильного просмотра. К URL-адресу в начало обычно добавляется «m.».

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

<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.site.com/page.html">
Мобильная и полная версия на смартфоне

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

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

Адаптивная верстка

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

<meta name="viewport" content="width=device-width, initial-scale=1">.

Если не установить тег, вся десктопная область просмотра уменьшится в масштабе и уместится на экране.

Версия без адаптации и с адаптацией для мобильного

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

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

Почитать по теме:
Тег viewport: как настроить область просмотра в адаптивном дизайне

RESS

Технология адаптирования сайта для мобильного на стороне сервера. В зависимости от типа устройства сервер отправляет пользователю один из вариантов кода HTML и CSS.

Отображение сайта со смартфона

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

Минусы: проблемы с непопулярными моделями гаджетов, реализация дороже и сложнее. Веб-мастера часто выводят и мобильный, и десктопный шаблоны в коде и закрывают ненужную версию «display: none». Это ошибка, из-за которой загрузка станет медленнее, а бот может некорректно отображать сайт.

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

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

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

Скачайте краткий чек-лист на свой на компьютер или скопируйте в Google Docs, чтобы отмечать выполнение в своем файле.

Открыть и скачать чек-лист мобилопригодного сайта от PR-CY.ru

Пункты из чек-листа с пояснениями и примерами:

1. Реализация отображения на мобильных

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

2. Сайт доступен для роботов

Сделать ресурс доступным для индексирующих роботов нужно в файле robots.txt. Разрешите сканирование CSS и JavaScript, от них зависит, будет ли сайт корректно отображаться на мобильных.

3. Ответ 200 ОК

Если сервер отправляет ответ с HTTP-кодом 200 OK, значит со страницей все в порядке: она доступна для просмотра и корректно отображается в выдаче.

Проверить коды ответов сервера и найти ошибки можно с помощью проверки внутренних страниц в Анализе сайта.

Проверка внутренних страниц
Почитать по теме:
Что означает код ответа сервера
4. Поддержка всех технологий

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

5. Быстрая загрузка

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

Сколько секунд должен загружаться сайт?
Конкретных лимитов нет, скорость загрузки сайта зависит и от скорости интернета, поэтому у разных пользователей она может несколько различаться. Джон Мюллер из Google в 2016 году называл около 2-3 секунд для ориентира.

Проверить скорость загрузки можно инструментом «Проверка скорости сайта», он посчитает скорость и даст советы по оптимизации.

Почитать по теме:
Как уменьшить вес сайта и ускорить загрузку страниц
Проверка скорости загрузки

Для ускоренного просмотра можно подключить страницы AMP от Google или Турбо от Яндекса: оптимизаторы спорят о всех за и против, так что можно попробовать на своем сайте и отключить, если результат не понравится.

6. Отдельный фавикон

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

Размеры фавиконов и коды для установки есть в руководстве.
    Иконки сайтов на экране смартфона
7. Только вертикальная прокрутка

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

8. Крупные значки

Сложно попасть пальцем в мелкий значок на экране телефона. Средняя ширина подушечки пальца — около 10 мм, поэтому рекомендуем делать кликабельные элементы крупными и размещать их на расстоянии друг от друга, чтобы избежать ложных нажатий. В рекомендациях по интерфейсу приложений на Android для активных элементов советуют ширину не менее 7 мм или 48 пикселей CSS на сайте.

Крупные элементы на сайте
9. Крупный шрифт

Мелкий шрифт читать неудобно — приходится масштабировать страницу, чтобы не напрягать зрение. Сделайте шрифт крупным, увеличьте высоту строки пропорционально размеру шрифта — около 140% от кегля текста. Для просмотра с устройств на iOS для обычного текста рекомендуют размер 17pt, для Android — 13sp. Исследование Baymard Institute показывает, что оптимальная длина строки — 50-60 символов с пробелами. Ориентируйтесь на аудиторию, если ваши пользователи — люди пенсионного возраста, им будет удобно читать текст покрупнее.м

Текст на странице с рецептами
10. Контрастный текст

Для текста рекомендуем подбирать не строго контрастные цвета: от темного-серого текста на белом фоне глаза устают меньше, чем от черного на белом. Инструмент Color Contrast Checker поможет подобрать сочетание цветов текста и фона.

Фрагмент работы с инструментом
11. Всплывающие окна не закрывают контент

У пользователей кроме баннерной слепоты развивается pop-up-слепота — желание закрыть всплывающее окно, не читая содержимого. На мобильном интерактивные элементы и всплывающие окна мешают читать полезный контент, а на некоторых устройствах их сложно закрыть: неудобно попасть на крестик или он не умещается в интерфейс. Рекомендуем скрыть такие окна и оставить только необходимые для общения с продавцом.

Иконки мессенджеров убраны под панель
12. Упрощенная регистрация

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

Быстрая регистрация
13. Использование геоданных

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

    Автозаполнение города
    14. Упрощенная связь с компанией

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

    <a href="tel:+74952235555">Call me</a>

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

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

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

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

    Фрагмент результатов проверки

    Проверить сайт можно прямо в SERP: если ввести в поисковик «mobile friendly», появится поле для ввода адреса сайта.

    Проверка в SERP

    Анализ сайта от PR-CY проверяет ресурс по более 70 параметрам, включая и мобилопригодность. К каждому пункту проверки дает пояснение и совет. Для проверки оптимизации хватит функциональности бесплатной версии.

    Фрагмент результатов проверки

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

    Фрагмент результатов проверки

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

    Способы адаптации и оптимизации сайта под мобильные устройства — Plerdy

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

    По данным Statcounter, в мире более половины пользователей ищут что-то в интернете именно с мобильных. Google, в свою очередь, в руководстве для занятых руководителей The Mobile Playbook Google утверждает, что 40% пользователей уйдут на сайт конкурента, если у него есть хорошая мобильная версия. Неслучайно не оптимизированная мобильная версия или ее отсутствие снижает рейтинг интернет-ресурса в поисковой выдаче этого поисковика.

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

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

    Если ваш сайт адаптирован под мобильные устройства, но вы не уверены правильно ли выполнена оптимизация, воспользуйтесь специальной проверкой от Google. Просто введите URL вашего сайта на сайте бесплатного сервиса Mobile-Friendly Test и нажмите кнопку “Проверить страницу”. Сервис оценить ваш сайт, а также предоставит полезные советы по его улучшению.

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

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

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

    Быстрый адаптивный дизайн сайта

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

    1. Знакомство с инструкциями Bootstrap — популярного фреймворка для разработки адаптивных сайтов. Собственно в них и расписаны все последующие шаги.
    2. Подключение CSS, а если этого требуют компоненты JS и jQuery.
    3. Проверка страниц на соответствие последним стандартами дизайна и разработки, например, используется ли HTML5 и метатег viewport, который отвечает за правильное отображение видимой части страницы на экранах разного размера.

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

    Преимущества адаптивного дизайна:

    • Не нужно создавать два отдельных макета. При адаптивном дизайне достаточно одного макета, который автоматически будет приспосабливаться к любым размерам экранов.
    • Отсутствие лишней нагрузки на SEO-специалистов: не нужно создавать отдельные ссылки на страницы, так как мобильная версия всегда имеет приставку .m или .mobile; добавлять мета-теги rel=«alternative» и rel=«canonical», объясняющие поисковой системе, что контент в мобильной версии не был украден и продублирован; волноваться о правильно настроенных редиректах между версиями.
    • Управление одним сайтом, а не двумя. Если нужно внести изменения, то они автоматически станут видны для пользователей, которые посещают ваш ресурс как с десктопа, так и с мобильных устройств.
    • Google любит адаптивные сайты. И вот почему: адаптивные сайты быстрее сканируются роботом Googlebot, а страницы индексируются точнее. Единый URL также удобнее для пользователей. Таким сайтам не нужна переадресация, а это сокращает время загрузки. На адаптивных сайтах не возникает типичных ошибок, как на мобильных сайтах.

    Шаблоны и плагины

    Сравнительно быстро адаптировать сайт можно с помощью готовых тем (шаблонов) или плагинов. Такая опция не требует технических навыков. Однако доступна она не всем — только владельцам сайтов на отдельных CMS.

    Первый вариант — установить специальный плагин для существующей десктопной темы, который преобразует ее под мобильные устройства. Например, на сайтах Joomla с этой задачей справятся плагины Responsivizer и Mobile Joomla, на Drupal сайтах — ThemeKey и MobileTheme. Для WordPress подойдёт WPtouch. А еще не так давно, точнее до марта, 2020 года часто использовался плагин для мобильной оптимизации JetPack. Однако разработчики плагина удалили функцию mobile theme, которая собственно и отвечала за адаптацию сайта под мобильные устройства, объясняя это тем, что “большинство тем теперь по умолчанию включают мобильный дизайн, поэтому в этой функции больше нет необходимости”. Кроме того, они рекомендуют использовать адаптивные темы и не усложнять себе задачу.

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

    Чтобы быстро найти и установить шаблон

    • В WordPress предварительно найдите и загрузите тему на свой компьютер, перейдите в админпанель, Внешний вид & Темы & Добавить новую.
      Примечание: большой список платных и бесплатных тем можно найти на сайте WordPress.org. Перед скачиванием внимательно прочитайте описание и отзывы, обратите внимание на количество скачиваний.
    • В Joomla, панель администратора & Расширения & Менеджер расширений & Загрузить файл пакета.
    • В Drupal, предварительно скачайте тему из сайта drupal.org, панель администратора & Оформление & Установить новую тему.

    А как быть с магазином на OpenCart?

    C OpenCart все немного сложнее. Да, в интернете вы найдете множество адаптивных шаблонов, разработанных специально для этой CMS, однако их не всегда можно применить. Дело в том, что сайт OpenCart состоит из разных функциональных модулей. Как правило, модулей “из коробки” недостаточно для полноценного интернет-магазина. Для этого используются дополнительные кастомные модули, в большинстве случаев не поддерживаемые мобильной темой, в которой предусмотрен лишь стандартный ограниченный функционал. Чтобы OpenCart магазин корректно отображался и работал на разных устройствах можно:

    • Разработать отдельный мобильный дизайн, то есть отдельную мобильную версию сайта и настроить на нее редирект, предварительно определяя с какого устройства заходит пользователей (контакта с кодом не избежать).
    • Выполнить адаптивную Bootstrup верстку, не разрабатывая отдельный дизайн (макет) для мобильных.

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

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

    Обратите внимание! Для того чтобы показать Google, что это не дублированный контент, а мобильная версия сайта нужно использовать специальные метатеги rel=«alternative» и rel=«canonical».

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

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

    Чтобы создать мобильную версию сайта можно воспользоваться специальными онлайн-сервисами — конструкторами мобильной версии. Подобное решение подойдет владельцам небольших и средних сайтов разного типа, не имеющим опыта кодирования. Наиболее популярные Duda Mobile и Wix. С их помощью вы сможете самостоятельно преобразовать свой десктопный сайт таким образом, что все его содержимое будет ужато, лишние элементы и функционал урезаны для того, чтобы ресурсом было удобно пользоваться на мобильных устройствах.

    Преимущества мобильной версии сайта:
    • Высокая скорость загрузки сайта. Так как лишний функционал и элементы с десктопной версии на мобильную не переносятся, это уменьшает нагрузку и повышается скорость загрузки. А последнее позитивно влияет на позиции SEO.
    • Юзабилити и SEO. Так как в мобильной версии сайта нет ничего лишнего, что могло бы помешать или отвлечь пользователя (неудобные формы, второстепенные тексты и блоки, кнопки, запутанная навигация) улучшаются поведенческие факторы. Пользовательский опыт влияет на поведенческие метрики, а те, в свою очередь, на ранжирование сайта, то есть “высоту” его позиции в выдаче.
    • Гибкость. Отдельная версия означает отдельный код. Вы можете быстро и легко вносить изменения в мобильный сайт, не рискуя что-то сломать в десктопе и наоборот.
    • Выбор версии. При наличии мобильной версии сайта пользователь, в случае необходимости, всегда может перейти на полную версию.

    ТОП-5 рекомендаций, как улучшить работу мобильного сайта

    1. Не игнорируйте скорость загрузки

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

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

    Обратите внимание! В идеале скорость ответа сервера не должна превышать 0.2 с. Проверить этот показатель можно в Google Analytics: Поведение & Скорость загрузки сайта & Обзор.

    Также проверить скорость загрузки сайта можно в специальном бесплатном сервисе Google PageSpeed Insights или  Pingdom Tools.

    2. Проверяйте отображение элементов

    Не забывайте проверять, как отображаются элементы вашего сайта в мобильной версии, ведь согласно исследованию журналиста Тони Хейла издания Times пользователь, который впервые попал на ваш ресурс решает всего за 15 секунд — остаться или покинуть страницу.  Поэтому очень важно, чтобы мобильный сайт был интуитивно понятным и удобным в использовании.

    Для этого не забудьте проверить страницу с помощью Mobile-Friendly Test. Не стоит игнорировать советы по оптимизации страницы от поискового гиганта Google, особенно учитывая, что они бесплатны!

    3. Придерживайтесь принципов Mobile First

    В идеале, при создании сайта, нужно начинать с разработки макета именно под мобильные. Ведь разместить множество элементов на большом экране не так сложно, как на маленьком. Кроме этого, Google ставит в приоритет именно мобильную версию сайта. Чтобы завоевать топовые позиции в выдаче, стоит уделить должное внимание именно адаптации под мобильные устройства. Опять-таки, проверить на сколько ваш сайт оптимизирован под мобильные устройства можно с помощью Mobile Friendly Test.

    4. Используйте технологию AMP

    Если загрузка сайта длится более 3 сек, половина пользователей покидают его, согласно статистике Google, наведенной Девидом Кикпатриком в статье на портале MarketingDive.

    Существенно ускорить загрузку страниц можно с помощью технологии AMP, которая сжимает объем данных страниц, уменьшая его в 8 раз. Эта технология разработана Google с целью повышения скорости загрузки сайтов. В результатах поиска ресурсы, использующие эту технологию, обозначены специальной иконкой-молнией. А также имеют URL с приставкой /amp.

    Однако такой метод ускорения страниц подойдет не всем. Дело в том, что пользователь, попадающий на сайт с AMP, автоматически переадресовывается на упрощенную версию, где, скорее всего, не будет ни виджетов, ни раздела комментариев, ни дополнительных блоков, например, “Рекомендованное”, утяжеляющих страницу. Собственно именно так и достигается молниеносная загрузка при AMP.

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

    Также стоит обратить внимание на Google AMP Cache — метод, при котором данные сайта сохраняются (изображения, шрифты и т.д.), большие картинки автоматически конвертируются в форматы для мобильных устройств. Такие свойства помогают улучшить производительность сервера, а ваш сайт будет значительно лучше работать на мобильных устройствах.

    Итоги

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

    Итак, еще раз перечислим опции адаптации сайта под мобильные устройства:

    • Адаптивный дизайн. Если у вас есть навыки веб-разработки или разработчик в штате, вы можете адаптировать десктопную версию таким образом, что она будет автоматически подстраиваться под экраны разного расширения посредством CSS. “Заставить” сайт адаптироваться под мобильные можно с помощью специальных плагинов или адаптивной темы. Для этого не нужны технические навыки. Опция доступна владельцам сайтов на CMS WordPress, Joomla и Drupal.
    • Мобильная версия сайта. Если речь идет о большом проекте, портале, крупном интернет-магазине, стоит задуматься о разработке самостоятельной отдельной мобильной версии. Здесь не обойтись без помощи команды разработчиков.  Если вы владелец небольшого или среднего e-commerce сайта, блога, сайта-визитки и т. д., можно попробовать преобразовать ваш сайт с помощью специальных конструкторов мобильных сайтов. Навыки программирования не понадобятся.

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

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

    Однако разработчики должны помнить, что 56,16% всего веб-трафика приходилось на мобильные телефоны.В результате им необходимо убедиться, что веб-сайты хорошо оптимизированы для работы в мобильных браузерах. Chrome, бесспорно, является ведущим мобильным браузером с текущей рыночной долей 64,73% во всем мире. Следовательно, тестирование мобильных версий веб-сайтов в Chrome имеет решающее значение.

    Цель этой статьи — объяснить, как разработчики могут открыть мобильную версию веб-сайта в браузере Chrome через компьютер. В нем также объясняется, как можно тестировать веб-сайты на реальных мобильных устройствах в Интернете.

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

    Использование моделирования устройства в Chrome DevTools для Mobile View

    Пользователи могут просматривать мобильную версию веб-сайта с помощью Chrome Devtools.

    Ниже перечислены шаги для просмотра мобильной версии веб-сайта в Chrome:

    1. Откройте DevTools, нажав F12.
    2. Щелкните «Панель инструментов переключения устройств» . (Значок становится синим, когда режим устройства включен)
    3. Выберите устройство, которое вы хотите смоделировать, из списка устройств iOS и Android.
    4. После того, как желаемое устройство выбрано, оно отображает мобильную версию веб-сайта.

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

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

    Облако реального устройства BrowserStack для тестирования в реальном времени

    Идеальный способ протестировать веб-сайт — это протестировать его на реальном устройстве. Это помогает разработчикам отслеживать веб-сайты в мобильных браузерах, установленных на реальных устройствах Android и iOS. Таким образом, QA может оценить, как веб-сайт работает на нескольких мобильных устройствах и в разных браузерах в реальном мире.

    Облако реальных устройств BrowserStack предоставляет для тестирования более 2000 реальных устройств и браузеров.
    Некоторые из его основных моментов:

    1. Последние устройства Android от Samsung, Oneplus, Google и Motorola
    2. Последние устройства Apple, такие как iPhone X, iPhone 11 Pro
    3. На компьютере установлено несколько версий ведущих браузеров, таких как Chrome, Firefox, Safari, Opera реальные устройства

    QA могут тестировать на любом реальном мобильном устройстве Android или iOS прямо из своего браузера. Им не нужно загружать браузеры или эмуляторы. Чтобы открыть мобильную версию веб-сайта в Chrome, QA может просто войти в систему, выбрать комбинацию устройство-браузер-ОС и начать тестирование.Изображение ниже является точным представлением сеанса тестирования в реальном времени (тестирование браузера Chrome на Samsung S10 +) в BrowserStack.

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


    BrowserStack также предоставляет следующие функции:
    1. Предварительный доступ к DevTools, который позволяет проверять веб-элементы на странице
    2. Тестирование геолокации
    3. Интеграции с популярными сообщениями об ошибках инструменты, такие как Jira, Trello и Slack
    4. Тестирование таких функций, как сжатие для увеличения и вращение устройства

    Методы, описанные выше, могут помочь разработчикам устранить их болевые точки при отладке любой проблемы.Эти методы также помогают оптимизировать производительность веб-сайта на нескольких устройствах. Знание того, как открыть мобильное представление веб-сайта в Chrome, является важной частью навыков QA-инженера, и эта статья поможет им овладеть этим навыком.

    10 отличных инструментов для тестирования вашего сайта на мобильных устройствах

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

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

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

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

    1. iPhoney

    Превосходный бесплатный тестер iPhone, iPhoney не совсем эмулятор, но позволяет разработчикам создавать веб-сайты размером 320 x 480 пикселей для использования на iPhone. Он позволяет тестировать изображения и код в идеальной среде Apple-Safari со всеми обычными функциями, включая портретный и ландшафтный режимы, полноэкранный режим, масштабирование и плагины.

    2. W3C mobileOK Checker

    Эта программа проверки представляет собой веб-инструмент автоматической проверки, который проверяет, насколько удобен ваш веб-сайт для мобильных устройств.Тесты проверяются по спецификации W3C mobileOK Basic Tests, разработанной W3C.

    3. iPad Peek

    Этот удобный веб-инструмент позволяет увидеть, как выглядят ваши веб-сайты при отображении на iPad. Рекомендуется использовать браузер на основе WebKit, такой как Apple Safari или Google Chrome, чтобы получить как можно более точное моделирование — или, по крайней мере, браузер с поддержкой CSS3, который поддерживает преобразование свойств (например, Opera), потому что он использует их, чтобы отобразить страницу в портретном режиме.

    4. Дополнение Modify Headers для Firefox

    Существуют надстройки для Firefox, которые могут манипулировать данными, отправляемыми на серверы, чтобы создать впечатление, будто пользовательский агент просматривает страницы на мобильном устройстве, даже если это не так. Для этого вам понадобится надстройка под названием Modify Headers (для Firefox).

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

    Чтобы имитировать просмотр веб-страниц на мобильном устройстве, вам необходимо найти значение профиля агента пользователя (UAProf) вашего мобильного устройства, которое можно найти с помощью быстрого поиска в Google по запросу «агент пользователя», за которым следует модель вашего телефона (e .г. см. результаты Google по запросу «user agent ipad»). Или посмотрите этот список значений UAProf.

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

    Для Google Chrome вы можете попробовать расширение User-Agent Switcher.

    Для независимого от браузера настольного приложения, которое работает практически с любым интернет-приложением, попробуйте Fiddler Web Debugger, который, помимо прочего, позволяет изменять HTTP-запросы.

    5. Adobe Device Central CS5

    Являясь частью последней версии Adobe Creative Suite, Device Central имитирует работу мобильных устройств на вашем рабочем столе, позволяя вам тестировать HTML и Flash, не выходя из рабочего стола.

    Чтобы открыть страницу или сайт, выберите Профили устройств> Обзор устройств, затем щелкните правой кнопкой мыши и выберите Добавить к устройствам для тестирования . Теперь, когда вы добавили устройство, просто выберите «Файл»> «Открыть» (для локального тестирования) или «Файл»> «Открыть URL» (для удаленного тестирования).

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

    6. Google Mobilizer

    Google Mobilizer — это простой веб-инструмент, который позволяет вводить адрес веб-страницы, а затем делает ее удобной для мобильных устройств, сокращая содержание до самого необходимого. Это отличный инструмент для определения того, где можно оптимизировать производительность своего сайта.

    7. Гомес

    Тест

    Gomez на мобильную готовность дает вам оценку от 1 до 5 на основе анализа более 30 проверенных методов разработки мобильных веб-приложений, от использования таблиц стилей (например, медиа-запросов) до методов кэширования и кода, соответствующего стандартам. Результаты отображаются в виде простого для понимания документа, в котором даются советы по улучшению вашего сайта.

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

    8. MobiReady

    В том же духе, что и Gomez, MobiReady — это еще один сайт онлайн-тестирования, который позволяет вам вводить URL-адрес, чтобы он мог выполнять набор оценок, включая тест страницы, тест разметки и тест сайта веб-страницы. Это немного более подробная версия Gomez, приведенная выше, и предоставляет полную страницу результатов тестирования, включая соответствие dotMobi, тесты W3C mobileOk, эмуляторы устройств, подробные отчеты об ошибках, тесты HTTP и средство проверки кода.

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

    9. Эмулятор DotMobi

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

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

    10. Симулятор Opera Mini

    С более чем 120 миллионами проданных смартфонов с предустановленной Opera [1] и выпуском, доступным практически для любой ОС, убедиться, что ваш сайт работает в Opera Mini (мобильная версия веб-браузера Opera), является хорошей практикой. для включения в рабочий процесс тестирования.

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

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

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

    Дополнительная литература

    • Мобильный веб-дизайн: передовой опыт. В этой статье содержится список из 20 эмуляторов мобильных телефонов.
    • Разработка веб-приложений для iPad: советы и рекомендации по дизайну при разработке сайта для iPad.
    • 10 приложений для iPhone, о которых должен знать каждый веб-дизайнер. Это коллекция мобильных приложений для дизайнеров.
    • Начало работы с iPhone SDK: хотите узнать о создании приложений для iPhone? Прочтите это вводное руководство.

    Список литературы

    1. Opera: отчет о состоянии мобильной сети. www.opera.com

    Связанное содержимое

    Проверьте свой веб-сайт на всех мобильных устройствах с помощью этих 10 инструментов [обновлено]

    CrossBrowserTesting

    Попрощайтесь со всеми своими виртуальными машинами и лабораториями устройств. CrossBrowserTesting — это универсальное решение для всех ваших потребностей в тестировании.Этот инструмент является довольно исчерпывающим и надежным, в его списке доступности более 1500 реальных настольных и мобильных браузеров. Вы можете легко выполнить все свои ручные и исследовательские тестовые примеры на реальных устройствах iOS и Android, как и ваши клиенты и конечные пользователи. Инструмент также имеет отличную поддержку визуального тестирования и оснащен собственными инструментами отладки.

    Функционировать

    Быстро протестируйте свой веб-сайт на любом мобильном устройстве с помощью решений для облачного тестирования с поддержкой искусственного интеллекта от Functionize.Облако для онлайн-тестирования Functionize позволяет безупречно выполнять визуальное тестирование, кросс-браузерное тестирование и тестирование производительности наряду с мобильным тестированием. Используйте этот инструмент, чтобы легко масштабировать от одного до нескольких мобильных устройств. Получите доступ к большому количеству версий Android и iOS и плавно поддерживайте свои мобильные тестовые примеры, используя их механизм анализа основных причин. Кроме того, инструмент имеет похвальную поддержку для создания тестов, обслуживания тестов, производительности и аналитики.

    BrowserStack

    BrowserStack — еще один популярный онлайн-инструмент для тестирования вашего сайта на различных мобильных устройствах.Это довольно надежный и исчерпывающий инструмент, который обеспечивает легкий доступ к более чем 1200 реальных мобильных устройств и браузеров. Протестируйте свой сайт на разных устройствах iOS и Android без использования эмуляторов! Пользовательский интерфейс довольно прост для понимания.

    Лямбда-тест

    LambdaTest — один из самых удивительных и простых в использовании инструментов кросс-браузерного тестирования, доступных в наши дни. Он предоставляет вам доступ в режиме реального времени к более чем 2000 браузеров и операционных систем в Интернете.Этот инструмент онлайн-тестирования совместимости браузера является самодостаточным. Этот инструмент позволяет вам убедиться, что ваш сайт отлично работает на всех мобильных устройствах. Это дает вам возможность выбирать из разнообразного списка iPhone и iPad. Вы также можете протестировать свой веб-сайт на различных телефонах Android, таких как Samsung, Oppo и Vivo, что позволит вам переключаться между различными версиями Android и браузерами в соответствии с требованиями вашего проекта.

    Лаборатория соуса

    С легкостью выполняйте живое и непрерывное тестирование веб-сайтов и мобильных устройств в облаке с помощью Sauce Labs.Используйте этот инструмент, чтобы автоматизировать ваши тесты с помощью Selenium и увеличить охват тестированием, улучшить качество и достоверность результатов тестирования, резко сократив время, необходимое для каждого цикла тестирования. Выполняйте множество параллельных тестов на разных компьютерах и мобильных браузерах с помощью Sauce Labs. Инструмент также поддерживает автоматизацию тестирования в реальном времени с помощью хорошо известных сред автоматизации, таких как Appium, Espresso и XCUITest.

    Мультибраузер

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

    Каталон

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

    Ранорекс

    Следующим в списке идет Ranorex! Еще один фантастический инструмент для тестирования мобильных браузеров. Помимо мобильного тестирования, вы можете использовать этот инструмент для тестирования настольных компьютеров или веб-тестирования. Не только это, используйте инструмент для автоматизации вашего набора тестов на рабочем столе Windows, выполняя его локально или удаленно.Решите все проблемы кроссбраузерного тестирования с помощью этого универсального решения.

    TestingWhiz

    TestingWhiz был разработан Cygnet Infotech. Используйте этот инструмент для выполнения эффективного и эксклюзивного мобильного тестирования наряду с регрессионным тестированием для обслуживания, оптимизации и автоматизации. Инструмент также подходит для надежного кросс-браузерного тестирования с поддержкой почти всех основных браузеров, таких как Google Chrome, Mozilla Firefox, Safari и Internet Explorer.

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

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

    LT Браузер

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

    После этого вы можете посетить раздел «Медиа», чтобы просмотреть записи и скриншоты ваших сессий. Это как галерея, содержащая все видео и изображения, снятые во время тестирования вашего сайта с помощью LT Browser. Вы также можете протестировать локальные или частные веб-сайты или веб-приложения в 25 мобильных разрешениях.

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

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

    Мобильные устройства в ближайшем будущем вытеснят настольные устройства.

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

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

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

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

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

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

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

    Симулятор iOS, включенный в Xcode, позволяет легко увидеть, как веб-сайт будет выглядеть на iPhone и iPad.

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

    Эмулятор Android включен в Android SDK. Вы можете узнать больше об эмуляторе Android здесь.

    3. Тест на BrowserStack

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

    BrowserStack — это веб-сервис, который упрощает тестирование нескольких устройств и версий браузеров.

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

    4. Проверить с помощью Responsinator

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

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

    Просто посетите веб-сайт Responsinator, введите свой URL-адрес вверху страницы, и он сгенерирует для вас предварительные просмотры в реальном времени с теми же разрешениями, что и у многих популярных устройств. Это может быть полезно для быстрой «проверки работоспособности», но помните, что это не замена реального тестирования устройства или даже использования симулятора, потому что он использует тот же механизм рендеринга, что и ваш браузер.Другими словами, он не отображает сайты волшебным образом с помощью движков рендеринга мобильного браузера. Скорее, это то же самое, что изменить размер вашего браузера до определенного размера.

    5. Измените размер браузера

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

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

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

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

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

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

    Мобильное тестирование

    Гомес. Тест Gomez на мобильную готовность оценивает, насколько хорошо ваш веб-сайт будет работать на мобильном телефоне.Мгновенно получайте оценку на основе углубленного анализа более 30 лучших практик разработки мобильных веб-сайтов, включая подробные рекомендации по устранению выявленных проблем. Цена: Тест бесплатный; однако вы должны предоставить контактную информацию.

    Gomez Mobile Readiness Test.

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

    W3C mobileOK Checker. Эта программа проверки выполняет различные тесты на веб-странице, чтобы определить уровень ее удобства для мобильных устройств. Он в первую очередь оценивает простоту использования, эффективность и функциональную совместимость на основе рекомендаций WS3 Mobile Web Best Practices. Цена: Бесплатно.

    Кроссбраузерное тестирование. CrossBrowserTesting позволяет протестировать ваш сайт в более чем 130 браузерах в 25 различных операционных системах, включая мобильные устройства.Функциональность тестового сайта. Получайте автоматические скриншоты вашего сайта. Протестируйте на iPhone, iPad, Android, Blackberry и других устройствах. Цена: планы начинаются с 29,95 долларов в месяц.

    CrossBrowserTesting.

    BrowserStack. BrowserStack обеспечивает тестирование браузеров через Интернет. Он предлагает быстрый доступ к удаленным браузерам, инструментам разработчика и живому тестированию. Получите доступ к официальным мобильным эмуляторам для Apple iOS, Android и Opera Mobile. Протестируйте свой сайт на большом количестве устройств. Цена: планы начинаются с 19 долларов в месяц.

    Мультибраузерная программа просмотра. Multi-Browser Viewer — это приложение для кроссбраузерности. Он содержит 11 мобильных браузеров и эмуляторов, а также 55 автономных браузеров и 88 браузеров для захвата экрана. Цена: лицензия на 1 пользователя за 139,95 долларов США.

    Perfecto Mobile. Платформа MobileCloud Perfecto Mobile позволяет получить доступ к большому количеству реальных мобильных телефонов и планшетов, подключенных к действующим мобильным сетям, расположенным в разных географических точках.Это позволяет вам тестировать и отслеживать процессы на каждом телефоне и обеспечивать оптимальную совместимость вашего сайта, приложения или сервиса. Цена: оплата за проект из расчета 25 долларов в час; ежемесячные планы начинаются с 15 долларов в час.

    Perfecto Mobile.

    Устройство Где угодно. DeviceAnywhere — это инструмент для выборочной проверки мобильного веб-контента на реальных мобильных устройствах. Взаимодействуйте удаленно с живыми мобильными устройствами в режиме реального времени, чтобы вы могли точно видеть, как контент вашего веб-сайта выглядит и действует на различных мобильных устройствах. Цена: Инструмент для выборочной проверки бесплатно; интерактивное тестирование для разработчиков от 100 долларов в месяц.

    Мобильные эмуляторы

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

    Тестер iPhone. Этот эмулятор iPhone позволяет проверить ваш сайт в размерах для iPhone 3G и 4G, а также iPod Touch.Просто введите URL-адрес сайта, который вы хотите протестировать, в адресной строке. Цена: Бесплатно.

    Тестер iPhone.

    iPad Peek. Этот популярный инструмент позволяет увидеть, как ваш веб-сайт выглядит на iPad или iPhone. Для точного моделирования используйте браузер на основе WebKit, например Apple Safari или Google Chrome. Цена: Бесплатно.

    Screenfly. Screenfly позволяет просматривать ваш веб-сайт на различных экранах устройств и с разными разрешениями. Введите URL-адрес и нажмите GO, чтобы начать. Цена: Бесплатно.

    Эмулятор мобильного телефона. Этот эмулятор позволяет просматривать ваш сайт на различных мобильных телефонах, включая iPhone, HTC, LG, BlackBerry и Samsung. Цена: Бесплатно.

    Эмулятор мобильного телефона.

    Ответчик. Responsinator поможет вам быстро получить представление о том, как ваш адаптивный сайт будет выглядеть на самых популярных устройствах, таких как iPhone, iPad, Android и Kindle. Цена: Бесплатно.

    Тестирование адаптивного дизайна Мэтта Керсли. Это еще один инструмент для тестирования адаптивного веб-дизайна. Протестируйте свой сайт одновременно с несколькими вариантами ширины. Введите URL своего веб-сайта в адресную строку, чтобы протестировать конкретную страницу. Цена: Бесплатно.

    Просмотр. Browshot — это сервис для создания веб-снимков экрана на различных виртуальных устройствах. Захватывайте веб-сайты на любом мобильном устройстве: iPhone, iPad, смартфоне Android, Nook Reader и планшетах Android. Цена: пять скриншотов для мобильных устройств за 1 доллар.

    Просмотр.

    Opera Mini Simulator. Opera Mini — один из самых быстрых и продвинутых мобильных веб-браузеров. Воспользуйтесь его бесплатным веб-эмулятором. Цена: Бесплатно.

    iPhoney. iPhoney предоставляет вам среду просмотра веб-страниц с точностью до пикселей на базе Safari, которую вы можете использовать при разработке веб-сайтов для iPhone. Это идеальный холст с разрешением 320 на 480 пикселей для разработки на iPhone. Цена: Бесплатно.

    iPhoney.

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

    За последний месяц примерно 22.72% посетителей Cardinal Web Solutions просматривали наш сайт с мобильных устройств, таких как планшет или смартфон. Это почти четверть всего трафика на наш сайт. Итак, если вы не хотите, чтобы примерно каждый четвертый посетитель вашего сайта был разочарован плохим пользовательским интерфейсом, вы должны быть уверены, что ваш сайт готов для мобильных пользователей.

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

    Внешний вид

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

    1. Перетаскивание краев браузера для воссоздания меньшего размера экрана на рабочем столе
    2. Инструмент, имитирующий внешний вид веб-сайта на мобильных устройствах, например Screenfly
    3. .
    4. Просмотр сайта на реальном мобильном устройстве

    Метод 1. Браузер рабочего стола

    Первый способ — перетащить края браузера, чтобы уменьшить его ширину.Хотя это и менее точно, чем на самом деле, это все же очень хорошее приближение к тому, как будет выглядеть сайт, и, безусловно, самый быстрый и простой метод тестирования. Кроме того, не все постоянно используют свой браузер в максимальном режиме, поэтому полезно знать, как ваш сайт будет выглядеть на рабочем столе в различных размерах. Еще одним преимуществом этого метода является то, что вы можете использовать инструмент своего браузера «Проверить элемент», который поможет вам диагностировать любые обнаруженные вами проблемы. Я в первую очередь использую этот метод на начальном этапе разработки, чтобы убедиться, что мы на правильном пути.

    На этом этапе я провожу большую часть своего тестирования в Chrome. Устройства Android используют Chrome в качестве основного браузера, в то время как устройства iOS по умолчанию используют Safari; однако они оба являются браузерами webkit и фактически отображают сайты очень похоже. Для тестирования того, как ваш сайт будет отображаться на устройствах с Windows, которые еще не имеют рыночной доли iOS или Android, лучше всего подойдет Internet Explorer 11 (да, мы сейчас на 11).

    Метод 2: Screenfly

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

    Пример использования Screenfly для моделирования устройства — в данном случае планшета с альбомной ориентацией.

    Метод 3: Фактические устройства

    Наконец, по точности, ничто не может сравниться с просмотром вашего веб-сайта на реальном мобильном устройстве.Однако в этом сценарии одно устройство не подходит для всех. Иногда есть некоторые различия между тем, как сайт будет отображаться на устройствах Android и iOS *, хотя и не так много, как вы могли бы ожидать, если оба устройства обновлены. У вас гораздо больше шансов столкнуться с несоответствиями между разными телефонами под управлением Android.

    Если вы тестируете одно устройство iOS, вы в значительной степени протестируете их все, по крайней мере, для этого размера экрана, что упрощает разработку этих устройств. Однако, поскольку Android доступен для многих различных типов телефонов и поскольку обновления не всегда совместимы с каждым телефоном, работающим под управлением Android, в конечном итоге у вас будет много различий между версиями браузеров на устройствах Android.По этой причине я рекомендую вам протестировать свой сайт на iPhone, iPad, относительно новом планшете Samsung, относительно новом телефоне Samsung и более старом телефоне Android. Если у вас нет доступа к более новому устройству, вы всегда можете зайти в магазин телефонов и проверить свой сайт на моделях дисплея!

    * Я конкретно имею в виду браузеры по умолчанию для этих операционных систем, Chrome и Safari соответственно. Однако возможно, что пользователь загрузил дополнительный браузер для своего устройства, например Opera, Firefox или Chrome для iOS.Однако рыночная доля этих браузеров, не используемых по умолчанию, значительно ниже.

    Что вам следует искать?

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

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

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

    Функциональность

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

    Контрольный список мобильной функциональности:
    • Эффекты наведения — Иногда у вас может быть карта изображения или кнопка, которая меняет внешний вид, чтобы указать, когда вы наводите на нее курсор мыши.На мобильном устройстве нет мыши, поэтому при первом щелчке будет отображаться эффект наведения, а при втором щелчке — активировать ссылку (при условии, что ссылка есть). Если вам не нужен эффект наведения на мобильных устройствах и вам не нравится дополнительный шаг, сообщите разработчику, чтобы он отключил этот эффект для мобильных устройств.
    • Навигация — Меню вашего сайта почти всегда нужно реструктурировать для мобильных устройств. Протестируйте несколько ссылок, чтобы убедиться, что они хорошо выглядят, работают и просты для понимания и использования.Описанный выше эффект наведения также может повлиять на навигацию по вашему сайту. Например, если в вашем меню есть ссылка, на которую вы можете навести курсор, чтобы увидеть дополнительные элементы подменю, при первом щелчке откроется подменю, а при втором щелчке будет следовать ссылка. Некоторые люди предпочитают добавлять «Обзор» в подменю на мобильных устройствах, чтобы сделать эту страницу более очевидной для пользователей, которые могут не знать, что нужно щелкнуть дважды.
    • Flash — устройства iOS не будут отображать элементы Flash. В любом случае вам не следует полагаться на Flash в своем веб-дизайне, поскольку он устарел, и Google не может его прочитать, но если да, убедитесь, что на вашем сайте на устройствах iOS нет большой зияющей дыры, где был элемент Flash.Попросите разработчика скрыть элементы Flash на мобильных устройствах и при необходимости заменить их чем-то другим для этих устройств.
    • Контактные формы — Я рекомендую протестировать их не потому, что вижу много проблем с ними (я не вижу), а просто потому, что они слишком важны, чтобы не тестировать.
    • Телефонные номера — устройства iOS обычно могут автоматически определять телефонные номера и преобразовывать их в ссылку, но это не всегда относится к устройствам Android. Если вы хотите, чтобы пользователи могли звонить по клику при просмотре вашего веб-сайта на своем телефоне, разработчик должен будет включить ссылку в код, а не полагаться на браузер для ее обнаружения.

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

    Производительность

    Тестирование еще не завершено, когда сайт запускается. Вы захотите оценить, как ваш сайт работает с посетителями с течением времени, отслеживая статистику пользователей в Google Analytics, особенно показатель отказов и целевой коэффициент конверсии . Вы можете увидеть разбивку, перейдя к Аудитория Мобильный Обзор в Google Analytics.

    Google Analytics позволяет легко сравнивать показатель отказов и показатель достигнутой конверсии на разных устройствах.

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

    Коэффициент конверсии вашей цели показывает, какой процент ваших посещений привел к достижению одной из целей, которые вы определили в разделе «Конверсии» Google Analytics. Вы можете обнаружить, что различные типы целей более полезны для настольных компьютеров, чем для мобильных, и наоборот. Например, если у вас есть контактная форма на вашем веб-сайте, вы можете в качестве цели отслеживать отправку форм. Однако посетители вашего сайта могут быть не заинтересованы в заполнении формы на своем смартфоне и могут предпочесть позвонить.В этом случае определение другой цели для кликов по кнопке «Звонок по клику» может быть более полезным для отслеживания мобильных конверсий вашего сайта.

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

    В исследовании 2012 года Google сообщил, что 52% пользователей заявили, что «плохой мобильный опыт снижает вероятность взаимодействия с компанией». Мобильный просмотр практически повсеместен, и теперь пользователи ожидают, что компании предложат отличные возможности на любом устройстве. Если вы не хотите потерять их бизнес в пользу более удобных для мобильных устройств конкурентов, вы должны сделать это. Теперь это неотъемлемая часть интернет-маркетинга.

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

    эффективных способов и популярных инструментов

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

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

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

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

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

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

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

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

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

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

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

    Fast loading time дает вам серьезное конкурентное преимущество.Следующие действия влияют на время загрузки:

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

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

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

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

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

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

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

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

    Мобильная карта сайта XML

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

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

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

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

    Тестирование пользовательского опыта (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.

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

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

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

    Элементы заканчиваются. Самые важные элементы должны быть вверху. Размещение остальных элементов должно иметь смысл.

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

    Содержание

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

    Видео

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

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

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

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

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

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

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

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

    1. Обеспечить совместимость с функциями смартфонов и планшетов
    2. Проверить нормальное время загрузки
    3. Сделайте навигацию по сайту максимально простой
    4. Убедитесь, что кнопки достаточно большие для людей с большим пальцем
    5. Нет больших блоков текста.Используйте маркированные списки и короткие предложения.
    6. Не используйте Flash.
    7. Не использовать всплывающие окна.
    8. Убедитесь, что изображения имеют оптимальный размер.
    9. Убедитесь, что ваш номер телефона находится на расстоянии одного клика от набора
    10. Убедитесь, что веб-сайт может получить доступ к вашему местоположению через GPS

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

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

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

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

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

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

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

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

    Мобильное тестирование Keynote (ранее Keynote DeviceAnywhere)

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

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

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

    Некоторые недостатки мобильного тестирования Keynote:

    • 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, как правило, довольно дорогой, а бесплатный вариант очень ограничен.
    • Способ имитации защемления двумя пальцами на телефонах и планшетах

    Мобильная лаборатория непрерывного контроля качества Perfecto

    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

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

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

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

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

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

    Эмулятор Android Studio

    Эмулятор

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

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

    Android Studio:

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

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

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

    Мобильный эмулятор Opera

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

    Основные достоинства Эмулятора Opera Mobile:

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

    Некоторые слабые места эмулятора Opera Mobile:

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

    Мобильные инструменты и инструменты проверки

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

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

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

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

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

    mobiReady

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

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

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

    Служба проверки W3C mobileOK

    W3C mobileOK checker — это бесплатный сервис от W3C (всемирного консорциума веб-стандартов), который помогает проверять уровень мобильности веб-документов и, в частности, определять, подходит ли веб-документ для мобильных устройств.”

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

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

    Варвы

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

    Основные характеристики Варвы:

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

    Инструменты скорости тестового веб-сайта

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

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

    Вот несколько инструментов, которые помогут вам в этом.

    Скорость загрузки страницы Google в Интернете

    Google Page Speed ​​Online — это комплексный инструмент, который не только позволяет вам проверять производительность, но и дает вам много информации.Наряду с этим, он также содержит отчет о лучших практиках, которые вы можете использовать для мобильных устройств, чтобы оптимизировать их производительность.

    Pingdom

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

    GTmetrix

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

    Ударная нагрузка

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

    Дотком-Монитор

    Тест скорости

    Dotcom-Monitor позволяет пользователю выбрать, в каком браузере он хочет тестировать — Chrome, Firefox, Internet Explorer, а также в мобильных браузерах, включая iPhone, iPad и т. Д.У вас есть возможность протестировать свой сайт в 20 местах по всему миру. После завершения теста пользователи могут перейти к отчетам о производительности и анализу каскадной диаграммы.

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

    .

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

Ваш адрес email не будет опубликован.