Проверка сайта на мобильных устройствах онлайн: Как выглядит Ваш сайт на мобильных устройствах?

Как Адаптировать Сайт под Мобильные Устройства: Руководство

Sait Uncategorized

access_time

13 августа, 2020

hourglass_empty

6мин. чтения

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

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

Оптимизация Сайта под Мобильные Устройства — Почему это Важно?

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

Таким образом, наличие мобильного сайта автоматически открывает двери для большей аудитории. Фактически, 70% интернет-трафика сегодня (англ) приходит с мобильных телефонов.

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

Более того, 89% людей (англ), отметили, что готовы рекомендовать бренд, если их мобильный опыт будет положительным.

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

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

Преимущества Отзывчивого Сайта

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

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

Ниже мы более подробно описываем преимущества отзывчивого сайта.

1. Лучше для SEO

Отзывчивый дизайн означает, что сайт использует те же URL и HTML независимо от устройства, из которого на него заходят. Благодаря этому Google намного проще исследовать, индексировать и управлять контентом такого сайта. В результате SEO вашего сайта будет намного эффективней. 

2. Не Нужно Создавать Новый Дизайн Сайта

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

Таким образом, вы сэкономите много времени и энергии. 

3. Легче в Управлении и Экономней

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

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

7 Советов, Как Адаптировать Сайт под Мобильные Устройства

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

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

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

1. Придерживайтесь Подхода Mobile First

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

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

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

2. Преобразование Десктопной Версии Сайта в Мобильную

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

К счастью, есть как минимум два очень хороших способа сделать: конвертировать ваш сайт с помощью онлайн-сервиса или плагинов CMS.

Преобразование Сайта с Помощью Конструктора Онлайн

Во-первых, вы можете использовать специальный онлайн-сервис. Два самых популярных сервиса для создания мобильной версии сайта — bMobilized и Duda Mobile.

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

Сервис стоит 19,99$ в месяц. Помимо услуги создания мобильной версии сайта, bMobilized также предоставляет профессиональную поддержку для разработчиков.

Ещё один отличный сервис — Duda Mobile. Главная функция этого конструктора — создание полнофункциональных мобильных сайтов.

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

Кроме того, Duda Mobile предлагает набор расширенных функций для разработки отзывчивых сайтов электронной коммерции с поддержкой мультиязычности. Однако за такой функционал вам придётся заплатить от 22$ до 46$ в месяц.

Создание Мобильной Версии Сайта с Помощью Плагинов CMS

Второй вариант, как адаптировать сайт под мобильные устройства — использовать плагины CMS. Однако этот метод лучше подходит тем, у кого уже есть готовый сайт на CMS Joomla, Drupal или WordPress.

Пользователи WordPress для решения этой задачи могут использовать такие плагины, как WPtouch и JetPack.

Что касается пользователей Joomla, то им доступны такие решения, как Responsivizer и JoomlaShine.

Если же вы используете Drupal, рекомендуем ThemeKey и MobileTheme.

Однако имейте в виду, что не все из этих плагинов доступны бесплатно. Например, премиум-план WPtouch pro Enterprise обойдётся вам до 359$ в год.

3. Установите Отзывчивую Тему

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

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

Avada — одна из самых быстрых и отзывчивых тем в WordPress. С этой темой скорость загрузки вашего сайта на мобильных устройствах не превысит секунды.

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

Pingdom — лучший инструмент для проверки производительности сайта, который предоставит исчерпывающие данные о скорости загрузки страниц. Всё, что вам нужно сделать, это скопировать ссылку вашего сайта, а затем вставить её в столбец URL. Выберите, где вы хотите начать тестирование, и нажмите кнопку «Начать тест» («Start Test»).

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

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

Вот результат теста живой демонстрационной версии темы Avada — сайта-портфолио.

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

4. Никогда не Используйте Flash

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

Кроме того, Flash может навредить SEO.

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

5. Поддерживайте Скорость Сайта

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

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

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

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

• Уменьшите количество публикаций на главной странице (ограничьтесь 5-10 постами).
• Удалить ненужные виджеты.
• Удалите неважные, неактивные или ненужные плагины.
• Поддерживайте чистоту и порядок на странице.

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

6. Следите за Внешним Видом Вашего Сайта

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

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

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

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

7. Включите Ускоренные Мобильные Страницы (AMP)

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

AMP широко используется ведущими компаниями, включая Twitter, New York Times и Adobe. Вот несколько причин, почему она так популярна.

Ускоряет Загрузку Сайта на Мобильных Устройствах

По данным Google, около 53% мобильных пользователей покидают сайт, загрузка которого занимает более 3 секунд (англ).

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

Делает Сайт Более Заметным в Поиске

Google обозначает AMP-сайты в мобильном поиске иконкой молнии. Её задача, обозначить для пользователей сайты с поддержкой AMP и без.

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

Google AMP Cache Повышает Производительность Сервера

Google AMP Cache — сеть доставки контента (CDN), основанная на прокси. Используется для ускорения процесса передачи данных с действительных документов AMP пользователю.

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

Вот некоторые функции Google AMP Cache, которые могут повысить производительность вашего сервера: 

• Может сохранять изображения и данные шрифтов
• Автоматически ограничивает максимальные размеры изображения
• Конвертация изображений в форматы для мобильных устройств
• Может снизить качество изображения, чтобы ускорить процесс загрузки
• Использует безопасные каналы (HTTPS) и последние версии веб-протоколов (SPDY, HTTP/2).

Выводы

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

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

• Придерживайтесь подхода Mobile first.
• Превратите свой десктопный сайт в мобильный с помощью онлайн-сервисов, таких как bMobilized и Duda Mobile, или воспользуйтесь плагином мобильной оптимизации для вашей CMS.
• Используйте отзывчивую тему и протестируйте её с помощью Pingdom.
• Не используйте Flash!
• Поддерживайте нормальную скорость вашего сайта, используя быстрый и надёжный хостинг.
• Убедитесь, что ваш сайт хорошо выглядит.
• Попробуйте использовать ускоренные мобильные страницы (AMP), чтобы повысить производительность веб-сайта на мобильных устройствах.

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

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

Оптимизация сайта для мобильных устройств — SEO на vc.ru

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

