Изменение размера окна браузера — это ещё не проверка того, как люди реально пользуются сайтом. Ahmad Shadeed сделал инструмент именно для этого пробела.

Адаптив мы проверяем через media queries, container queries и переключатель «мобильный/десктоп». Но реальные посетители смотрят сайт с пристыкованными DevTools, открытой экранной клавиатурой, вертикальными вкладками, которые съедают ширину, в split view или внутри in-app браузеров. Каждый такой контекст даёт необычный viewport, который обычным ресайзом окна не воспроизвести.

Site Seeing позволяет выбрать один из таких контекстов и посмотреть, как ведёт себя страница. В статье автор показывает один и тот же дизайн:

→ с пристыкованными DevTools → с вертикальными вкладками → с вертикальными вкладками и DevTools одновременно → в печати

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

Тестовый дизайн нарисован вручную, обложка начиналась с скетча в блокноте и потом переехала в Figma, а на главной странице спрятан пасхалка-сюрприз: обнови страницу несколько раз в свежих Chrome или Safari.

Инструмент 👇 https://lab.ishadeed.com/tools/site-seeing/

Статья Ahmad Shadeed 👇 https://ishadeed.com/article/beyond-the-viewport/

#css #frontend #webdew #responsivedesign