Адаптивность страницы — Введение в тестирование веб-приложений

Таким способом создавались сайты в первые десять лет появления интернета. Мобильного интернета еще не существовало и возможность создавать страницы под мобильные устройства тоже. Всё изменилось с приходом мобильного интернета в 2000 году и появлением первых смартфонов. К 2022 году количество людей, которые используют смартфоны для просмотра сайтов, сравнялось с количеством людей, просматривающих сайты с компьютеров.

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

Вот пример страницы, которая не адаптирована под мобильные устройства. В качестве примера эмулируется открытие страницы на iPhone 12 Pro. Эмуляция — имитация использования одного устройства на другом. В этом примере используется разрешение экрана такое же, как и у iPhone 12 Pro, при этом все действия выполнены в браузере Google Chrome.

В этом макете несколько проблем:

Одной из первых техник, которые придумали разработчики — резиновая верстка. Это когда блоки меняют свой размер в зависимости от разрешения устройства. Разработчикам приходилось переписывать много кода для достижения этой цели, но результат был далек от идеала:

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

Текст не помещается в заданные рамки размеров блоков и просто выходит за его пределы. Так как текст — основа любого сайта, то браузеры по умолчанию не скрывают контент, который вышел за пределы блока. Если пропорционально уменьшать текст, то он станет слишком маленького размера для комфортного чтения.

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

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

Сейчас WAP-сайты не актуальны, но принцип создания отдельного сайта для мобильных устройств остался и при появлении смартфонов. Например, популярная социальная сеть VK имеет мобильную версию по адресу m.vk.com.

Обычная версия VK:

Мобильная версия VK по адресу m.vk.com:

Мобильная и основная версия сайта разрабатываются параллельно друг другу, что вносит свои плюсы и минусы. Тестируются эти версии независимо друг от друга, так как проблема на одной из версий необязательно будет на другой.

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

Под термином адаптивность воспринимается буквальное значение — страница должна адаптироваться под разные устройства. Дело не только в размере блоков или текста, но и в их расположении. Взгляните на одну из страниц Хекслета с разных устройств:

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

Рассмотрим несколько принципов адаптивного дизайна, на которые стоит ориентироваться тестировщику:

Чтобы узнать, на каких разрешениях происходят переходы между версиями, стоит внимательно посмотреть на макет или посоветоваться с дизайнером/разработчиком. Они знают, при каком разрешении макет перестраивается под мобильную версию, а при каком — под планшеты.

Крайние точки переходов между макетами называются брейкпойнтами — от английского breakpoint. Чтобы протестировать макет, нужно отталкиваться от этих точек. Они — база при переходе макета из одного состояния в другое.

Если таких точек нет в техническом задании, то можно использовать усредненные значения или найти эти точки самостоятельно простым уменьшением окна браузера. Стандартными значениями для брейкпойнтов являются:

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