{«id»:98943,»url»:»https:\/\/vc.ru\/seo\/98943-optimizaciya-sayta-dlya-mobilnyh-ustroystv»,»title»:»\u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0441\u0430\u0439\u0442\u0430 \u0434\u043b\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432″,»services»:{«facebook»:{«url»:»https:\/\/www.

facebook.com\/sharer\/sharer.php?u=https:\/\/vc.ru\/seo\/98943-optimizaciya-sayta-dlya-mobilnyh-ustroystv»,»short_name»:»FB»,»title»:»Facebook»,»width»:600,»height»:450},»vkontakte»:{«url»:»https:\/\/vk.com\/share.php?url=https:\/\/vc.ru\/seo\/98943-optimizaciya-sayta-dlya-mobilnyh-ustroystv&title=\u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0441\u0430\u0439\u0442\u0430 \u0434\u043b\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432″,»short_name»:»VK»,»title»:»\u0412\u041a\u043e\u043d\u0442\u0430\u043a\u0442\u0435″,»width»:600,»height»:450},»twitter»:{«url»:»https:\/\/twitter.com\/intent\/tweet?url=https:\/\/vc.ru\/seo\/98943-optimizaciya-sayta-dlya-mobilnyh-ustroystv&text=\u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0441\u0430\u0439\u0442\u0430 \u0434\u043b\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432″,»short_name»:»TW»,»title»:»Twitter»,»width»:600,»height»:450},»telegram»:{«url»:»tg:\/\/msg_url?url=https:\/\/vc.

ru\/seo\/98943-optimizaciya-sayta-dlya-mobilnyh-ustroystv&text=\u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0441\u0430\u0439\u0442\u0430 \u0434\u043b\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432″,»short_name»:»TG»,»title»:»Telegram»,»width»:600,»height»:450},»odnoklassniki»:{«url»:»http:\/\/connect.ok.ru\/dk?st.cmd=WidgetSharePreview&service=odnoklassniki&st.shareUrl=https:\/\/vc.ru\/seo\/98943-optimizaciya-sayta-dlya-mobilnyh-ustroystv»,»short_name»:»OK»,»title»:»\u041e\u0434\u043d\u043e\u043a\u043b\u0430\u0441\u0441\u043d\u0438\u043a\u0438″,»width»:600,»height»:450},»email»:{«url»:»mailto:?subject=\u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0441\u0430\u0439\u0442\u0430 \u0434\u043b\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432&body=https:\/\/vc.ru\/seo\/98943-optimizaciya-sayta-dlya-mobilnyh-ustroystv»,»short_name»:»Email»,»title»:»\u041e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043d\u0430 \u043f\u043e\u0447\u0442\u0443″,»width»:600,»height»:450}},»isFavorited»:false}

5968 просмотров

Есть три основные и две дополнительные возможности оптимизации для мобильной выдачи.

1. Мобильные сайты

Содержание для десктопов и мобильных устройств находится на разных страницах с разными URL. Обычно мобильный сайт размещают на поддомене m.site.ru.

• Если разработали мобильный сайт, не забудьте связать его страницы с десктопными специальными атрибутами. Для этого нужно на мобильных страницах настроить тег <link> с элементом rel=»canonical», указывающим на страницу для компьютеров. А на десктопных страницах — с элементом rel=»alternate», который укажет на соответствующую мобильную страницу. Каждой десктопной должна соответствовать только одна мобильная страница, а каждой мобильной — одна десктопная.

  Задать rel=»alternate» можно также с помощью специальных атрибутов в Sitemap. Поисковики поддерживают такие теги в sitemap.xml:

• Настройте переадресацию. Необходимо настроить автоматическую переадресацию с помощью HTTP-запроса или JS. HTTP-запрос учитывает агент пользователя и перенаправляет посетителя на соответствующую версию сайта. В документации Google рекомендуется настроить 302-й ответ сервера для такого перенаправления. Перенаправление с помощью JS будет отнимать драгоценные секунды при загрузке страницы. Принцип работы скрипта: если минимальная ширина экрана устройства равна определенному значению в пикселях, то необходимо перенаправить пользователя на соответствующую страницу rel=”alternate”. Сначала браузер загрузит страницу, затем выполнит JS, а потом при необходимости перенаправит пользователя на подходящую версию.

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

URL и HTML-код страниц на разных устройствах одинаковые, меняется только CSS — размеры и расположение элементов на странице в зависимости от величины экрана устройства.

• Нужно разрешить Googlebot сканировать CSS, JS, изображения на страницах.

• При реализации адаптивной версии важно настроить тег meta name=»viewport».

Метатег передает браузеру информацию о ширине экрана устройства. В соответствии с этими данными браузер строит модель CSSOM. Справка Google

3. Динамический показ

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

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

Сравнение трех основных вариантов адаптации сайта

Для наглядности занесем все, что можно сравнить, в таблицу:

Адаптивный дизайн

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

Динамический показ

При динамическом обновлении URL остается одинаковым для разных устройств. Чтобы реализовать динамическое изменение сайта, не нужно настраивать переадресацию, а HTML и CSS можно изменить или упростить для мобильных, что повышает скорость загрузки. Однако при динамическом показе необходимо настраивать HTTP-запрос Vary для определения агента пользователя, а это создает дополнительную нагрузку на сервер. К тому же нужно создать варианты кода для разных устройств, сложно учесть непопулярные диагонали экранов, поэтому определение агента может работать с ошибками.

Хорошо поддаются оптимизации по скорости загрузки, снижают нагрузку на сервер, а страницы можно сделать удобными для пользователей с мобильными устройствами. К тому же есть возможность выбрать версию отображения. Поскольку это отдельный мобильный сайт, как правило, поддомен, то HTML, стили, URL одних структурных страниц будут разными. Необходимо настраивать HTTP- или JS-перенаправление пользователей с десктопов на мобильный сайт и наоборот. Помимо настройки перенаправлений, нужно связать десктопную и мобильную версию специальными атрибутами. Могут быть проблемы с дублированием контента.

Каким бы беспристрастным ни пытался казаться Google, официальная позиция по мобильным сайтам, как о способе оптимизации, четкая:

4. AMP

Accelerated Mobile Pages — технология Google для создания ускоренных мобильных страниц сайта. Рекомендуется внедрение AMP в первую очередь для информационных и новостных ресурсов, блогов. Обычная AMP открывается меньше чем за секунду, поэтому UX ускоренных страниц успешнее, чем на обычных. Это достигается за счет полного отказа от пользовательского JS. Не поддерживаются некоторые HTML-теги, страницы реализуются по одному шаблону, отсутствуют формы, виджеты. Чтобы автоматизировать настройку AMP, можно использовать специальные плагины для популярных CMS.

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

«Яндекс» не поддерживает AMP и не уважает атрибут rel=»canonical», поэтому иногда ускоренные страницы оказываются в выдаче «Яндекса». Их можно закрыть от индексации для робота ПС в robots.txt — с помощью метатега robots или с помощью HTTP-заголовка X-Robots Tag.

5. Яндекс.Турбо

Турбо-страницы — технология «Яндекса» для создания быстрых страниц даже при плохом интернет-соединении. Высокая скорость загрузки достигается за счет шаблонизированного создания страниц, отсутствия пользовательского JS. Сделать страницы похожими на основной сайт можно с помощью юзерского CSS. Создать Турбо можно в панели «Вебмастера» двумя способами: с RSS-каналом или YML-фидом. Турбо можно делать для информационных ресурсов и для интернет-магазинов. Турборезультаты в выдаче «Яндекса» помечаются специальным значком в виде ракеты.

