Мобильный трафик — это сила, с которой нужно считаться. За последние несколько лет количество пользователей мобильного Интернета превысило количество людей, занимающихся интернет-серфингом на настольных компьютерах. К настоящему времени более половины интернет-трафика проходит через телефоны, планшеты и другие мобильные устройства. Поэтому тестирование сайта под мобильные устройства стало обязательной частью веб-разработки.
Оптимизация сайта под мобильные устройства стала фактором ранжирования в Google. Следовательно, как разработчик или владелец веб-сайта на WordPress, вы не сможете обойтись без оптимизации своего сайта для мобильных устройств.
При огромном количестве телефонов и планшетов на рынке сложно убедиться, что ваш веб-сайт выглядит великолепно на всех из них или даже на большинстве из них.
К счастью, ряд инструментов для тестирования сделали своей миссией облегчить нашу жизнь. Сегодня мы рассмотрим 12 вариантов, которые, надеюсь, охватят большинство типов устройств, представленных в настоящее время на рынке.
Встроенные браузерные инструменты для мобильного тестирования
Все основные браузеры поставляются со своей собственной линейкой инструментовдля разработчиков,которые также включают инструменты для мобильного тестирования.
Вы можете использовать их не только для проверки HTML и CSS вашего сайта, но и чтобы узнать, как сайт будет выглядеть на разных мобильных устройствах. Здесь мы рассмотрим Chrome, Firefox и Safari.
1. Chrome Device Mode
Чтобы перейти в режим устройства, сначала необходимо активировать инструменты разработчика. Зайдите в «Просмотр»> «Разработчик»> «Инструменты разработчика». Или просто нажмите Ctrl + Shift + I.
Откроется консоль разработчика в правой части экрана. Если вы направите свой взгляд на верхнюю левую часть консоли, вы найдете небольшой значок, похожий на смартфон и планшет, установленные друг на друга. При нажатии активируется режим устройства.
Как использовать режим устройства
В этом режиме веб-сайт, на котором вы сейчас находитесь, отображается в меньшем кадре, который отражает ограничения мобильного устройства (при необходимости вы можете отодвинуть инструменты разработчика в сторону, чтобы освободить немного больше места).
Уменьшайте и расширяйте рамку, чтобы экран соответствовал вашим личным потребностям. Или используйте числа в верхнем левом углу, чтобы ввести пользовательский размер экрана. Имейте в виду, что вам, возможно, придется перезагрузить сайт, чтобы контент подходил правильно.
Тем не менее, лучшее в режиме устройства — это предустановки устройства, расположенные вверху. Здесь вы можете выбрать некоторые из наиболее распространенных мобильных устройств: различные модели iPhone и Samsung Galaxy, а также менее распространенные, такие как Amazon Kindle Fire.
Когда вы выбираете что-то из списка, появляется дополнительная кнопка, которая позволяет вам переключаться между портретным и альбомным режимом просмотра.
Приятно то, что это не эмуляция, а просто другой вид окна вашего браузера. Это означает, что вы по-прежнему можете переходить на любой веб-сайт и просматривать его.
Режим устройстваChrome также имитирует просмотр с помощью пальца, а не с помощью мыши. Следовательно, при наведении курсора на что-либо не происходит выделения или изменения цвета. Вы получите настоящий мобильный опыт.
Имитация плохих соединений
Еще более сложной функцией является моделирование регулирования сети. Вы должны иметь в виду, что мобильные посетители часто будут иметь более медленное сетевое соединение, когда они не подключены к Wi-Fi.
Инструмент мобильного тестирования Chrome может имитировать это. В другом раскрывающемся меню вверху рядом с Сетьювы можете выбрать любую скорость сети от GPRS через 2G / 3G / 4G до соединения Wi-Fi.
Таким образом, вы сможете лучше понять пользовательский опыт мобильных посетителей, скорость которых может быть ограничена.
Эти предустановки действительны только для вашей активной вкладки.
В целом режим устройства Chrome — замечательный инструмент для мобильного тестирования, особенно если иметь в виду, что это встроенная функция бесплатного браузера.
2. Firefox Responsive Design View
Firefox предлагает инструмент, аналогичный Chrome. Хотя у него не так много функций, как у его конкурента, он все же весьма полезен для тестирования мобильных возможностей вашего веб-сайта на WordPress.
Вы можете активировать его, щелкнув меню и затем « Разработчик»> «Представление адаптивного дизайна»,или щелкнув соответствующий значок на панели инструментов разработчика, когда он включен.
В качестве альтернативы используйте Ctrl-Shift + M.
Интерфейс представления адаптивного дизайнадовольно знаком. Как и в Chrome, у вас есть раскрывающееся меню для стандартных предустановленных размеров и связанных с ними устройств.
Если доступные параметры не соответствуют вашим потребностям, вы также можете установить пользовательские размеры и сохранить их как свой собственный набор настроек. Кроме того, также можно вручную сжимать и расширять рамку просмотра.
Как и раньше, представление адаптивного дизайнаявляется частью вашего браузера, что означает, что вы можете просматривать любой веб-адрес по своему усмотрению. Он также может имитировать управление касанием вместо просмотра с помощью мыши. Также доступно моделирование регулирования сети.
Вы можете переключаться между альбомной и портретной ориентацией независимо от размера и делать скриншоты текущего вида, которые автоматически попадают в вашу папку загрузки.
3. Safari Responsive Design Mode
Если вы работаете в основном на Mac, вы можете использовать режим адаптивного дизайна, встроенный в собственный браузер Safari. Чтобы начать использовать его, просто перейдите в Safari> Настройки> Дополнительно. Затем убедитесь, что установлен флажок «Показать меню разработки в строке меню».
В строке меню должно появиться меню «Разработка». Щелкните его и выберите «Войти в режим адаптивного дизайна».
Теперь вы должны увидеть свой веб-сайт в адаптивном представлении с множеством опций, перечисленных вверху. Вы можете вручную изменить размеры, выбрать вид браузера для имитации или устройство. Однако все предустановки устройства являются продуктами Apple. Итак, если вы хотите проверить вид устройств, работающих под управлением Android, вам нужно будет ввести размеры вручную.
4. Android SDK
Далее в нашем списке инструментов для тестирования мобильных устройств: Android SDK (эквивалент Google XCode). Он работает как для Windows, так и для MacOS X, а также для других платформ. Его также можно использовать бесплатно, и вы можете скачать его здесь как часть Android Studio.
Плохо то, что его немного сложнее настроить. К тому же он довольно большой по размеру. Загрузка только для установщика составляет более 1 ГБ, стандартная установка — около 4 ГБ — и это еще не все.
После завершения загрузки вам необходимо запустить установщик. Пользователи Mac должны распаковать. После этого запустите Android studio. Нажмите «Настроить»,а затем «Диспетчер SDK». Отсюда вы можете установить последнюю версию Android, прокрутив список вниз и поставив галочку в поле рядом с ним.
Щелкните Установить пакеты,чтобы начать процесс установки. Подождите, это может занять некоторое время.
Настройка и использование виртуальных устройств
После того, как все будет сделано, пришло время настроить несколько виртуальных устройств. Для этого откройте AVD Manager (« Настроить»> «AVD Manager»).
У вас есть выбор: создать собственное устройство или выбрать предустановку в разделе «Создать виртуальное устройство». Когда вы закончите, нажмите Next, настройте версию Android и виртуальное оборудование и подтвердите. Теперь устройство должно быть частью вашего списка виртуальных устройств Android (AVD).
Выделите один и нажмите кнопку воспроизведения, чтобы запустить. Решите, нужно ли масштабировать дисплей до реального размера (который, скорее всего, будет очень маленьким), а затем нажмите « Запустить». Симулятору может потребоваться некоторое время, чтобы начать работу, поскольку он сначала должен запустить Android.
Затем найдите браузер на своем AVD и перейдите на любой сайт, который хотите проверить. Используйте панель инструментов для переключения между альбомным и портретным режимами.
Хотя это не самый простой процесс установки в мире, он определенно доступен большинству разработчиков.
5. XCode
Лучший способ проверить веб-сайты на совместимость с устройствами Apple — это собственный симулятор iOS компании. Это часть XCode, среды разработки Apple.
Плюс в том, что это бесплатно. Все, что вам нужно, это идентификатор разработчика. Однако недостатком является то, что он работает только на устройствах Apple. Пользователи Windows и Linux должны найти другие способы имитировать наличие iPhone или iPad.
Если у вас есть Mac и вы создали идентификатор для себя, вы можете получить XCode здесь. Просто найдите его по названию и скачайте подходящую версию.
Используйте симулятор iOS
Симулятор iOS — это отдельная программа, и вы можете использовать ее как таковую. После завершения установки XCode вы можете найти его здесь:
- Перейдите к приложениям, щелкните правой кнопкой мыши XCode и выберите « Показать содержимое пакета» .
- Затем перейдите в « Содержание»> «Разработчик»> «Приложения» .
- Симулятор iOS должен появиться в списке. Вы можете создать ярлык в доке для быстрого доступа.
После открытия вы можете изменить устройства, выбрав « Файл»> «Открыть симулятор»в главном меню.
Чтобы протестировать свой сайт, откройте браузер на своем виртуальном устройстве и введите любой веб-адрес. Имейте в виду, что это работает и в локальных средах разработки, моделируемое устройство может получить доступ к любому сайту, к которому имеет доступ ваш Mac.
Вот и все. Поздравляем, теперь у вас есть все устройства Apple практически на вашем компьютере.
Примечание для пользователей Windows:есть способы запустить XCode в Windows. Однакоони довольно запутанные и не самые практичные. Если вы ищете более удобное решение, чтобы проверить ваш сайт, либо купите Mac, либо выберите другой инструмент из этой статьи.
6. Opera Mini
Хотя Opera, конечно, не самый модный из браузеров, она по-прежнему используется на значительном количестве мобильных устройств, особенно на старых моделях. Часто Opera — лучший доступный вариант браузера для этих устройств. Следовательно, вам следует проверить, правильно ли загружается ваш веб-сайт.
Хотя мобильный эмулятор Opera в настоящее время не работает, вы все равно можете загрузить браузер Opera Mini на устройства Android. Это может позволить вам проверить, как загружается ваш сайт, из первых рук. Это, по крайней мере, даст вам представление о том, что испытывают пользователи классического мобильного браузера Opera при переходе на ваш сайт.
7. BrowserStack
Browserstack — это веб-платформа с инструментами для тестирования веб-сайтов в различных средах, операционных системах, браузерах и мобильных устройствах. Это платное решение с доступом к более чем 50 мобильным устройствам на разных операционных системах. Вы можете использовать его по-разному.
Например, вы можете тестировать веб-сайты с помощью кроссбраузерного тестирования в реальном времени, выполнять автоматическое тестирование для крупномасштабных проектов или проводить визуальное тестирование. Или, если вам нужно протестировать приложения, вы можете использовать функцию App Live, чтобы протестировать приложения в реальном времени на смоделированных мобильных устройствах или провести автоматическое тестирование. Стоимость стартует с 29 долларов в месяц при ежегодной оплате.
8. LambdaTest
Еще один способ тестирования вашего сайта на WordPress — LambdaTest. Это облачный инструмент автоматического тестирования браузеров, который использует более 2000 различных браузеров и операционных систем.
Вы можете проводить автоматизацию тестирования Selenium в смоделированных мобильных браузерах, тестировать локально размещенные сайты, выполнять тестирование географического местоположения и даже проводить отладку.
9. Mobile-Friendly Test
Поскольку Google по-прежнему делает упор на удобство для мобильных устройств, имеет смысл только то, что они предоставляют инструмент для анализа эффективности вашего сайта. После ввода URL-адреса инструмент мобильного тестирования проверит ваш сайт не только на отзывчивость, но и на другие удобные для мобильных устройств маркеры, такие как время загрузки страницы.
10. MobileTest.me
Эта услуга позволяет вам тестировать свой сайт на шести различных популярных устройствах, среди которых HTC One, Google Nexus 7 и Apple iPad Mini. Все, что вам нужно сделать, это щелкнуть по одному из них, ввести веб-адрес, и все готово. Это еще и бесплатно. Конечно, это не самый современный вариант тестирования, но это, безусловно, быстрый и простой способ проверить совместимость на нескольких старых устройствах без необходимости платить.
11. Responsinator
Этот инструмент предлагает тестирование для нескольких различных устройств Android и iOS, от iPhone 5 до Nexus 4. Как обычно, введите любой адрес, и соответствующий веб-сайт появится на экране выбранного устройства. У него нет опции переворачивания, но вы также можете выбрать альбомный вид для каждого устройства.
12. Screenfly
Последний в нашем списке инструментов для тестирования мобильных устройств — Screenfly предлагает довольно хороший набор устройств, включая телевизоры и настольные компьютеры. Однако планшетов и телефонов в списке тоже предостаточно. Его можно использовать бесплатно, а интерфейс очень интуитивно понятен. Настоятельно рекомендуется сделать несколько быстрых проверок!
Для проверки возможностей веб-сайтов WordPress доступен ряд инструментов мобильного тестирования. Разработчики и пользователи не испытывают недостатка в выборе: от инструментов браузера через эмуляторы iOS и Android до сторонних веб-решений.
У каждого инструмента есть свои сильные и слабые стороны. Тем не менее, у большинства из них есть один весомый плюс - они определенно дешевле, чем вложения в реальные устройства.
Приведенных выше решений должно хватить для тестирования в большинстве случаев. Какой из них вы выберете, зависит от ваших потребностей и предпочтений. В конце концов, все, что имеет значение, — это результат.
0 комментариев