Фиксированная вёрстка

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

История

Фиксированная вёрстка была доминирующим подходом в веб-дизайне с середины 1990-х годов до начала 2010-х годов. В эпоху господства мониторов с разрешением 800×600 и 1024×768 пикселей разработчики стремились создать макет, который гарантированно помещался бы в окно браузера без горизонтальной прокрутки. Типичной шириной контейнера на протяжении многих лет была 960 или 980 пикселей — это число удобно делится на 2, 3, 4, 5, 6, 8, 10 и 12, что упрощало построение модульных сеток.

С появлением смартфонов и планшетов (конец 2000-х — начало 2010-х) фиксированная вёрстка начала вытесняться адаптивными и отзывчивыми методами, так как фиксированный макет на маленьких экранах приводил к необходимости масштабирования или горизонтальной прокрутки, что резко ухудшало пользовательский опыт. Тем не менее, фиксированная вёрстка остаётся востребованной для внутренних интерфейсов, панелей управления, некоторых типов лендингов и проектов, где требуется строгое соответствие дизайн-макету.

Принципы и реализация

Основной принцип фиксированной вёрстки — использование абсолютной единицы измерения (px) для задания ширины основного контейнера или колонок. В CSS это реализуется через свойство width с фиксированным значением, например:

``css .container { width: 960px; margin: 0 auto; / центрирование по горизонтали / } ``

Ключевые особенности:

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

Преимущества

Точное соответствие макету. Дизайнер может быть уверен, что на всех экранах с шириной больше заданной страница будет выглядеть идентично.
Простота разработки. Верстальщику не нужно продумывать поведение элементов на разных разрешениях — достаточно задать фиксированную ширину.
Лёгкость поддержки. Для внесения изменений в макет достаточно отредактировать один CSS-файл, не затрагивая адаптивные стили.
Предсказуемость. Пользователь видит именно то расположение блоков, которое задумал дизайнер, без неожиданных переносов или перестроений.

Недостатки

Плохая совместимость с мобильными устройствами. На экранах с шириной менее 960 пикселей (например, на смартфонах) фиксированный макет либо обрезается, либо требует масштабирования, что делает текст мелким и нечитаемым.
Неэффективное использование пространства. На широких мониторах (1920+ пикселей) фиксированный контейнер занимает лишь часть экрана, оставляя пустые поля по бокам.
Необходимость горизонтальной прокрутки. Если ширина окна меньше ширины контейнера, пользователь вынужден прокручивать страницу вправо-влево, что считается плохой практикой юзабилити.
Сложность интеграции с современными требованиями. Поисковые системы (Google) с 2015 года учитывают мобильную адаптацию как фактор ранжирования, что делает фиксированную вёрстку невыгодной для SEO.

Области применения

Несмотря на снижение популярности, фиксированная вёрстка сохраняет актуальность в ряде сценариев:

Внутренние корпоративные системы (CRM, ERP, панели администрирования), где пользователи работают с известным разрешением экрана (обычно 1920×1080).
Лендинги и промо-страницы, где дизайнеру важно сохранить точное расположение элементов (например, для рекламных макетов, которые потом печатаются или используются в видеороликах).
Прототипы и макеты — фиксированная вёрстка удобна для быстрого создания демо-версии сайта без адаптации.
Сайты с узкой аудиторией, где заранее известно, что все посетители используют настольные компьютеры с определённым разрешением (например, специализированные научные или технические порталы).

Сравнение с другими подходами

Тип вёрстки	Единицы измерения	Поведение при изменении размера окна	Пример
Фиксированная	px	Ширина не меняется, появляется прокрутка	`width: 960px;`
Резиновая	%	Ширина меняется пропорционально окну	`width: 80%;`
Адаптивная	px + медиа-запросы	Ширина фиксирована, но на разных разрешениях подгружаются разные макеты	`@media (max-width: 768px) { width: 100%; }`
Отзывчивая (responsive)	%, vw, vh, rem, медиа-запросы	Ширина и расположение элементов динамически перестраиваются	`grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));`

Инструменты и технологии

Для реализации фиксированной вёрстки используются стандартные средства HTML и CSS. Исторически популярными были:

960 Grid System — модульная сетка на 12 колонок шириной 960 пикселей, разработанная Натаном Смитом в 2008 году.
Blueprint CSS — CSS-фреймворк с фиксированной сеткой.
Bootstrap 2 и 3 — ранние версии популярного фреймворка по умолчанию использовали фиксированную сетку (с возможностью переключения на резиновую).

В современных проектах фиксированная вёрстка редко применяется как единственный метод; чаще она комбинируется с медиа-запросами (например, для создания «адаптивной» версии на основе фиксированного макета).

Критика и современное состояние

Критики фиксированной вёрстки указывают на её несоответствие принципам прогрессивного улучшения и мобильно-ориентированного дизайна (mobile-first). С 2015 года Google официально объявил, что «мобильная дружественность» является фактором ранжирования, что практически вынудило владельцев сайтов отказаться от чисто фиксированных макетов. Однако в некоторых нишах (например, в дизайне интерфейсов для планшетов с фиксированным разрешением) фиксированная вёрстка всё ещё используется.

В современной веб-разработке фиксированная вёрстка чаще всего применяется как частный случай адаптивной: на десктопах используется фиксированная ширина (например, 1200px), а на мобильных устройствах макет перестраивается в одноколоночный. Полный отказ от фиксированных значений в пользу процентов, vw или fr (в CSS Grid) стал стандартом для новых проектов.

Источники

Маркотт, Итан. «Отзывчивый веб-дизайн» (2011).
Круг, Стив. «Не заставляйте меня думать. Веб-юзабилити и здравый смысл» (2006, 2014).
Документация Bootstrap 3 (getbootstrap.com/docs/3.4/css/).
Статья «960 Grid System» на сайте 960.gs.
Материалы Google Web Fundamentals (developers.google.com/web/fundamentals/design-and-ux/responsive).

BFOmetr — база данных и аналитика по компаниям России.

На главную BFOmetr →