Когда сайт одинаково хорошо и без ошибок отображается на смартфоне, планшете и большом мониторе, говорят, что он адаптивный.
Если есть проблемы с адаптивностью, то на устройстве сайт может выглядеть хорошо, а на другом картинки, кнопки и текст будут наезжать друг на друга. Это мешает пользователям взаимодействовать с сайтом. Например, клиент не сможет купить товар, если кнопка «в корзину» закрыта картинкой или оказалась за пределами экрана.
Чтобы проверить адаптивность конкретного сайта, его можно загрузить на нескольких устройствах с разными размерами и типами экранов. Или использовать для этого компьютер и специальные сервисы, которые имитируют отображение сайта на нужных устройствах: в этой статье расскажу о них подробнее.
Скорее всего, ИТ-специалисты не узнают для себя ничего нового. Но сервисы, о которых мы расскажем, могут быть полезны менеджерам, руководителям и основателям компаний, которые хотят сами проверить, насколько сайт их проекта или интернет-магазина удобен и понятен клиентам.
Инструменты разработчика в браузере
Сколько стоит: бесплатно
Эту функцию еще называют веб-инспектором, исследованием элементов, DevTools. Она есть во всех распространенных браузерах. В Microsoft Edge, Google Chrome и Mozilla Firefox режим вызывается клавишей F12, еще в некоторых версиях может работать сочетание клавиш Shift+Ctrl+C в английской раскладке. Или можно навести на любой элемент страницы курсор, вызвать контекстное меню правой кнопкой мыши и нажать на кнопку «Проверить» или «Исследовать код элемента».
После этого откроется режим разработчика: чаще всего экран делится на две части, с одной стороны появляется панель с кодом, с другой — сайт. Нужно найти панель, отвечающую за адаптивность, или адаптивный дизайн: обычно это кнопка Dimensions слева сверху. Затем выберите нужное устройство из выпадающего списка и смотрите, как сайт будет отображаться на нем.
Можно посмотреть, как будет отображаться сайт на разных поколениях Айфонов
В браузере Opera панель разработчика отличается только цветом, суть . Красным подчеркнута строка, отвечающая за проверку адаптивности
Это расширение для браузера Chrome. Сначала нужно его установить и перезагрузить браузер, затем открыть сайт, который хочется проверить, и кликнуть на иконку Responsive Viewer в правом верхнем углу.
Браузер обновит страницу, и станет видно панель адаптивности: появится отображение сайта сразу на нескольких устройствах. Какие конкретно устройства отображать, можно выбрать в панели слева: есть несколько моделей Айфонов, смартфонов от Samsung, Google и Microsoft, ноутбуки. Еще в панели сверху можно выбрать «ориентацию» устройств — вертикальное или горизонтальное расположение.
В Responsive Viewer можно изменить масштаб и ориентацию экрана
Сервис пригодится для проверки отображения сайта на мобильных и планшетах. Можно выбрать операционную систему смартфона и конкретную модель, на которой хочется его протестировать: есть практически все модели Айфонов, от SE до 12 Pro, а Android представлен моделями Samsung Galaxy S10 Lite, S20, Note20 и A71.
В сервисе можно проверить, насколько точно разработчики повторили дизайн сайта с макета. Для этого нужно загрузить картинку макета в форму и выбрать, под какое устройство рисовали дизайн.
Дополнительно в сервис встроен валидатор — программа, которая проверяет HTML-код сайта по современным стандартам и показывает ошибки верстки, если такие есть.
Сервис показывает, как ваш сайт выглядит сразу на нескольких устройствах
Сколько стоит: от 29 $ в месяц, первые 30 минут бесплатно
В этом онлайн-сервисе можно проверить, как сайт или мобильное приложение выглядит на эмуляторах разных устройств, в том числе на последних моделях Apple и Samsung и в разных браузерах.
Для проверки нужно выбрать браузер, затем операционную систему и наконец конкретную модель устройства.
Сервис BrowserStack платный, но у нового аккаунта есть 30 бесплатных минут, чтобы его протестировать. При регистрации просят корпоративный адрес электронной почты: почта на Yandex и Mail не подошла, но почту Google сервис использовать разрешил.
В BrowserStack можно проверить отображение сайта не только на каком-то устройстве, но и в конкретном браузере на этом устройстве. Например, как поведет себя сайт в браузере Google Chrome на смартфоне Samsung Galaxy S21
Для проверки доступны браузеры с разрешением экранов Айфонов от SE до 12 Pro, Google Pixel до 4XL, старых моделей Samsung Galaxy от S6 до S9. Кроме смартфонов можно протестировать, как выглядит сайт на Айпадах, ноутбуках и компьютерах разного разрешения. Как и во всех сервисах, ориентацию виртуального устройства можно поменять с вертикальной на горизонтальную.
Можно делать скриншоты или записывать на видео происходящее в браузере.
На старте браузер попросит вас выбрать устройства, в которых нужно проверить сайт
Screenfly — онлайн-сервис с большим выбором устройств: Айфоны от 5 до XS Max, Samsung Galaxy от S7 до S9+ и еще несколько старых смартфонов на Android.
Можно выбрать отображение на планшете — iPad Mini, Air и Pro, Samsung Galaxy Tab 10, проверить вид сайта на ноутбуках и стационарных компьютерах или задать свой размер экрана.
Сервис показывает отображение сайта сразу на двух устройствах — смартфоне и планшете
Чем тестировать адаптивный дизайн?
Время на прочтение
Хватит менять размер окна браузера, хватит его насиловать! Готов спорить, вы не раз слышали это. Хорошо, возможно и не слышали. Но если вы профессионально занимаетесь разработкой адаптивных сайтов, вы понимаете о чем я: любое изменение DOM или правка CSS, и вы снова начинаете тянуть край браузера вперед, назад, тестируя изменения и просматривая ничего ли не сломалось.
Целью ваших движений является имитация экранов различных устройств.
В корпоративной среде зачастую, у вас есть множество гаджетов предоставленных компанией для теста. На моей работе в моем распоряжении есть iPad, iPod, другие планшеты, ноутбуки, а также настольные мониторы. Если у вас нет такой роскоши, приходится использовать то, что под рукой.
К счастью, есть внушающий набор онлайн инструментов, имитирующих различные диагонали устройств. Конечно, каждый из них имеет свои преимущества и недостатки, мы рассмотри несколько таких инструментов.
Для тестирования я выбрал реально адаптивный сайт PajamasOnYourFeet.com, сайт построено на основе HTML5 шаблона, бесплатно предоставленным EGrappler.
Am I Responsive?
Am I Responsive, очень простой инструмент, позволяющий быстро просмотреть ваш сайт на 4 устройствах. Все они — IOS и разработчик объясняет это фишкой сайта. В общем никаких настроек, никакого выбора, а очень просто и наглядно.
Цитирую разработчика: «это не инструмент для тестирования, крайне важно проводить тестирование на реальных устройствах. А данный инструмент поможет быстро сделать скриншот и показать клиенту, что вы имеете ввиду».
Есть две приятные фишки: возможность таскать устройства по вашему экрану, а также возможность поделится ссылкой на тест сайта.
Deviceponsive
deviceponsive очень похож на Am I Responsive, тем, что он настолько же прост, с минимум настроек и опций. Все доступные устройства отображаются сразу на одной длинной странице. Из всех доступных опций это возможность отредактировать фон заголовка и добавить туда свой логотип, что будет полезно когда вы решите поделится скриншотом.
Устройства и доступные разрешения экранов.
Как и на большинстве подобных инструментах отображаются полосы прокрутки, которых бы не было бы на реальных устройствах. Это вынужденный шаг для обеспечения возможности прокрутки на не сенсорных устройствах.
Responsive test
Как и deviceponsive, responsive test отображает ваш сайт в различных устройствах. Но вместо показа всех сразу, вы сами выбираете необходимое устройство в верхнем меню страницы. Кстати тут корректно работает масштабирование, что позволяет проводить тестирование большего разрешения на меньшем.
30 различных разрешений доступно на сайте, начиная от огромного настольного монитора, до того, что они называют «дрянный андроид» (справедливости стоит заметить, что есть и нормальный андроид).
Что касается браузера Firefox, то он немного не корректно работает с данным сайтом. Обратите внимание, что на скриншоте не отображается слайдер между зеленым заголовком и белой областью фонового содержания.
Очень похож на предыдущих два инструмента, но есть одна вещь которая отличает responsive.is от других. Это плавная анимация при переходе от одного устройства к другому, а также полу-прозрачная область которая показывает реальную площадь сайта не попадающую в область просмотра.
Доступные варианты устройств — авто (то как вы видите сайт), настольный комьютер, планшет в альбомной и портретной ориентации, смартфон в портретной и альбомном положении. Задавать произвольные размеры в px, к сожалению нельзя.
Screenqueries
А вот возможности и доступные опции отличают Screenqueries от предыдущих сервисов. 14 телефонов и 12 планшетов представлены здесь, с отдельной возможностью переключения в портретный и альбомный режим. Результаты отображаются на сетке с линейками. Также возможно задать произвольное разрешение, потянув за правый или нижний край.
Интересной особенностью этого сайта, для ряда устройств есть “Trueview” вариант, который показывает ваш сайт в нативном браузере устройства.
К сожалению, Firefox и тут не смог отобразить слайдер. Не нужно обвинять меня, Firefox мой любимый браузер, но такие вот дела.
Screenfly
Screenfly пожалуй наиболее функциональный из всех. Доступно 9 больше чем планшет устройств — от 10″ ноутбуков, до 24″ мониторов, 5 планшетов, 9 телефонов, 3 телевизионных разрешения, а также произвольное разрешение. Добавьте сюда отдельный переключатель в портретный и альбомный режим, а также опцию показа прокрутки. Также можно поделится ссылкой на тест с помощью одной кнопки.
У каждого устройства в меню указано размер экрана в px., а также в правом верхнем углу отображается фактический размер вашего окна браузера.
Все перечисленные достоинства позволяют претендовать на лидерство если бы не одно но (цитата разработчика): «Screenfly может использовать прокси-сервер, чтобы имитировать устройства во время просмотра вашего сайта. Прокси-сервер имитирует строку агента пользователя, но не поведение этих устройств.» Screenfly является единственным сервисом из списка, который позволяет тестировать на основе строки агента пользователя.
Используете ли вы представленные инструменты в своей практике? Делитесь своими секретами разработки адаптивных сайтов в комментариях.
P. S. Ошибки по поводу перевода просьба сообщать в личку.
Понимание и тестирование адаптивного веб-дизайна
Адаптивный веб-дизайна стал ключевым фактором, определяющим удобство нашего доступа к информации с помощью различных цифровых устройств. Вещи, которые несколько лет назад казались неосуществимыми, стали обыденностью. Я до сих пор помню, что представляла собой моя работа над школьными проектами в 2005 году, когда доступными стали не только компьютеры, но и телефонное подключение к Интернет.
Однако Интернет уже никогда не будет прежним. Взрывной рост количества информации изменил и способы ее отображения. Адаптивный веб-дизайн позволил нам просматривать различные веб-сайты одним движением пальца. Прошли те времена, когда нам приходилось увеличивать и уменьшать масштаб экрана телефона, чтобы просмотреть определенные сайты. Теперь, благодаря адаптивному веб-дизайну, мы можем беспрепятственно просматривать различные страницы на телефонах без каких-либо проблем. Это стало возможным благодаря тестированию адаптивного веб-дизайна, которому постоянно уделяется приоритетное внимание. Давайте же разберемся, что такое адаптивный веб-дизайн?
Адаптивный веб-дизайн — это концепция, которая позволяет беспрепятственно просматривать веб-сайты на разных устройствах независимо от их разрешения. Чтобы понять концепцию адаптивного веб-дизайна, нам нужно понять несколько ключевых элементов, связанных с ним. Каждая веб-страница содержит различные элементы, такие как изображения, текст или меню. И в зависимости от того, как эти элементы размещены в макете веб-сайта, мы можем установить ограничения для масштабирования этих элементов для отображения в соответствии с разрешением экрана устройства.
Основы адаптивного веб-дизайна
Фундаментальная идея создания адаптивных веб-сайтов заключается в увеличении или уменьшении макета или области просмотра в соответствии с размерами экрана устройства. Настройка адаптивного веб-сайта в соответствии с разрешением экрана также облегчит тестирование адаптивных веб-сайтов. Область просмотра — это область веб-страницы, которая просматривается на экране, сюда не входят панели инструментов браузера, дизайн вкладок и т. д., она просто включает содержимое сайта, которое в данный момент просматривается на экране.
Давайте рассмотрим вопрос немного глубже, чтобы понять, какие элементы превращают веб-дизайн в адаптивный
Тестирование адаптивного веб-дизайна
Теперь, когда у нас есть четкое представление о том, как работает адаптивный веб-сайт, пришло время узнать, как мы можем выполнить тестирование адаптивного веб-дизайна, чтобы обеспечить высокие стандарты качества.
Что нам нужно протестировать?
Тестирование адаптивного дизайна на разных устройствах должно охватывать каждый элемент и компонент веб-сайта. Поиск надежного инструмента тестирования адаптивного веб-дизайна также поможет легко протестировать различные компоненты. Тестирование адаптивного дизайна включает в себя такие компоненты, как текст, оптимизация изображений, проверка визуальных элементов и т. д. Все они играют решающую роль в обеспечении стабильного взаимодействия с пользователем.
Стиль контента и выравнивание. Нам нужно убедиться, что контент правильно выровнен и отображается последовательно. Необходимо следить за соотношением размеров текста, чтобы стиль и выравнивание были одинаковыми на всех устройствах.
Согласованность мультимедиа — убедитесь, что изображения четко видны и обеспечивают необходимый контекст на всех устройствах. Видео и изображения должны быть последовательно оптимизированы для соответствующих размеров устройств. Следите за тем, чтобы изображения или видео не перекрывались друг с другом или текстом, чтобы обеспечить четкую коммуникацию и чистый визуальный опыт.
Меню. Убедитесь, что меню можно развернуть и свернуть на небольших экранах, чтобы пользователи могли легко перемещаться по веб-сайту. На некоторых устройствах возникает проблема совместимости, из-за которой кнопки и текст смещаются, что ухудшает визуальное восприятие. Тестирования на реальных устройствах и выполнение тестов в браузерах с разными конфигурациями поможет нам решить эти проблемы.
Ориентация мобильного устройства. Поскольку мобильные устройства и планшеты легко поворачиваются, нам необходимо убедиться, что веб-дизайн оптимизирован с учетом ориентации, а содержимое страницы соответствующим образом отображается. Невозможность просмотра определенного веб-сайта или веб-приложения в разных ориентациях вызывает большое разочарование и создает негативный пользовательский опыт.
Адаптивный веб-дизайн требует, чтобы веб-сайты тестировались в разных браузерах и на различных устройствах. Кросс-браузерное тестирование совместимости гарантирует, что мы протестируем веб-сайт в нескольких браузерах с различными конфигурациями систем и разрешениями экрана. Тестирование адаптивного веб-дизайна включает в себя и тестирование на мобильных устройствах, чтобы убедиться, что веб-сайты выглядят и работают так же, как в браузерах для компьютеров и ноутбуков. Selenium — это эффективный инструмент автоматизации, который мы можем использовать для автоматизации некоторых тестов на совместимость между браузерами. Однако нам нужно будет использовать другие инструменты, такие как Applitools – для визуального тестирования, Galen – для проверки изменений размеров на адаптивном веб-сайте. Galen хорошо работает в Selenium Grid и может использоваться для настройки тест-кейсов для запуска инструментов облачного тестирования, таких как pCloudy, чтобы гарантировать, что тестирование адаптивного веб-дизайна выполняется на реальных мобильных устройствах и в браузерах. Поскольку Galen можно использовать для параллельного запуска тестов, команды тестирования могут сэкономить время, ускорить процесс тестирования и быстрее получить результаты.
Масштабирование веб-сайтов на устройствах с различными разрешениями и размерами экрана стало возможным благодаря адаптивному веб-дизайну. Однако, тестирование этих адаптивных веб-сайтов является сложной задачей, поскольку вам все равно придется тестировать их на различных устройствах и размерах экрана, чтобы убедиться в качестве и совместимости. Автоматизация адаптивного тестирования веб-сайтов становится ключевым элементом для выпуска качественных адаптивных веб-сайтов, которые хорошо работают на различных устройствах. Удачного тестирования!
Смотрим глазами клиента. Удобно с его устройства, браузера, ОС? Правильно ли всё отображается? Он точно не хочет покинуть сайт?
vlada_maestro / shutterstock
Автор-фрилансер, пишет на разные темы, чаще о растениеводстве и технологиях в сельском хозяйстве.
Адаптивность — корректное отображение на всех устройствах: компьютерах, планшетах, смартфонах. Если пользователь с телефона зайдёт на сайт, у которого горизонтальная прокрутка, мелкий шрифт, обрезанные картинки, некликабельные кнопки, — вряд ли дойдёт до покупки. Проще не мучиться, а уйти на сайт конкурента.
Адаптивность становится всё более важной с ростом мобильного интернета. Согласно исследованию GfK, в 2018 году 35% россиян пользовались интернетом только со смартфонов и планшетов. Также это большой плюс для SEO: так, Google обещает в течение 2020 года отдать приоритет в выдаче сайтам, удобным для просмотра с мобильных устройств. Именно поэтому стоит проверять свой сайт на адаптивность/мобильность (лучше и на кроссбраузерность/кроссплатформенность — удобство пользования в любых браузерах и операционных системах).
Я подобрала и протестировала шесть онлайн-инструментов для проверки адаптивности. Описания и тарифы актуальны на октябрь 2020 года.
Сервис проверяет мобильность сайта, показывает, как он выглядит на экране смартфона. В результатах теста будут описаны проблемы с загрузкой или отображением. Ошибки могут быть связаны со шрифтами, плагинами, стилями CSS, размерами интерактивных элементов.
Инструмент полностью бесплатный.
Сервис проверяет адаптивность на трёх устройствах: компьютере, планшете, смартфоне. Просмотр — интерактивный, то есть можно взаимодействовать с сайтом: скроллить, кликать, переходить в другие разделы. Конкретные модели устройств не указаны, произвольные размеры экранов тоже задать нельзя — есть только стандартные.
Проект снова бесплатный и снова принадлежит Google.
Этот онлайн-сервис показывает, как сайт может выглядеть на разных моделях планшетов и смартфонов: iPhone, Lumia, Nexus, iPad и др. Здесь не скриншоты, как в Google Mobile-Friendly Test, — на каждом устройстве можно листать страницу, смотреть все картинки, проверять, как отображаются разные элементы.
Некоммерческий проект, приветствуются донаты. Англоязычный аналог — Responsinator.
Англоязычный сервис (сейчас принадлежит Blue Tree, раньше — QuirkTools). Представлено 30+ моделей смартфонов, планшетов, ПК и ТВ. Можно поворачивать экраны, запрещать прокрутку, задавать произвольные размеры. Судя по всему, сервис не боится вышеупомянутого запрета на удалённый просмотр. Удобно сразу делиться ссылкой на проверку адаптивности.
Просмотр сайта интерактивный, как в Resizer или Adaptivator
Ещё один инструмент для тестирования сайтов на адаптивность. Большой выбор устройств, моделей, операционных систем. Как и в Screenfly, можно задать произвольный размер экрана. Дополнительные функции: валидация HTML-кода, проверка скорости загрузки, сравнение нескольких сайтов. Чтобы обойти запрет на отображение контента, разработчики предлагают установить расширение Chrome.
Сервис бесплатный, как и предыдущие.
Англоязычный сервис для проверки адаптивности. Ключевое отличие от других — полноценное тестирование на кроссбраузерность и кроссплатформенность.
Бесплатно можно проверить сайт только на Internet Explorer 11, Windows 7 и при разрешении 1024×768. Чтобы получить доступ ко всем функциям, нужно платить от 19 долларов в месяц.
Если достаточно проверить мобильность (правильность отображения на смартфонах) в целом — хватит Google Mobile-Friendly Test.
Нужно посмотреть, как сайт выглядит на разных экранах, — для тестирования подойдут Resizer, Adaptivator или Screenfly (умеет обходить запрет на просмотр). Если ещё требуется сравнить отображение нескольких сайтов, а заодно проверить валидность кода и скорость загрузки, — в помощь I Love Adaptive.
Когда важно протестировать не только мобильность, но и юзабилити на конкретных браузерах и ОС, — не обойтись без Browserling. Это единственный платный инструмент в подборке, хотя у него есть и ограниченная бесплатная версия.
Если предстоит не только проверить, но и освоить адаптивную вёрстку, — пора учиться в Skillbox.
Жизнь можно сделать лучше!Освойте востребованную профессию, зарабатывайте больше и получайте от работы удовольствие. А мы поможем с трудоустройством и важными для работодателей навыками.