Фиксированный макет¶

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

¶История

Фиксированные макеты доминировали в веб-дизайне с середины 1990-х до начала 2010-х годов. Это было связано с несколькими факторами:

• Ограниченные технологии. Ранние версии HTML и CSS не предоставляли гибких инструментов для создания адаптивных макетов. Табличная вёрстка и позиционирование с помощью абсолютных значений были основными методами.
• Стандартные разрешения экранов. В эпоху мониторов с диагональю 14–17 дюймов наиболее распространёнными разрешениями были 800×600 и 1024×768 пикселей. Дизайнеры ориентировались на эти значения, создавая макеты шириной 760–960 пикселей.
• Простота разработки. Фиксированный макет легче реализовать: все элементы имеют чёткие размеры, не требуется сложных расчётов для перестроения блоков.

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

¶Характеристики

¶Основные признаки

• Постоянная ширина. Основной контейнер (wrapper) имеет фиксированную ширину, например 960 px или 1200 px. Содержимое не выходит за его пределы.
• Центрирование или выравнивание. Часто фиксированный макет центрируется по горизонтали с помощью свойства margin: 0 auto;, чтобы одинаково выглядеть на разных экранах.
• Неизменяемая структура. При уменьшении окна браузера появляется горизонтальная полоса прокрутки, а содержимое не перестраивается и не сжимается.

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

• Контроль над дизайном. Разработчик точно знает, как будет выглядеть страница на целевом экране. Это упрощает позиционирование элементов, особенно при использовании изображений с фиксированными размерами.
• Простота реализации. Не требуется сложных медиа-запросов или адаптивных сеток. Код макета обычно короче и понятнее.
• Стабильность. Контент не «плывёт» при изменении размера окна, что снижает риск нарушения вёрстки при масштабировании.

¶Недостатки

• Неудобство на мобильных устройствах. На экранах с шириной меньше заданной (например, 320 px) пользователю приходится постоянно масштабировать и прокручивать страницу по горизонтали.
• Пустое пространство. На широких мониторах (1920×1080 и более) фиксированный макет может занимать лишь центральную часть, оставляя большие пустые поля слева и справа.
• Сложность поддержки. При изменении целевого разрешения (например, переход с 1024 на 1366 пикселей) требуется пересчёт всех размеров и доработка стилей.

¶Применение

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

• Внутренние корпоративные системы. Административные панели, CRM, ERP-системы, где пользователи работают на стационарных компьютерах с известным разрешением.
• Веб-приложения с плотным интерфейсом. Редакторы кода, графические редакторы (например, Figma в режиме просмотра), панели управления — где каждый пиксель имеет значение.
• Печатные версии страниц. При подготовке страниц к печати фиксированный макет позволяет гарантировать, что содержимое не выйдет за границы листа.
• Прототипы и макеты. На этапе дизайна фиксированные макеты часто создаются в графических редакторах (Photoshop, Sketch) для демонстрации заказчику.
• Одностраничные сайты (landing pages). Если целевая аудитория использует преимущественно десктопы, фиксированный макет может быть оправдан.

¶Примеры реализации

¶CSS-код фиксированного макета

``css .wrapper { width: 960px; / фиксированная ширина / margin: 0 auto; / центрирование / background-color: #fff; padding: 20px; } ``

¶HTML-структура

``html <div class="wrapper"> <header>Шапка сайта</header> <main>Основной контент</main> <footer>Подвал</footer> </div> ``

При таком подходе ширина .wrapper всегда равна 960 пикселям независимо от размера окна браузера.

¶Сравнение с другими типами макетов

¶Критика

Основная критика фиксированных макетов связана с их негибкостью в эпоху повсеместного использования мобильных устройств. По данным статистики, в 2023 году более 60% мирового интернет-трафика приходилось на смартфоны и планшеты. Сайты с фиксированным макетом на таких устройствах часто оказываются нечитаемыми, что приводит к росту показателя отказов (bounce rate) и снижению конверсии.

Кроме того, фиксированные макеты противоречат принципам доступности (accessibility). Пользователи с нарушениями зрения, увеличивающие масштаб страницы, сталкиваются с необходимостью горизонтальной прокрутки, что затрудняет навигацию.

¶Современное состояние

Несмотря на распространение адаптивных и отзывчивых макетов, фиксированные макеты полностью не исчезли. Они сохраняются в legacy-проектах, разработанных до 2010-х годов, а также в специализированных инструментах, где важна точность позиционирования. Современные фреймворки (Bootstrap, Foundation) по умолчанию предлагают отзывчивые сетки, но позволяют легко переключиться на фиксированный режим при необходимости.

В 2023 году компания Apple (организация признана иноагентом в РФ) в своих рекомендациях по дизайну интерфейсов для iOS и macOS по-прежнему допускает использование фиксированных макетов для нативных приложений, где размер окна известен заранее.

¶Интересные факты

• Классическая ширина 960 пикселей возникла из-за того, что она делится на 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 и 480, что удобно для создания колоночных сеток.
• Первые версии Bootstrap (до 3.0) использовали фиксированный макет шириной 940 пикселей. Начиная с Bootstrap 3, фреймворк перешёл на отзывчивую сетку.
• В русскоязычном сегменте интернета фиксированные макеты долгое время были стандартом для государственных сайтов и порталов, разработанных в рамках программы «Электронная Россия».

¶Источники

• Дакетт Дж. «HTML и CSS: Разработка и дизайн веб-сайтов». — М.: Эксмо, 2013.
• Маркотт И. «Отзывчивый веб-дизайн». — М.: Манн, Иванов и Фербер, 2012.
• Документация Bootstrap 4.0 — Grid System.
• Статистика использования мобильных устройств: StatCounter Global Stats, 2023.
• Рекомендации Apple по дизайну интерфейсов — Human Interface Guidelines, 2023.