Тест на отзывчивость: 7 бесплатных инструментов для отзывчивого веб-дизайна

Большинство веб-дизайнеров знают о концепции веб-сайтов с отзывчивым дизайном и преимуществах, связанных с созданием таких сайтов. Когда становится ясно, что ваша цель — обеспечить присутствие в Интернете с помощью отзывчивого дизайна, важно протестировать внешний вид сайта на различных устройствах в процессе разработки. Как минимум на этапе тестирования необходимо проверить веб-проект на наличие ошибок и других несоответствий, выполнив «проверку отзывчивости»: используя различные устройства, пользователи могут предварительно посмотреть, как выглядит и реагирует макет сайта на различных устройствах и/или разрешениях. Для того чтобы извлечь максимальную пользу из таких тестов, лучше всего искать и использовать определенные инструменты — мы покажем вам 7 лучших бесплатных вариантов, доступных в настоящее время

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

Для пользователей Firefox запустить тест отзывчивого дизайна очень просто: в подменю Web Developer выберите «Responsive Design View». Сразу после выбора этой опции сайт, который вы посещаете, будет отображаться на черном фоне в масштабируемом окне. В этот момент пользователи могут регулировать разрешение сайта, потянув изображение мышью, чтобы увеличить или уменьшить его размер. Также можно выбрать разрешение по умолчанию; это позволяет пользователям настроить отображение сайта в альбомном или портретном формате.

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

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

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

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

Responsinator имитирует веб-сайты в общей сложности на шести различных мобильных устройствах, каждое из которых имеет оба возможных формата отображения (см. изображение). Для тестирования доступны различные версии популярных устройств, таких как iPhone, смартфоны Android и iPad.

Веб-сайт Am I responsive предоставляет пользователям четыре различных яблочных устройства для тестирования веб-сайта: настольный компьютер (разрешение: 1.600 x 992 Pixel), ноутбук (1.280 x 802 Pixel), планшет (768 x 1.024 Pixel) и мобильный телефон (320 x 480 Pixel). Одним из преимуществ приложения является то, что оно позволяет напрямую сравнивать различные размеры.