В «Яндекс.Турбо» можно реализовать внутренний поиск (с переходом на десктопную версию), минимальную перелинковку для интернет-магазина, покупку в один клик и с корзиной.

Главное отличие «Яндекс.Турбо» от AMP заключается в том, что турбостраницы располагаются на домене «Яндекса», соответственно, ПС получает трафик, а бизнес — только возможность получить трафик на обычной версии.

Стоит внедрить ускоренные страницы «Яндекса» и Google, особенно для ситуативного и информационного контента. Однако не думайте, что Турбо и AMP заменят адаптивные и динамические сайты. По крайней мере, пока ограничено внедрение пользовательского функционала.

PWA

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

PWA — технология Google, которая сообщает сайту функциональность мобильного приложения. Прогрессивные веб-приложения — дополнительный способ оптимизации ресурса. Рекомендуется использовать их для оптимизации скорости и для доступа с мобильных устройств при плохом интернет-соединении.

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

PWA реализуется в рамках TLS — безопасного протокола соединения, поэтому по умолчанию любое прогрессивное веб-приложение является безопасным.

Из дополнительных плюсов: у вас появляется возможность отправлять push-уведомления пользователю, установившему сайт-приложение.

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

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

1. PageSpeed Insights

PageSpeed Insights — инструмент Google для проверки скорости загрузки страницы. Если мы говорим про оптимизацию, ускорение загрузки сайта и его версий — первая стратегическая задача. Из PageSpeed можно вытащить информацию об изображениях, которые нужно оптимизировать, о минификации CSS и JS, загрузке текста без веб-шрифтов. Рекомендации PageSpeed Insights хороши, однако не всегда объективны.

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

2. Google Mobile Friendly Test

Это инструмент, который заточен на проверку юзабилити мобильных страниц. Требуется только выбрать URL, вставить его в строку, далее следовать рекомендациям. Если вы увидели зеленое объявление: «Страница оптимизирована для мобильных устройств», не торопитесь радостно закрывать вкладку. Обратите внимание на подсказку: «Проблемы при загрузке страницы».

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

3. Яндекс.Вебмастер. Проверка мобильных страниц

Простой инструмент в «Яндекс.Вебмастере» с понятным отчетом. Дополнительно напоминает про отсутствие или наличие турбостраницы для проверяемого URL.

Отображаемые проблемы: наличие viewport, Flash-элементов, Java-апплетов, Silverlight-плагинов, Турбо-версии; горизонтальная прокрутка контента, величина шрифта.

1. Google Search Console. Удобство для мобильных

Отчет в Google Search Console по удобству использования мобильных сайтов показывает ошибки и количество страниц в поиске без ошибок.

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

Небольшой чек-лист по проверке мобильной версии

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

1. Высокая скорость загрузки на 2G, 3G.
2. Настроен протокол HTTP/2. Проверка: http2.pro.
3. Открыты для сканирования CSS и JS. Проверить можно в Google Mobile Friendly Test.
4. Интуитивно понятная навигация.
5. Шрифт не менее 12 px.
6. Кликабельные элементы не перекрывают друг друга. Проверить можно в Google Lighthouse.
7. Расстояние между интерактивными элементами не менее 48px. Проверить можно в Google Lighthouse.
8. Все ссылки кликабельны.
9. Для интернет-магазинов есть возможность покупки в один клик.
10. Номера телефонов кликабельные.
11. Есть иконки мессенджеров с переходом в этот мессенджер.
12. Pop-up и всплывающие окна не занимают весь экран смартфона или планшета, их удобно закрывать.
13. Текст занимает меньше одного экрана прокрутки.
14. В полях форм используется автозаполнение input type. Кстати, иногда достаточно только номера телефона, остальное узнает у клиента и заполнит ваш менеджер. Если недостаточно, то ввод телефона — первое поле в форме.
15. Уменьшен вес видео, аудио, изображений. Не тратим байты пользователя.
16. Внедрены фавиконки для разных браузеров и устройств.

Автор: Граевская Лилия, SEO Group Head,

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

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

Приветствую вас! Вот и настало время поговорить про адаптивность сайта. Это как вы наверняка знаете очень важный параметр. С каждым новым днем количество пользователей планшетов и смартфонов увеличивается. У меня на блоге приходит 30% трафика с мобильных устройств. Когда процент мобильного трафика увеличился я стал задумываться об адаптивной верстке, что советую сделать и вам. Что вам это даст? Это позволит повысить лояльность к блогу как поисковых роботов, так и посетителей.

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

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

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

1. Онлайн сервис ami.responsivedesign.is

Вы попали на главную страницу сервиса.

Прокручиваем в самый низ и в поле ввода пишем адрес вашего блога. Жмем на кнопку «Go».

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

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

2. Онлайн сервис deviceponsive.com

Здесь все аналогично, как и в предыдущем сервисе. Вставляем адрес сайта в поле ввода и жмем «Go».

Теперь нам нужно спуститься немного ниже, где мы увидим первое устройство «MacBook», которое имеет разрешение 1280 х 800 пикселей.

Вы можете прокручивать страничку вниз и нажимать на необходимые элементы и проверять адаптивность. Если прокрутить ниже, то вы увидите, как выглядит ваш проект на других устройствах, начиная от разрешения 1280×800, и заканчивая 320×240 пикселей. Этот сервис покажет вам полную картину, в отличие от предыдущего.

3. Онлайн сервис responsinator.com

В левом верхнем углу в окошко вставляем название вашего ресурса, нажимаем «Go». Придется немного подождать, пока страница прогрузится, и вы сможете посмотреть результат.

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

4. Онлайн сервис quirktools. com

Еще один сервис с помощью которого вы проверите адаптивность сайта онлайн. В поле вставляем название веб-сайта и нажимаем «Go».

Что здесь мне нравиться, то что сервис может показать адаптивность даже телевизора)).

5. Онлайн сервис symby.ru

Проделываем знакомые вам шаги и радуемся результату.

6. Онлайн сервис responsive.is

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

7. Онлайн сервис mattkersley.com

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

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

Знаменитый браузер Mozilla Firefox имеет богатый функционал. С помощью этого из инструментов Мозилы мы и проверим сайт на адаптивность. Выполняем следующие шаги: идем в «меню» — «разработка» — «адаптивный дизайн». Эти действия можно проделать с помощью клавиатуры, нажав одновременно несколько клавишей ++[M].

После проделанных шагов вы увидите следующее.

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

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

С помощью мега гиганта Google Chrome, также можно проверить адаптивность вашего проекта. Делаем следующее: идем в «меню», далее в пункт «Дополнительные инструменты», и «инструменты разработчика ()».

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

Если вы хотите проверить сайт на адаптивность Яндекс, вам нужно пройти регистрацию в Яндекс. Вебмастер. Заходим в вебмастер, далее находим пункт «Проверка мобильных страниц», нажимаем на этот пункт и смотрим результат.

