Какие размеры окна браузера тестировать для адаптивного дизайна?

Не существует постоянного списка размеров браузера, гарантирующего адаптивный дизайн. Начните с узких, средних и широких контрольных размеров, таких как 390, 820 и 1440 CSS-пикселей, а затем протестируйте сразу ниже и выше каждой точки перехода, где изменяется ваш собственный контент. Лучшая точка останова — это место, где макет начинает давать сбой, а не место, где заканчивается конкретная модель телефона.

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

Почему три скриншота — это не три устройства?

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

Вот почему контрольный список «самых популярных размеров телефонов» устарел. Руководство по адаптивному дизайну MDN рекомендует макеты, которые реагируют на весь доступный диапазон, а основы медиа-запросов рекомендует добавлять точку перехода, где компоновка контента начинает нарушаться, а не нацеливаться на каждое устройство.

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

Что показывает каждое окно просмотра ClockTools?

Действующий инструмент ClockTools предлагает три независимо выбираемых захвата:

В результате также сообщается статус ответа, заголовок, H1, канонический URL-адрес, значение robots, размер HTML и время ответа. Такое сочетание полезно, потому что красивый скриншот перенаправленной, заблокированной, неиндексированной или неправильно канонизированной страницы по-прежнему является неудачной проверкой выпуска.

Средство визуализации принимает общедоступные страницы HTTP или HTTPS. Он намеренно отклоняет локальный хост, частные IP-адреса и страницы внутренней сети, поскольку запрос на захват выполняется за пределами вашего устройства. Не отправляйте подписанные ссылки для предварительного просмотра, пароли, токены или конфиденциальные промежуточные URL-адреса.

Как построить прогон точки перехода?

Используйте пять проходов вместо того, чтобы собирать огромную матрицу устройств:

1. Начните с узкой области шириной 320 или 360 пикселей, чтобы выявить предположения о минимальной ширине.
2. Сделайте снимок при типичной мобильной ширине, например 390 пикселей, и проверьте взаимодействие в портретной ориентации.
3. Постепенно увеличивайте ширину, пока сам контент не потребует изменения макета; запишите эту ширину.
4. Проверьте один пиксель ниже и один пиксель выше каждой объявленной точки перехода, затем повторите действия с длинными метками, ошибками проверки и расширенными меню.
5. Закончите с широкой привязкой рабочего стола, например 1440 пикселей, и одним более широким окном, чтобы уловить неконтролируемую длину строки или растянутый медиафайл.

Для таблицы стилей, которая изменяется на 768 пикселей, особенно полезная пара размеров — это 767 и 768 — это не просто стандартная предустановка для планшета. Если другая сетка изменится на 1024, добавьте 1023 и 1024. Пара граничных размеров выявляет ошибки на один пиксель, и перекрывающиеся правила минимума/максимума.

Укажите высоту, если закрепленная шапка, модальное окно, баннер согласия или экранная клавиатура могут занимать вертикальное пространство. Поверните хотя бы одно сенсорное устройство или симулятор. Макет, который соответствует размеру 390 x 844, может по-прежнему не работать при той же ширине с гораздо меньшей доступной высотой.

Какие ошибки адаптивного дизайна следует исправить в первую очередь?

Расставьте приоритеты по тому, сможет ли пользователь выполнить основную задачу страницы:

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

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

Когда вам понадобится настоящее устройство?

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

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

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