Вертикальная адаптивность

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

В итоге получается так, что захожу я с ноутбука с экраном 1366×768 на сайт молодёжного фестиваля и у меня абзац текста в духе модной КРУПНОЙ ТИПОГРАФИКИ не влезает целиком на экран, а подпись в слайдере вообще режется своим фреймом.

А самое интересное – что этот дизайн-паттерн поощряется самим софтом для разработки интерфейсов. И фотошоп, и иллюстратор, и фигма, и скетч – все предлагают не браузерные, а «экранные» разрешения, никто даже не напоминает о том, что «эй, ребят, не забудьте, что там ещё браузер и ОС отожрут 200 пикселей, не надо дизайнить десктоп в 16:9».

Не поддавайтесь: дизайн под FullHD – это где-то 1900×800, а под ноутбук – 1340×600.

Офигенный UI