Заключение

Я считаю, что в повседневной работе с дизайном сайта проще будет использовать функционал браузеров Google и Mozilla. Ну а для успокоения души пользуйтесь онлайн сервисами для проверки адаптивности сайта. Проверяйте ваш проект на адаптивность, вносите изменения, исправляйте ошибки. Ну а на этом у меня все. Всем пока!

С уважением Вячеслав Коптяков!

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

Проверить

Что такое адаптивный сайт?

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

Чем отличается адаптивный сайт от мобильной версии?

Если у сайта есть мобильная версия, то при загрузке такого сайта с мобильного телефона, вас перенаправят на другой адрес: site.ru → m.site.ru. Мобильная версия — это отдельный сайт с другим адресом.

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

Данная проблема решается двумя способами: добавить мобильную версию m.site.ru или НЕ делать отдельный сайт, но добавить вашему основному сайту адаптивности. Это специальные стили и скрипты, которые включаются, если ширина экрана слишком мала: например, спрятать меню, увеличить шрифт, вместо крупных изображений показать маленькие и т.п.

Строго говоря, нельзя сравнивать адаптивный сайт и мобильную версию сайта. По сути адаптивный сайт = полная версия + версия для планшетов + версия для телефонов (мобильная), и всё это в одном флаконе. То есть, одно понятие заключено в другом.

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

Почему ширина телефона в данном сервисе такая маленькая?

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

Какой у меня размер окна браузера?

На устройствах с ретино-подобными дисплеями показанные размеры будут отличаться от реального разрешения в пикселях, которое указано в спецификации устройства. Смартфоны покажут 320×480 или 480×800 пикселей, планшеты — 1280×800.

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

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

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

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

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

1. Google Mobile Friendly

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

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

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

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

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

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

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

4. Mobile Checker от W3C

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

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

5. Responsinator

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

UPD1: 20.07.2017:

6. Adaptivator

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

UPD2: 3. 11.2017:

7. iloveadaptive.ru

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

Вывод

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

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

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

Использование

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

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

Значение метатега viewport не задано

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

В метатеге viewport должно быть значение device-width

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

Контент шире экрана

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

Слишком мелкий шрифт

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

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

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

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

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

Быстрая проверка адаптивной верстки

Популярный интернет обозреватель (браузер) Mozilla Firefox оснащен встроенным инструментов проверки дизайна сайта на пригодность к отображению на мобильных устройствах. Чтобы им воспользоваться зайдите в «Меню» — «Разработка» — «Адаптивный дизайн». Либо просто нажмите на клавиатуре одновременно три клавиши ++[M]

Вы должны увидеть примерно следующую картину:

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

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

После этого нажимаем иконку адаптивного дизайна (либо одновременно нажимаем на клавиатуре ++[M] ):

В середине экрана вы увидите как будет отображаться ваш сайт на экранах мобильных устройств:

SEO тестирование мобильного дизайна

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

Для проверки адаптивности с помощью сервиса Google заходим по следующему адресу и вбиваем имя своего сайта: https://www.google.com/webmasters/tools/mobile-friendly/ .

Вот так выглядит результат проверки моего блога:

С Яндексом немного сложнее, для проверки надо обязательно зарегистрироваться в сервисе Яндекс.Вебмастер и воспользоваться бета версией интерфейса:

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

Основной задачей этих сервисов презентовать (показать) как будет выглядеть ваш сайт на мобильном устройстве. Сайтов с таким функционалом великое множество. Я приведу лишь некоторые из них. В большинстве случаев они дублируют встроенный функционал FireFox и Chrome.

Google resizer

Начну опять же с Google, у которого есть свой сервис демонстрации адаптивности: http://design.google.com/resizer/#

Quirktools screenfly

Второй симпатичный сервис — это http://quirktools.com/screenfly/ . Он покажет как может выглядеть ваш сайт даже на телевизоре!

Symby.ru adaptest

Ну и чтобы не обидеть «отечественного производителя» приведу пример еще одного сайта: http://symby.ru/adaptest/ . На одной странице вы увидите сразу несколько представлений с различными разрешениями экранов.

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

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

PageSpeed Insights

Google как всегда впереди планеты всей: https://developers.google.com/speed/pagespeed/insights/ . Этот сервис покажет как выглядит сайт на экране телефона и даст рекомендации по оптимизации кода для увеличения скорости загрузки на мобильных устройствах.

WebPageTest

И в заключении приведу пример сервиса, который не только покажет как выглядит сайт на мобильном устройстве, но и покажет скорость его работы: http://www.webpagetest.org/

Выводы

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

Читайте также…

Основной чек-лист тестирования сайта | Cetera Labs

Верстка

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

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

• Должен быть исполнен стандарт верстки сайтов.
• Открыть верстку во всех оговоренных браузерах, и удостовериться, что работают все динамические элементы и нет явных ошибок отображения. В том случае, если верстка делалась по макету, проверить на соответствие без «ловли пикселей».
• Тестировать адаптивность, искать ошибки отображения, проверять доступность навигации и всех видимых элементов управления для пользователя с мобильного устройства.
• Отсутствие горизонтального скролла.
• Установлен DOCTYPE.
• Проверить наличие и правильность meta viewport(минимально width=device-width, initial-scale=1.0, но в отдельных случаях могут быть дополнения).
• Google Page Speed — на верстке не должно быть ошибок совсем, на готовом сайте допускаются небольшие ошибки, но сайт должен оставаться в зеленой зоне и для мобильных, и для десктопов.
• HTML-валидация, но без фанатизма. Оправданные ошибки допускаются.
• https://validator.w3.org/i18n-checker/.
• Нет ошибок JS в консоли браузера.
• Корректная работа при вбивании реального текста в любые текстовые блоки, заголовки, списки, таблицы.
• Все ссылки легко различимы и имеют заметное :focus-состояние.
• Отсутствие ошибок отображения при увеличенном шрифте.
• HTML5 формы.
• Удаление необязательных блоков не приводит к ошибкам отображения. Например, в дизайне предусмотрено промо-изображение на главной на всю ширину экрана, удаление такого изображения не должно сломать верстку.
• Элементы, реагирующие на нажатие, реагируют и на наведение курсора.
• Наличие версии для печати. Она должна быть корректна, читабельна и информативна.
• Готовый сайт показать дизайнеру для тестирования красоты, что в процессе ничего не испортили и не потеряли.

Функционал готового сайта

Если разработка велась по техническому заданию, то в первую очередь протестировать на соответствие ТЗ.

Содержимое

