Как выглядит сайт на телефоне

 vlada_maestro / shutterstock

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

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

Адаптивность становится всё более важной с ростом мобильного интернета. Согласно исследованию GfK, в 2018 году 35% россиян пользовались интернетом только со смартфонов и планшетов. Также это большой плюс для SEO: так, Google обещает в течение 2020 года отдать приоритет в выдаче сайтам, удобным для просмотра с мобильных устройств. Именно поэтому стоит проверять свой сайт на адаптивность/мобильность (лучше и на кроссбраузерность/кроссплатформенность — удобство пользования в любых браузерах и операционных системах).

Я подобрала и протестировала шесть онлайн-инструментов для проверки адаптивности. Описания и тарифы актуальны на октябрь 2020 года.

Оглавление:

• Google Mobile-Friendly Test
• Resizer
• Adaptivator
• Screenfly

• I Love Adaptive
• Browserling
• Подытожим

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

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

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

Проект снова бесплатный и снова принадлежит Google.

Этот онлайн-сервис показывает, как сайт может выглядеть на разных моделях планшетов и смартфонов: iPhone, Lumia, Nexus, iPad и др. Здесь не скриншоты, как в Google Mobile-Friendly Test, — на каждом устройстве можно листать страницу, смотреть все картинки, проверять, как отображаются разные элементы.

Некоммерческий проект, приветствуются донаты. Англоязычный аналог — Responsinator.

Англоязычный сервис (сейчас принадлежит Blue Tree, раньше — QuirkTools). Представлено 30+ моделей смартфонов, планшетов, ПК и ТВ. Можно поворачивать экраны, запрещать прокрутку, задавать произвольные размеры. Судя по всему, сервис не боится вышеупомянутого запрета на удалённый просмотр. Удобно сразу делиться ссылкой на проверку адаптивности.

Ещё один инструмент для тестирования сайтов на адаптивность. Большой выбор устройств, моделей, операционных систем. Как и в Screenfly, можно задать произвольный размер экрана. Дополнительные функции: валидация HTML-кода, проверка скорости загрузки, сравнение нескольких сайтов. Чтобы обойти запрет на отображение контента, разработчики предлагают установить расширение Chrome.

Сервис бесплатный, как и предыдущие.

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

Бесплатно можно проверить сайт только на Internet Explorer 11, Windows 7 и при разрешении 1024×768. Чтобы получить доступ ко всем функциям, нужно платить от 19 долларов в месяц.

Если достаточно проверить мобильность (правильность отображения на смартфонах) в целом — хватит Google Mobile-Friendly Test.

Нужно посмотреть, как сайт выглядит на разных экранах, — для тестирования подойдут Resizer, Adaptivator или Screenfly (умеет обходить запрет на просмотр). Если ещё требуется сравнить отображение нескольких сайтов, а заодно проверить валидность кода и скорость загрузки, — в помощь I Love Adaptive.

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

Если предстоит не только проверить, но и освоить адаптивную вёрстку, — пора учиться в Skillbox.

Веб-вёрстка

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

Узнать про курс

Научитесь: Веб-вёрстка
Узнать больше

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

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

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

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

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

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

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

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

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

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

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

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

 1. Google Mobile Friendly

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

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

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

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

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

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

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

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

3. Mattkersley

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

4. Bing

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

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

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

5.Responsinator

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

http://www.responsinator.com/

6.Ipadpeek и iPhone Tester

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

7.Screenfly

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

8.Gomez

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

9.Testmysite

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

 

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

10. Responsivedesign

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

http://ami.responsivedesign.is

Выводы

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

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

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

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

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

 

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

---

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

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

---

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

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

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

 

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

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

Недостатки

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

---

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

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

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

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

Недостатки

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

---

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

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

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

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

Недостатки

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

---

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

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

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

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

Недостатки

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

---

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

 

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

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

Недостатки

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

---

Вывод

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

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

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

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

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

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

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

Зачем нужен адаптивный сайт

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

В 2020 году количество выходов в интернет с мобильных устройств выросло до 68.1% от общего трафика. И это значение продолжает расти. Поэтому от разработчиков требуют создавать мобильные версии сайтов и приложений. В то же время пользователи компьютеров больше проводят времени на конкретных ресурсах и часто используют ПК для более глубокого изучения сайта. Так что хорошая десктопная версия страницы – одно из ключевых условий для создания удобного сайта с перспективами в SEO. 

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

Принципы адаптивности

Создавая адаптивный дизайн, стоит обратить внимание на 4 значимых аспекта:

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

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

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

4. Не занимаемся хардкодингом, а используем свойства типа flex, grid, а также процентные значения вместо точных единиц (px, em), чтобы страница самостоятельно адаптировалась под изменения разрешения и не требовала постоянного внесения изменений в код и избыточного контроля над позиционированием каждого элемента. 

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

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

Вот сайты с удачной мобильной версткой:

Apple 

Комьюнити

А вот без нее:

Advego

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

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

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

С помощью браузера Google Chrome

