Шел 2025 год, а верстка в интернете за ним не успевала
Открываю РБК на своём мониторе 21:9 — и вижу это. Все слева... Скриншот прилагаю..
2025 год, серьёзное издание, а верстка как будто из нулевых.
Первая реакция — гнев. Ну как так, ребята?
Адаптивная верстка существует лет пятнадцать.
А потом включил голову..
Как вообще решают, под какие экраны верстать?
Есть три подхода:
🔸 Фиксированная ширина
Контент всегда одного размера. На маленьком экране — горизонтальный скролл, на большом — пустые поля по краям.
Это как шить один костюм 50-го размера. Кому-то сядет идеально, остальные страдают.
Когда годится: внутренние системы, где все сидят на одинаковых мониторах.
🔸 Адаптивная верстка с breakpoints
Делаешь 3-4 версии: мобилка, планшет, ноутбук, десктоп. Экран попадает в диапазон — получает свою версию.
Как шить S, M, L, XL. Покрываешь 95% людей за разумные деньги.
Когда годится: большинство публичных сайтов и приложений.
🔸 Полностью резиновая верстка
Контент тянется под любой экран. Хоть 4:3, хоть 21:9, хоть вертикальный монитор.
Как костюм на заказ с идеальной подгонкой. Дорого, долго, сложно поддерживать.
Когда годится: продукты, где разнообразие экранов критично (дашборды, редакторы, рабочие инструменты).
Как все это посмотреть?
Открываете любой сайт -> devtools (f12 или ctrl+shift+i)-> Играетесь с разрешением (можно эмулировать мобильники)
Обязательно посмотрите, вот короткая статья насчет devtools
Что с РБК:
Их аудитория — телефоны, планшеты, стандартные ноуты 16:9. Для них сайт работает отлично.
Ультраширокие мониторы — это доли процента посетителей. И эти люди точно не разворачивают новостной сайт на весь экран. Они его в окне держат.
РБК посчитали: издержки на поддержку экзотических разрешений больше выгоды. И это не баг, а осознанное решение.
Выводы:
🔸Прежде чем кричать «сделайте адаптив!» — посмотри метрики. С каких устройств реально приходят пользователи? Какие разрешения в топ-10?
🔸Идеальная верстка под все экраны мира — это дорого. Хорошая верстка под экраны твоей аудитории — это разумно.
🔸Иногда пустые поля по бокам — это не косяк, а приоритеты.
@analyst_exe