• Нет ошибок Русского языка.
• Удалены рыбные тексты.
• На всех страницах есть контент.
• Картинки, видеофайлы, аудиофайлы доступны и корректно отображаются/проигрываются.
• Наличие политики конфиденциальности и подтверждения согласия на обработку персональных данных от пользователей при сборе любых данных.
• Наличие фавикона. https://realfavicongenerator.net/
• Наличие иконок для мобильных устройств. https://realfavicongenerator.net/ http://www.kylejlarson.com/blog/adding-an-icon-for-iphone-ipad-android-to-your-website/
• Наличие ошибки 404, и она отдает правильный http-код.
• Наличие копирайтов владельцев сайта.
• Наличие и корректность контактных данных.
• Схема проезда на основе Яндекс.Карт.
• На номере телефона ссылка tel.
• Наличие копирайтов Cetera Labs и ссылки на сайт cetera.ru, если договором это не запрещено.
• Наличие ссылки Сообщить об ошибке.
• Выполняются требования стандарта публикации для основных текстовых страниц сайта. Не принимаются во внимание статьи (особенно SEO-статьи), новости, товары.
• Нарисован шаблон баннеров в т.ч. для https://kb.cetera.ru/docs/design/createbanner.
• Форматирование текстов и их стиль единообразны.

Функционал