Инструмент разработчиков, который у вас точно всегда под рукой – веб-браузер. Лучшим выбором станет Chrome DevTools, но можно воспользоваться аналогичной функцией в Firefox и даже в Safari. 

Чтобы проверить адаптивность сайта с помощью браузера Google Chrome:

• Запускаем браузер и открываем на нем свой сайт. 

• Включаем инструменты разработчика, одновременно нажав клавиши Alt+Ctrl+I.

• Переходим в режим эмуляции устройств, одновременно нажав клавиши Shift+Ctrl+M.

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

Google Mobile-Friendly Test

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

Google Mobile-Friendly Test может подсказать, адаптирован ли сайт под смартфоны, насколько хорошо он оптимизирован и какие элементы стоило бы изменить, чтобы страницы были более удобочитаемы (речь идет о шрифтах, картинках и т.п.).

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

Adaptivator

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

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

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

Screenfly

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

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

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

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

I Love Adaptive

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

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

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

Еще I Love Adaptive умеет эмулировать панель инструментов iOS, чтобы адаптировать страницу под специфичный интерфейс операционной системы Apple в новых моделях телефонов.

Responsinator

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

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

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

Am I Responsive

Проект Am I Responsive тоже не сильно выделяется на фоне большинства конкурентов, но несколько интересных отличий у него все же есть:

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

2. Здесь есть букмарклет, с помощью которого Am I Responsive можно в один клик по панели с закладками запустить на любом веб-ресурсе. 

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

MobileMoxie

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

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

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

MobileMoxie – платный сервис, но у него есть пробный период на 7 дней.

Browserling

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

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

Еще одно преимущество Browserling – полная безопасность и поддержка протокола Secure Shell. Запуск браузера совершается в изолированном блоке, что исключает вмешательство в процесс со стороны. Можно открывать свои сайты без лишних переживаний. 

WEB tools

Богатый набор инструментов с сайта Seo-Zona. У них есть и редакторы кода, и отдельные сервисы для конструирования form-объектов, утилита для проверки существования email-адресов и другие полезности. И среди этого богатства нашлось место для мини-приложения, отображающего сайт на мобильных устройствах. 

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

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

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

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

Mattkersley

Mattkersley показывает, как выглядит сайт в двух режимах: 

• в разных разрешениях без привязки к конкретным устройствам;

• с привязкой к некоторым ныне устаревшим гаджетам в духе первого iPhone.

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

Вместо заключения

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

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

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

Рассказываю о 6 инструментах, где это можно сделать.

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

Google Chrome

Сайт: https://www.google.com/intl/ru_ru/chrome/.

Стоимость: бесплатно.

У браузера Google Chrome есть мощный набор инструментов — DevTools. С его помощью можно проверить адаптивность сайта.

Для этого нужно открыть нужный ресурс, выбрать в меню «Дополнительные инструменты → Инструменты разработчика» и нажать на кнопку «Toggle device toolbar» в левом верхнем углу.

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

Mobile-Friendly Test

Сайт: https://search.google.com/test/mobile-friendly.

Стоимость: бесплатно.

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

Нужно перейти по ссылке, вставить URL и немного подождать. Mobile-Friendly Test даст короткий ответ: оптимизирована страница или нет. 

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

Resizer

Сайт: https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh?hl=ru.

Стоимость: бесплатно.

Можно ещё использовать расширение Google Chrome, которое меняет размер окна браузера, тем самым эмулирует различные мобильные устройства.

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

Adaptivator

Сайт: http://adaptivator.ru/.

Стоимость: бесплатно.

Не только Google Chrome: есть и онлайн-сервисы для проверки адаптивности. 

Adaptivator показывает, как сайт выглядит в двух ориентациях на разных устройствах: iPhone, Nexia, Lumia и других. Можно даже выбрать цвет корпуса. А вот настроить произвольный размер экрана не получится.

Browserling

Сайт: https://www.browserling.com/.

Стоимость: бесплатно или подписка от $19 в месяц.

А это онлайн-сервис для кроссбраузерного тестирования.

Чтобы проверить, как сайт работает в разных браузерах, нужно указать ссылку, выбрать операционную систему и версию браузера, а потом нажать «Test now!».

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

Browserstack

Сайт: https://www.browserstack.com/.

Стоимость: от $29 в месяц, есть бесплатная пробная версия.

Ещё один инструмент для проверки кроссбраузерности на десктопе и мобайле.

На выбор 3 000+ браузеров, настоящих устройств Android и iOS. Как и в Browserling, можно проверять локальные сайты, есть защита от несанкционированного доступа.

Поделиться

СВЕЖИЕ СТАТЬИ

Другие материалы из этой рубрики

Не пропускайте новые статьи

Подписывайтесь на соцсети

Делимся новостями и свежими статьями, рассказываем о новинках сервиса

Статьи почтой

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

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

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

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

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

Инструменты разработчика в браузере

Сколько стоит: бесплатно

