Я тут вот о чем подумал, может показаться, что мы сейчас живем в век приложений. Все стараются нам их втюхать – программы на ПК и Mac, приложения из маркетплейсов для Android и iOS. Отчасти потому, что их более-менее просто разрабатывать. Разработчик адаптирует своё детище к конкретной ОС, примерно знает какое железо будет у пользователей, какие будут размеры и разрешения экранов.
С сайтами всё по-другому, они должны быть кроссплатформенными и кроссбраузерными. То есть, они должны корректно отображаться на самых разных устройствах, от стареньких Айфонов до огромных телевизоров со Smart TV, быть адаптивными. Это не всегда просто, особенно если у вас не просто набор страниц с текстом и фото. К примеру, в веб-интерфейсе SaaS-сервиса могут использоваться продвинутые JavaScript-ы, специфические решения на CSS и шрифты, canvas, WebGL и прочие технологии.
Убедиться что сайт максимально адаптивен не легко, но возможно. Сейчас я расскажу как это сделать, при том бесплатно.
Способы проверки сайта на адаптивность
Ну, вы можете взять все свои гаджеты, устройства родственников, друзей и соседей 🙂 Полазить по сайту, по конверсионной воронке, совершить транзакционные действия. Плюсы и минусы этого способа я, пожалуй, описывать не буду, они станут очевидны в сравнении с другими методами, о которых речь пойдет ниже.
Используйте панель разработчика в браузере
В современных браузерах есть встроенная панель для разработчиков, которая позволяет проводить довольно грубую эмуляцию различных устройств. Множество браузеров (например Google Chrome, Яндекс Браузер, Opera) работают на единой базе Chronium.
Предполагается, что вы можете просто изменить размер фрейма, и сразу станет ясно, насколько сайт адаптивен.
Вызвать инструменты разработчика можно нажатием на F12. А начать эмуляцию кликом на иконку, напоминающую смартфон 
, в левом верхнем углу открывшийся панели.
Вот какие полезные опции здесь есть:
- название устройства и размеры экрана,
- дополнительные характеристики дисплея,
- throttling – ограничение интернет-канала (например, можно эмулировать 3G-интернет),
- кнопка поворота устройства в горизонтальное положение и обратно,
- линейки пикселей,
- настройки (доступные устройства, ограничения канала). Чтобы их вызвать нужно нажать в панели шестеренку справа
.
Плюсы:
- Относительно адекватно отображается html-верстка. Например, если появилась горизонтальная прокрутка (что для смартфонов нежелательно), на реальном устройстве она тоже будет;
- При помощи инспектора можно выбрать на странице элемент и подсветится html-код и css-стили, которые за него отвечают. Есть режим редактирования;
- Множество устройств доступно для эмуляции (в моем браузер 50 предустановленных, и можно добавить свои);
- Можно настраивать ограничение интернет-канала;
- Доступно ограничение выделяемой мощности процессора. То есть можно получить представление как сайт будет работать на более слабых гаджетах.
Минусы здесь следующие:
- Хотя размеры области и подгоняются под устройство, отображение не всегда соответствует реальности. Например, у пользователей сверху есть строка для ввода URL, снизу всплывает панель навигации. Эти элементы интерфейса толком не учитываются;
- Невозможно полноценно учесть “железо” устройства. Например, оперативную память и мощность процессора. В режиме эмуляции сайт может работать плавно, а на смартфоне с рывками и всячески с глючить. Эмулировать устройства с большим экраном, чем у вас, очень затруднительно;
- Движок браузера влияет на отображение сайта. Например, Safari работает на WebKit, Firefox на Quantum, есть менее известные варианты на Gecko. Чтобы учесть это, придется установить все эти браузеры. Более того, небольшое влияние может оказывать и операционная система;
- Обработка так называемых touch-событий отличается. Например, у меня есть опыт размещения Яндекс Карт на всю ширину экрана на смартфоне. В режиме эмуляции карта всегда перехватывала фокус, и прокрутить страницу ниже было невозможно. Но на телефонах проблем не было и пользователи легко прокручивали карту – мобильный браузер различал прокручивание от клика.
Протестируйте сайт в с помощью устройств в облаке
К облачным сервисам подключены реальные девайсы и эмуляторы с разными браузерами. С помощью сайта или программы вы можете выбрать нужную конфигурацию, посещать сайты и в реальном времени и видеть все тонкости их работы.
BrowserStack
BrowserStack (БраузерСтек) считается пионером онлайн-тестирования. Сервис позволяет вручную или автоматизировано тестировать сайты и приложения.
А вот как выглядит мой блог на смартфоне Samsung Galaxy S21 в последнем Google Chrome:
- Только реальные устройства;
- В сервиса все возможности панели разработчика браузера;
- Есть автоматический массовый генератор скриншотов с разных устройств;
- Каждое устройство можно запустить с разными браузерами. Некоторые в разных версиях. Но Яндексовый представлен довольно слабо;
- Большое количество устройств от Apple и Samsung, других куда меньше;
- На Windows и macOS можно динамически управлять разрешением экрана прямо в процессе тестирования;
- Есть приложение для тестирования оффлайн-проектов а также сайтов в локальной сети, то есть не выложенных в интернете.
Недостатки сервиса в его серьезных ограничениях. В бесплатной (тестовой) версии доступны далеко не все устройства и браузеры.
А самое главное, сеанс на каждом девайсе длится всего 1 минуту, после чего он становится неактивен, и запустить на нем тест снова нельзя. Конечно, за это время невозможно полноценно посмотреть сайт, не то что провести дебаг кода. Полноценная платная версия начинается от 39$ в месяц.
LambdaTest
LambdaTest – прямой конкурент BrowserStack, также позволяет тестировать сайты и мобильные приложения, но условия работы и функционал несколько отличаются.
- В бесплатной версии подключается не устройство, а его эмулятор. Впрочем, довольно качественный;
- Длительность сеанса будет ограничена 10 минутами, чего достаточно для простого исследования сайта или поверхностного дебага кода. На одном и том же устройстве можно тестировать несколько раз;
- Инструменты разработчика, конечно же, есть;
- Сам список устройств, ОС и браузеров просто огромный, но бесплатно можно испытывать только некоторые (в основном, самые популярные) варианты;
- Сервис умеет делать скришоты и записывать видео эмуляции (что, согласитесь, круто) и позволяет их скачать;
- Есть возможность тестировать проекты в локальной сети, а также собственный браузер для удобного тестирования;
- Есть генератор скриншотов, очень быстро рендерящий страницы на смартфонах и планшетах.
Недостатком, пожалуй, будет довольно сильное ограничение в выборе устройств для тестирования на бесплатном аккаунте. Ну и то что работает эмулятор, а не настоящий девайс. При регистрации могут запрашивать номер телефона.
Полноценная версия с реальными устройствами, неограниченными сеансами и другими плюшками обойдется от 25$ в месяц.
Применяя современные инструменты для разработчиков и тестировщиков, даже вебмастер без особых навыков сможет проверить верстку и функциональность сайта на разных платформах.
Двигайтесь поэтапно – начните со своих гаджетов, продолжите в браузере, и завершите исследование в облачных сервисах.