• Проверить сайт на битые ссылки.
• Доступность всех страниц сайта из навигации главной и побочной.
• Ссылка на открытую страницу подсвечена в меню.
• Логотип ведет на главную страницу.
• Постраничная навигация работает корректно (есть подсветка активной страницы, она не является ссылкой; страницы переключаются корректно).
• Сайт с доменом второго уровня доступен по адресу с www и без.
• Наличие поиска и его работоспособность.
• Наличие карты сайта. Должна покрывать все страницы сайта.
• Наличие ссылки на главную страницу(логотип или явная ссылка).
• Наличие и работоспособность хлебных крошек, если предусмотрено дизайном.
• ЧПУ (для старых сайтов не следует менять урлы).
• Наличие заголовка h2 на всех страницах.
• Заполнен тег title на всех страницах.
• Создаётся sitemap.xml, есть robots.txt.
• Все формы на сайте должны быть протестированы на предмет работоспособности, корректности ответов, обработки ошибок. Скорее всего результаты работы форм должны сохраняться в БД сайта, а так же должны отправляться письма владельцам о результатах заполнения. Если это предусмотрено и требовалось, то должно работать корректно.
• Корректно работают иконки и виджеты социальных сетей.
• Корректно работает отправка почты с сайта и настроены email шаблоны.
• Геозависимый контент выдается корректно (проверять с помощью прокси, например: http://foxtools.ru/Proxy)
• Протестирована и корректно работает прочая функциональность на сайте. При выполнении этого пункта руководствуемся ТЗ, исходной задачей на разработку, комментариями разработчика и/или здравым смыслом.
• Правильно настроен HTTPS.
• Отсутствие ошибок в логах сервера.
• Отсутствие ошибок во встроенных средствах самоконтроля CMS.
• В корне сайта нет посторонних скриптов, папок, backup’ов или дампов, phpmyadmin, phpinfo и прочего.

Интеграция с внешними системами

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

Безопасность и быстродействие

• Нет визуальных проблем с быстродействием.
• Установлены последние версии используемых CMS, фреймворков, библиотек.
• Настроено резервное копирование.
• Подключен к системе мониторинга, настроены email/SMS уведомления о неработоспособности сайта/сервера (оперативное оповещение о перебоях в работе сайта).
• После запуска не наблюдается проблем в мониторинге.
• Нет ли у посторонних пользователей доступа к служебным/секретным/закрытым страницам директориям и файлам сайта.
• Выполнены требования Google Page Speed и Pingdom полностью или близко к этому(сайт находится в зеленой зоне и на мобильных, и на десктопах).
• Во встроенных функциях мониторинга CMS нет проблем со скоростью работы.
• Во встроенных функциях мониторинга CMS нет проблем с безопасностью.

---

Поделиться в соц. сетях:    

7 причин и 3 способа оптимизировать сайт для мобильных устройств — Джино • Журнал

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

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

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

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

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

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

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

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

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

Создание отдельной мобильной версии

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

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

Использование адаптивной вёрстки

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

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

Динамический показ (RESS)

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

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

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

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

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

Использование смартфонов в 2012 году, по данным Cisco, составило 81%, потому есть хороший шанс увеличить количество посетителей вашего сайта за счет реализации его мобильной версии.

Однако как проверить работоспособность сайта не только на телефонах с Android, но и на устройствах iOS Ipad, на десктопах и ноутбуках? Возможно, некоторых из этих устройств имеются у вас под рукой – в таком случае вы можете самостоятельно вбить адрес своего сайта в браузер и посмотреть, как будет выглядеть ваш сайт. Однако как протестировать сайты для широкого спектра различных устройств? Ведь не каждый обладает сразу всеми возможными девайсами в своем распоряжении. Не стоит переживать, поскольку выход есть: достаточно воспользоваться эмуляторами мобильных устройств.

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

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

Просмотр сайта с iPad и iPhone

iPad Peek – прекрасный ресурс, позволяющий посмотреть, как будет выглядеть ваш сайт на небольшом экране популярного планшетного устройства от Apple. Также вы можете оценить, как будет работать ваш сайт на iPhone с текущей поддержкой версий 4 и 5.

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

Эмулятор разных устройств

Mobile Phone Emulator – еще один бесплатный сервис, позволяющий просматривать и тестировать свой сайт на различных устройствах. У этого эмулятора мобильных устройств в настоящее время имеется поддержка широкого спектра смартфонов от Apple, Samsung, BlackBerry и HTC. Данный сайт – прекрасный выбор для тестирования своего сайта в различных браузерах разных мобильных устройств.

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

Устанавливаем свой собственный размер экрана

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

Несмотря на то что этот сервис не отображает контур или корпус устройства, он предлагает гораздо больше в плане различных возможностей и размеров экрана. Сервис поддерживает значительное количество разных устройств, включая даже Kindle Fire и Motorola Razr. Самая интересная возможность – ввод своих собственных разрешений экрана для проверки совместимости с некоторым диапазоном экранных размеров.

Opera Mobile Emulator

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

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

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

Плагин MobiLead Magnet

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

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

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

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

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

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

Mobi Ready: получите подробную информацию о том, как ваш сайт выполняется на мобильном устройстве.

Google PageSpeed Insights: определите показатель PageSpeed – метрику, которую использует Google для ранжирования сайтов.

Chrome Dev Tools: выполните мобильную эмуляцию, включая сенсорные действия, в браузере Chrome.

Источник: www.wpkube.com

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

CrossBrowserTesting

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

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

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

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

Удобство использования мобильных устройств для доступа в Интернет за последние несколько лет увеличилось. Фактически, смартфоны заняли большую часть рынка настольных компьютеров с точки зрения использования Интернета. Отчет Statista показывает, что 50,4% всего мирового онлайн-трафика приходится на использование мобильного Интернета.

Источник: Statista

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

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

Зачем проводить тестирование мобильного веб-сайта?

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

• Делает веб-сайты легкодоступными

Мобильный веб-сайт можно легко получить через любой браузер на нескольких мобильных телефонах, включая iPhone, Android, Blackberry и т. Д.Кроме того, Google использует оптимизированные для мобильных устройств веб-сайты в качестве фактора ранжирования, а это означает, что адаптивный мобильный вид веб-сайта поможет вам занять более высокое место в поисковых системах и привлечь больше посетителей для развития вашего бизнеса.

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

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

• упрощает поиск веб-сайтов

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

• : скорость и точность

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

• улучшает взаимодействие с пользователем

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

• Улучшает внешний вид веб-сайта

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

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

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

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

Давайте рассмотрим 5 лучших способов сделать это —

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

Эмуляторы программного обеспечения

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

Читайте: эмулятор против симулятора для мобильного тестирования

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

Симулятор

iOS представляет собой встроенную утилиту с Xcode, которую можно загрузить из Mac App Store. Чтобы получить доступ к симулятору, выполните следующие действия:

• Прежде всего, загрузите Xcode из магазина приложений Mac
• В меню Xcode выберите Xcode и щелкните Открыть инструмент разработчика , а затем выберите iOS Simulator.

Xcode входит только в операционные системы Mac, что означает, что ваше веб-приложение можно протестировать только для устройств iOS. Чтобы протестировать свой веб-сайт для приложений Windows, вы можете использовать эмулятор Windows Phone Emulator, который поставляется с полнофункциональным SDK, несколькими разрешениями экрана, инструментами для создания снимков экрана и т. Д.

Для устройств Android вы можете загрузить эмулятор Android Studio, который позволяет создавать виртуальное мобильное устройство для тестирования приложений Android и тестирования мобильных веб-сайтов. Эмулятор Android Studio интегрирован с пакетом Android SDK и безупречно работает в Windows, Mac, OS и Linux.

2. Проверьте код HTML и CSS

Чтобы проанализировать функциональность веб-приложения на всех платформах, рекомендуется проверить код HTML и CSS вашего сайта. Теперь, чтобы проверить свой HTML, CSS, вы можете воспользоваться помощью инструментов с открытым исходным кодом, таких как W3C MobileOK Checker. Это веб-инструмент автоматической проверки, который позволяет вам проверить совместимость вашего сайта на мобильных устройствах. Он предоставляет вам несколько тестовых сценариев, которые проверяют удобство использования вашего сайта.

Другой вариант — это инструмент разработчика Google Chrome, который позволяет исправить незначительные проблемы с HTML и CSS вашего сайта. Используя эту утилиту, вы можете быстро проверить поведение своего веб-сайта на экранах различных размеров, времени загрузки и регулирования сети.

3. Используйте инструмент браузера — ответчик

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

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

• Посетите официальный сайт Responsinator
• Введите URL-адрес веб-сайта в данное поле и нажмите Перейти .
• Он начнет генерировать предварительный просмотр веб-сайта в реальном времени в соответствии с разрешением популярных устройств.

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

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

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

Конечно, непросто протестировать веб-приложение на каждом устройстве вручную, так как это требует инвестиций, ресурсов и времени. Вместо этого вы можете выбрать набор для тестирования мобильных устройств, который состоит из самых популярных мобильных веб-браузеров, таких как Chrome, Safari, Opera, Mozilla и т. Д. Он поможет вам протестировать свой сайт в реальных условиях и предоставит вам точные результаты, которые Вы ищете.

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

5. LT-браузер для адаптивного тестирования

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

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

Насколько полезен LT-браузер при тестировании мобильных сайтов?

Браузер

LT дает вам конкурентное преимущество перед другими методами, предлагая некоторые современные функции. Есть несколько способов сделать общий вид веб-сайта более привлекательным и доступным для мобильных устройств.Такие как-

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

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

СКАЧАТЬ LT BROWSER

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

Теперь вы знаете, как протестировать свой мобильный веб-сайт на мобильных телефонах, но как сделать весь этот процесс более продуктивным?

Каким методам вы должны следовать для успешного и эффективного проведения тестирования мобильного веб-сайта?

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

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

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

Заключительные слова

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

Удачного тестирования!

Рахул Джайн

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

Автор

Рахул Джайн

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

Тестирование ваших сайтов на реальных устройствах | Ада Роуз Кэннон | Samsung Internet Developers

Руководство по удаленной отладке с помощью Samsung Internet

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

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

Если вам посчастливилось иметь Samsung Note, телефон Galaxy S или недавний iPhone, вы можете предположить, что другие люди используют устройство того же калибра, что и вы.С большим объемом памяти и мощным набором микросхем для работы требовательных веб-сайтов. Многие пользователи не используют такие мощные устройства.

По данным Google, среднее устройство эквивалентно Samsung S7 2016 года выпуска. В нем было 4–8 процессоров с тактовой частотой 2,3 ГГц и 4 ГБ оперативной памяти. Хотя это и не важно, веб-страница обычно использует только одно из этих ядер и редко работает на полную мощность.

Это может показаться довольно низкой планкой и действительно неплохим устройством, но это среднее устройство, делая его самым низким устройством, вы исключаете 50% пользователей !!

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

Лучшим устройством для тестирования было бы устройство типа 75-го или 90-го процентиля.

Мое исследование показало, что P75 во всем мире имеет удивительно похожие характеристики с Moto G4: все ядра A53, 4–8 из них, вероятно, 28-нм техпроцесс. 2 ГБ оперативной памяти. Более старая версия Android.

— Алекс Рассел, Google

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

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

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

Получение устройств

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

Настройка удаленной отладки

Эти инструкции относятся к веб-браузеру, Интернету Samsung (поскольку это Интернет-публикация Samsung), но они также применимы и к Chrome.

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

Использование USB-кабеля

Требования: портативный компьютер, испытательное устройство, USB-кабель для передачи данных.

Шаг 1, включить отладку по USB

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

Step 2,

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

Если на вашем телефоне нет этого сообщения, вам, возможно, придется проверить несколько вещей, которые вы можете проверить здесь:

Мне пришлось установить Android SDK, запустить adb usb и перевести устройство в режим передачи изображений режим.

Step 3,

На телефоне откройте Samsung Internet (также работает с Google Chrome) на странице, которую вы хотите проверить.

На рабочем столе откройте браузер Chromium (например, Chrome или Edge) и перейдите к chrome: // inspect .Вы должны увидеть список доступных веб-страниц для отладки. Нажмите и проверьте на странице, которую вы хотите отладить.

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

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

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

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

Внешний вид

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

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

Метод 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% пользователей заявили, что «плохой мобильный опыт снижает вероятность взаимодействия с компанией». Мобильный просмотр практически повсеместен, и теперь пользователи ожидают, что компании будут предлагать отличные возможности на любом устройстве. Если вы не хотите уступить их бизнес своим более мобильным конкурентам, вы должны сделать это. Теперь это важная часть интернет-маркетинга.

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

Моделирование мобильных устройств в режиме устройства в Chrome DevTools

Технический писатель, Chrome DevTools и Lighthouse

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

Device Mode — это набор функций в Chrome DevTools, которые помочь вам моделировать мобильные устройства.Эти функции включают:

Ограничения

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

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

Имитация мобильного окна просмотра

Нажмите Toggle Device Toolbar , чтобы открыть пользовательский интерфейс, позволяет имитировать мобильное окно просмотра.

Рисунок 1 . Панель инструментов устройства

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

Режим адаптивного окна просмотра

Перетащите маркеры, чтобы изменить размер области просмотра до нужных вам размеров. Или введите конкретные значения в полях ширины и высоты. На рис. 2 ширина установлена ​​на 628 , а высота установлена ​​на 662 .

Рисунок 2 . Ручки для изменения размеров области просмотра в режиме адаптивного окна просмотра

Показать медиа-запросы

Чтобы отобразить точки останова медиа-запроса над окном просмотра, нажмите Дополнительные параметры и затем выберите Показать медиа запросы .

Рисунок 3 . Показать медиа-запросы

Щелкните точку останова, чтобы изменить ширину области просмотра, чтобы сработала точка останова.

Рисунок 4 . Щелкните точку останова, чтобы изменить ширину области просмотра

Установить тип устройства

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

Рисунок 5 . Список типов устройств

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

Опция	Метод обработки	Значок курсора	Произошедшие события
Мобильный	мобильный	Круг	сенсорный
Мобильный (без касания)	мобильный	Нормальный	нажмите
Настольный	Настольный	Нормальный	нажмите
Настольный (сенсорный)	Настольный	Круг	сенсорный

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

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

Рисунок 6 . Список устройств

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

Щелкните Поверните , чтобы повернуть область просмотра в альбомную ориентацию.

Рисунок 7 . Альбомная ориентация

Обратите внимание, что кнопка Повернуть исчезает, если панель инструментов устройства узкая.

Рисунок 8 . Панель инструментов устройства

См. Также Установка ориентации.

Показать корпус устройства

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

Примечание. Если вы не видите фрейм устройства для определенного устройства, это, вероятно, означает, что DevTools просто нет арта для этого конкретного варианта. Рисунок 9 . Показать рамку устройства Рисунок 10 . Корпус устройства для iPhone 6

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

Чтобы добавить собственное устройство:

1. Щелкните список Device и выберите Edit .

   Рисунок 11 . Выбор Изменить

2. Нажмите Добавить пользовательское устройство .

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

   Рисунок 12 . Создание собственного устройства

Показать линейки

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

Рисунок 13 . Показать линейки Рисунок 14 . Линейки сверху и слева от области просмотра

Увеличить область просмотра

Используйте список Zoom для увеличения или уменьшения масштаба.

Рисунок 15 . Увеличить

Дросселирование сети и ЦП

Чтобы ограничить работу сети и ЦП, выберите Mobile Mid-tier или Low-end mobile из списка Throttle .

Рисунок 16 . Список дросселей

Mobile Mid-tier имитирует быстрый 3G и снижает скорость вашего процессора до 4 раз медленнее, чем обычно. Low-end mobile имитирует медленный 3G и снижает скорость вашего процессора в 6 раз, чем обычно. Имейте в виду, что регулирование зависит от обычных возможностей вашего ноутбука или настольного компьютера.

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

Рисунок 17 . Панель инструментов устройства

Только дросселирование процессора

Чтобы регулировать только ЦП, а не сеть, перейдите на панель Производительность , щелкните Настройки захвата , а затем выберите 4-кратное замедление или 6-кратное замедление из списка CPU .

Рисунок 18 . Список ЦП

Дросселирование только сети

Чтобы регулировать только сеть, а не CPU, перейдите на панель Network и выберите Fast 3G или Slow 3G из списка Throttle .

Рисунок 19 . Список дросселей

Или нажмите Command + Shift + P (Mac) или Control + Shift + P (Windows, Linux, Chrome OS), чтобы открыть в меню команд введите 3G и выберите Включить быстрое регулирование 3G или Включить медленное регулирование 3G .

Рисунок 20 . Командное меню

Вы также можете настроить регулирование сети с панели Performance . Нажмите Настройки захвата , а затем выберите Fast 3G или Slow 3G из списка Network .

Рисунок 21 . Настройка регулирования сети на панели производительности

Переопределить геолокацию

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

Рисунок 22 . Датчики

Или нажмите Command + Shift + P (Mac) или Control + Shift + P (Windows, Linux, Chrome OS), чтобы открыть в меню команд введите Датчики , а затем выберите Показать датчики .

Рисунок 23 . Показать датчики

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

Рисунок 24 . Геолокация

Установить ориентацию

Чтобы открыть пользовательский интерфейс ориентации, щелкните Настройка и управление DevTools а затем выберите Дополнительные инструменты > Датчики .

Рисунок 25 . Датчики

Или нажмите Command + Shift + P (Mac) или Control + Shift + P (Windows, Linux, Chrome OS), чтобы открыть в меню команд введите Датчики , а затем выберите Показать датчики .

Рисунок 26 . Показать датчики

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

Рисунок 27 . Ориентация

Обратная связь

Была ли эта страница полезной?

Есть

Что было самым лучшим на этой странице?

Это помогло мне выполнить мои цели

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

В нем была вся необходимая информация

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

Имеет точную информацию

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

Легко читалось

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

Что-то еще

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

№

Что было хуже всего на этой странице?

Это не помогло мне выполнить мою цель (цели)

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

Отсутствовала необходимая информация

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

Имеет неточную информацию

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

Трудно было прочитать

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

Что-то еще

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

См. Другие способы присоединиться к сообществу DevTools. оставить отзыв.

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

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

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

Вот как:

1. Настройте локальный прокси-сервер http.
2. Настройте HTTP-прокси на мобильных устройствах.
3. Запустите свой локальный сайт на этих мобильных устройствах.
4. Веб-страница отладки отображается в вашем мобильном браузере.

1. Настройте локальный прокси-сервер http.

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

Мы будем использовать SquidMan.Существуют также другие прокси-серверы, такие как Charles и Fiddler, аналогичные инструменты, которые можно использовать для Windows и Linux.

Загрузите и установите SquidMan на Mac. Настройте SquidMan. Откройте SquidMan.app Щелкните SquidMan> Настройки На вкладке «Общие» установите порт для HTTP-порта прокси — 8080. В нашем случае значение по умолчанию должно быть вполне приемлемым, но вы можете установить его по своему усмотрению. Просто убедитесь, что вы запомнили этот номер порта, так как он потребуется нам на шаге 2.

Получите IP-адреса своих устройств.
а. Устройства iOS: Перейдите в «Настройки»> «Wi-Fi»> «Щелкните на подключенном в данный момент маршрутизаторе Wi-Fi»> «Запишите IP-адрес».
б. Устройства Android: Проведите по экрану сверху вниз> Удерживайте и нажмите и удерживайте значок Wi-Fi> Щелкните подключенный в данный момент маршрутизатор Wi-Fi> Запишите IP-адрес.

Добавьте IP-адрес клиента в SquidMan.

Убедитесь, что SquidMan запускается из Control> Start Squid

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

Теперь нам нужно настроить HTTP-прокси на мобильных устройствах. Мы будем использовать те же устройства (под управлением iOS, Android), как описано в предыдущем шаге.

а. Получите сетевой IP-адрес локального хостинг-сервера (в нашем случае с компьютера под управлением macOS). Откройте «Системные настройки» в меню Apple. Щелкните на настройках «Сеть». Получите IP-адрес, как показано на изображении ниже.

В нашем случае IP-адрес сервера: 192.168.0.101

b. Настройка прокси-сервера HTTP на устройстве iOS: Перейдите в раздел «Настройки»> «WiFi»> «Нажмите на текущий подключенный маршрутизатор Wi-Fi»> «Настроить прокси-сервер»> «Вручную»> «IP-адрес сервера»: 192.168.0.101 (IP-адрес сервера из шага 2.a) Порт — 8080 > Сохранить
c. Настройка HTTP-прокси на устройстве Android: проведите по экрану сверху вниз> Удерживайте и нажмите и удерживайте значок Wi-Fi> Удерживайте и нажмите и удерживайте подключенный в данный момент маршрутизатор Wi-Fi> Изменить конфигурацию сети> Показать дополнительные параметры> Прокси> Вручную> Имя хоста прокси: 192.168.0.101 ( IP-адрес сервера из шага 2.a) Порт прокси: 8080 > Сохранить

3.Запустите свой локальный сайт на этих мобильных устройствах.

Теперь предположим, что у вас есть локальный сайт с именем d8.dev на вашей машине разработки. Вы можете ввести http://d8.dev в предпочтительном браузере на своем мобильном устройстве, и теперь вы сможете просматривать сайт.

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

• Все устройства подключены к одной общей сети.
• Нам известны IP-адреса соответствующих устройств, подключенных к сети.
• IP-адреса клиентов обновляются в http-прокси, запущенном на обслуживающем устройстве.
• HTTP-прокси настроен на всех соответствующих клиентских устройствах.

4. Отладка веб-страницы, отображаемой в вашем мобильном браузере.

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

Следующие шаги предназначены для пользователей macOS для отладки веб-сайтов на устройствах iOS и Android.

а. Отладка с Safari — устройства iOS

1. Подключите устройство к машине разработки — настольному / портативному компьютеру через USB.
2. Откройте Safari как на мобильном устройстве, так и на машине разработки.
3. Откройте нужную локальную веб-страницу для отладки на своем мобильном устройстве.
4. В Safari машины для разработки выберите «Разработка»>> «Веб-страница, загруженная на устройство iOS».
   
   
5. Приведенное выше откроет Safari Web Inspector на вашем компьютере разработчика для соответствующей веб-страницы, которую вы выбрали на предыдущем шаге.

б. Отладка в Google Chrome — устройства Android

1. Включение параметров разработчика, отладка по USB на Android.
2. Подключите устройство к машине разработки — настольному / портативному через USB.
3. На устройстве Android выберите «Настройки»> «Модем и мобильная точка доступа»> «Включить USB-модем»> «Принять запрос ключа RSA (если есть)».
4. Откройте Chrome на своем компьютере разработчика и перейдите по следующему URL-адресу chrome: // inspect / # devices.
5. Убедитесь, что параметр «Обнаруживать USB-устройства, обнаруживать сетевые объекты» включен.
   
6. Посетите нужную страницу в браузере Chrome на устройстве Android.
7. Теперь он должен показать вам все вкладки, открытые на вашем мобильном устройстве, в виде списка.
   
8. Нажмите «Осмотреть», чтобы увидеть инструменты разработчика вместе с предварительным просмотром сбоку.

   Удачного мобильного тестирования и отладки!

Протестируйте свой мобильный сайт! • Yoast

Мишель Хейманс

Михиэль был одним из наших первых сотрудников и раньше был партнером Yoast.Начните оптимизацию своего сайта с его статей!

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

Используйте свой телефон для тестирования мобильного сайта

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

Вещи, которые нужно проверить на своем мобильном сайте:

1. Топ-задачи . Убедитесь, что посетители могут мгновенно найти ваши основные страницы.Спросите людей, могут ли они использовать ваш сайт. Начните с друзей и семьи.
2. Адрес и телефон . Например, люди используют мобильные веб-сайты магазинов для настройки навигации. Если вы хотите, чтобы покупатели находили ваш магазин, укажите свой адрес. Если вы хотите, чтобы люди звонили вам, это главный призыв к действию на вашем мобильном сайте. Сделайте его интерактивным.
3. Рабочее меню и опция поиска . Приятно добавить гамбургер-меню, так как это экономит место, но убедитесь, что оно раскладывается.Добавьте параметр поиска в качестве резервной копии для вашего меню.
4. Мобильный дизайн и UX . Убедитесь, что ваш мобильный сайт — это не просто весь ваш сайт, сжатый на этом маленьком экране без надлежащего адаптивного масштабирования. Убедитесь, что ваш мобильный сайт предлагает тот же контент, что и ваш десктопный сайт, то есть мобильный паритет.
5. Кнопки и ссылки . Убедитесь, что их легко обнаружить и они достаточно большие, чтобы щелкнуть.
6. Читаемость. Трудно читать с экрана, убедитесь, что ваша типографика в порядке.
7. Производительность. Как скорость сайта? А впечатления от страницы?

Дополнительную информацию об этом можно найти в нашей статье о мобильном UX.

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

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

Мобильность — фактор ранжирования. Mobile-first — это игра.Google создал тестовый инструмент, который позволяет легко увидеть, как Google видит ваш сайт. У Bing также есть аналогичный тест для мобильных устройств.

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

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

Панель инструментов веб-разработчика

Вы также можете протестировать свой мобильный сайт прямо из браузера. В браузере Chrome просто зайдите на свой веб-сайт и щелкните правой кнопкой мыши в любом месте экрана браузера. Нажмите «Проверить». Вы также можете открыть его в строке меню Инструменты> Инструменты разработчика. После этого щелкните второй значок в строке меню инспектора:

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

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

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

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

Оптимизация для мобильных устройств — это больше, чем просто проверка того, как ваш мобильный сайт выглядит в браузере. Производительность играет большую роль. Итак, если вы хотите сделать свой мобильный сайт успешным, вам нужно сделать приоритетом производительность.Опять же, существует множество инструментов, которые могут дать вам представление об эффективности вашего сайта. Одним из таких инструментов является Web.dev/measure от Google. Просто добавьте свой URL и нажмите «Выполнить аудит».

Если вы набрали что-то подобное, у вас есть работа для вас.

Инструмент покажет некоторые показатели и способы повышения этих оценок.