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

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

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

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

Google Chrome

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

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

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

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

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

Плюсы:

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

Минус. Не подсвечивает ошибки.

Маяк (Lighthouse) от Google

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

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

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

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

Плюсы:

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

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

Resizer

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

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

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

Плюсы:

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

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

Adaptivator

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

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

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

Плюсы:

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

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

Browserling

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

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

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

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

Плюсы: 

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

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

I Love Adaptive

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

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

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

Плюсы: 

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

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

Browserstack

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

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

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

Плюсы: 

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

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

Что в итоге

1. Если хочется проверить сайт не только на адаптивность, но и посмотреть на ошибки — тогда стоит выбрать Маяк от Google.

2. Если на компьютере установлен Google Chrome, можно проверить адаптивность сайта с помощью команды в браузере.

3. Если нужно незамысловатое расширение, которое адаптирует страницу под размер девайса — попробуйте Resizer.

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

5. Если нужен инструмент, чтобы протестировать еще и кроссбраузерность — стоит выбрать Browserling.

6. Если нужно посмотреть, как будут выглядеть разные сайты на одном устройстве — попробуйте I Love Adaptive.

7. Если нужен большой выбор браузеров для проверки сайта — подойдет Browserstack.