Как проверить адаптивность сайта: 7 инструментов

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

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

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

Google Chrome

Ссылка на сайт 

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

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

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

Либо вызвать нужное окно комбинацией клавиш Ctrl+Shift+I → нажать на кнопку «Toggle device toolbar». 

Плюсы:

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

Минусы: 

1. Не подсвечивает ошибки.

Маяк (Lighthouse) от Google

Ссылка на сайт

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

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

Нужно открыть сайт, вызвать в меню «Инструменты разработчика» и открыть Lighthouse. Маяк даст ответ, насколько оптимизирована страница и проведет аудит 4-х основных показателей: производительность, доступность, прогрессивность веб-приложений, SEO. 

Плюсы:

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

Минусы: 

1. Несмотря на то, что инструмент не супер сложный, все же лучше разбираться в веб-разработке, SEO и UX.

Resizer

Ссылка на сайт

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

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

Плюсы:

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

Минусы: 

1. Мало готовых вариантов разных интерфейсов. Можно задать вручную, но это не очень удобно — нужно знать размеры каждого устройства.

Adaptivator

Ссылка на сайт

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

Не только Google Chrome: есть и онлайн-сервисы для проверки адаптивности. Например, сервис Adaptivator. Для начала работы нужно ввести адрес сайта и нажать «Узнать». 

Плюсы:

1. Кроссплатформенность: показывает, как сайт выглядит в двух ориентациях (горизонтальной и вертикальной) на разных устройствах, например, iPhone, Nexia, Lumia и других.
2. Можно выбрать цвет корпуса смартфона.
3. Полистать сайт и переходить по разным разделам.

Минусы:

1. Настроить произвольный размер экрана не получится.

Browserling

Ссылка на сайт

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

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

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

Плюсы: 

1. Можно посмотреть, как выглядит сайт на разных версиях Android, MacOS, Windows.
2. Также выбрать браузер, например, Chrom, Opera, FireFox.
3. Полистать сайт так же, как на смартфоне.

Минусы: 

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

I Love Adaptive

Ссылка на сайт

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

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

Плюсы: 

1. В одном окне можно посмотреть адаптивность сайта сразу на нескольких смартфонах и на разных системах: Android, iOS.
2. Помимо смартфонов, есть интерфейсы планшетов и ноутбуков.
3. Можно задать свои параметры вручную.
4. Сравнить, как будут выглядеть разные сайты на одном устройстве.

Минусы:

1. Нельзя проверить кроссбраузерность.

Browserstack

Ссылка на сайт

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

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

Плюсы: 

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

Минусы: 

1. В бесплатной версии на тестирование дается всего 1 минута.

Что в итоге

1. Если хочется проверить сайт не только на адаптивность, но и посмотреть на ошибки — тогда стоит выбрать Маяк от Google.
2. Если на компьютере установлен Google Chrome, можно проверить адаптивность сайта с помощью команды в браузере.
3. Если нужно незамысловатое расширение, которое адаптирует страницу под размер девайса — попробуйте Resizer.
4. Если нужно посмотреть, как сайт выглядит в горизонтальной ориентации на смартфоне — подойдет Adaptivator.
5. Если нужен инструмент, чтобы протестировать еще и кроссбраузерность — стоит выбрать Browserling.
6. Если нужно посмотреть, как будут выглядеть разные сайты на одном устройстве — попробуйте I Love Adaptive.
7. Если нужен большой выбор браузеров для проверки сайта — подойдет Browserstack.