Эту функцию еще называют веб-инспектором, исследованием элементов, DevTools. Она есть во всех распространенных браузерах. В Microsoft Edge, Google Chrome и Mozilla Firefox режим вызывается клавишей F12, еще в некоторых версиях может работать сочетание клавиш Shift+Ctrl+C в английской раскладке. Или можно навести на любой элемент страницы курсор, вызвать контекстное меню правой кнопкой мыши и нажать на кнопку «Проверить» или «Исследовать код элемента».

Responsive Viewer

Сколько стоит: бесплатно

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

I Love Adaptive

Сколько стоит: бесплатно

Сервис пригодится для проверки отображения сайта на мобильных и планшетах. Можно выбрать операционную систему смартфона и конкретную модель, на которой хочется его протестировать: есть практически все модели Айфонов, от SE до 12 Pro, а Android представлен моделями Samsung Galaxy S10 Lite, S20, Note20 и A71.

Дополнительно в сервис встроен валидатор — программа, которая проверяет HTML-код сайта по современным стандартам и показывает ошибки верстки, если такие есть.

BrowserStack

Сколько стоит: от 29 $ в месяц, первые 30 минут бесплатно

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

Сервис BrowserStack платный, но у нового аккаунта есть 30 бесплатных минут, чтобы его протестировать. При регистрации просят корпоративный адрес электронной почты: почта на Yandex и Mail не подошла, но почту Google сервис использовать разрешил.

Blisk

Сколько стоит: бесплатно

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

Для проверки доступны браузеры с разрешением экранов Айфонов от SE до 12 Pro, Google Pixel до 4XL, старых моделей Samsung Galaxy от S6 до S9. Кроме смартфонов можно протестировать, как выглядит сайт на Айпадах, ноутбуках и компьютерах разного разрешения. Как и во всех сервисах, ориентацию виртуального устройства можно поменять с вертикальной на горизонтальную.

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

Screenfly

Сколько стоит: бесплатно

Screenfly — онлайн-сервис с большим выбором устройств: Айфоны от 5 до XS Max, Samsung Galaxy от S7 до S9+ и еще несколько старых смартфонов на Android.

Можно выбрать отображение на планшете — iPad Mini, Air и Pro, Samsung Galaxy Tab 10, проверить вид сайта на ноутбуках и стационарных компьютерах или задать свой размер экрана.

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

---

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

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

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

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

---

Инструменты разработчика в браузере

Самый простой и бесплатный способ проверки адаптивности созданного сайта, поскольку данная функция встроена практически во все браузеры. Например, в браузерах Microsoft Edge, Google Chrome и Mozilla Firefox функция вызывается нажатием клавиши F12 или сочетанием клавиш Shift+Ctrl+C. После нажатия всплывает окно разработчика, в котором нужно найти кнопку Dimensions в левом верхнем углу. Таким образом появится список существующих устройств, выбирая из которых можно будет увидеть как выглядит сайт на том или ином устройстве.

---

Responsive Viewer

Ссылка на расширение: Responsive Viewer

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

Первым делом необходимо установить расширение и перезагрузить браузер. Далее нужно открыть нужный для проверки сайт и нажать кнопку «Responsive Viewer» в правом верхнем углу. Затем браузер самостоятельно обновит страницу и на главном экране появится панель для проверки адаптивности сайта, а точнее, сам сайт на нескольких устройствах. Есть возможность выбрать на каких именно можно просмотреть сайт (например, модели iPhone или Samsung и так далее).

---

Blisk

Официальный сайт: blisk.io

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

---

Mobile-Friendly Test

Официальный сайт: search.google.com

Специальный инструмент от Google, который помогает разработчикам проверять оптимизацию сайта для мобильных устройств. Максимально прост в использовании: достаточно перейти по ссылке и указать URL нужного для проверки сайта. Инструмент спустя нужное количество времени даст короткий отчет. Благодаря ему также можно узнать есть ли проблемы в отображении на мобильные устройства и как их исправить.

---

Resizer

Ссылка на расширение: Resizer

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

---

Browserstack

Официальный сайт: browserstack.com

Достаточно интересный инструмент для проверки адаптивности сайта, поскольку внутри него есть более 3 000 вариантов браузеров и реальных устройств как на Android, так и на IOS. Есть как бесплатный пробный период, так и платный от $29 в месяц. Бесплатный период представляет собой 30 минут для нового аккаунта. При регистрации просят корпоративную почту, однако, например, почта Mail или Yandex не подходит, а вот использование GMail для регистрации возможно. Еще одна интересная фишка данного инструмента — защита от несанкционированного доступа.

---

I Love Adaptive

Официальный сайт: iloveadaptive.com

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

---

Screenfly

Официальный сайт: bluetree.ai

Ещё один бесплатный онлайн сервис для проверки вашего сайта. Имеет большой выбор мобильных устройств, от iPhone 5 до более современных моделей, а также современные смартфоны на базе Android и несколько устаревших моделей. Также можно самостоятельно настроить размеры экрана под ноутбук, стационарный компьютер или планшет и посмотреть как отображается внешний вид сайта и на них.

Вывод

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