Помимо перечисленных в инфографике типов макетов, веб-дизайн предлагает множество других структур, которые адаптируются под разные цели, устройства и пользовательские предпочтения. Эти варианты помогают оптимизировать сайты для мобильных устройств, улучшать SEO и повышать вовлеченность аудитории. Вот некоторые из них:

1. Фиксированный (Static) макет: Страница имеет фиксированную ширину, независимо от размера экрана. Это классический подход, где контент центрируется, а по бокам остаются пустые поля на широких мониторах. Подходит для сайтов с предсказуемым дизайном, как корпоративные страницы, но может быть неудобен на мобильных устройствах без адаптации.
2. Резиновый (Liquid или Fluid) макет: Ширина элементов растягивается на весь экран, пропорционально меняясь с разрешением. Это обеспечивает полное использование пространства, но может привести к искажениям на очень широких или узких экранах. Идеален для текстовых сайтов, блогов или новостных порталов.
3. Адаптивный (Adaptive) макет: Использует несколько фиксированных версий дизайна для разных разрешений экрана (breakpoints). При смене размера устройства сайт "переключается" на подходящий шаблон. Это позволяет точную оптимизацию, но требует больше работы при разработке.
4. Отзывчивый (Responsive) макет: Комбинирует fluid-элементы с медиа-запросами CSS, чтобы дизайн плавно адаптировался к любому устройству. Это стандарт для современных сайтов, обеспечивающий единый код для десктопа и мобильных. Google рекомендует его для лучшего ранжирования в поиске.
5. Мобильный первый (Mobile First): Дизайн начинается с мобильной версии, а затем расширяется для десктопа. Это подход, ориентированный на скорость и простоту, особенно актуален для e-commerce и приложений с высокой мобильной аудиторией.
6. Одностраничный (Single-Page) макет: Весь контент на одной странице с плавной прокруткой и якорями. Подходит для лендингов, портфолио или промо-сайтов, где важна быстрая навигация без перезагрузок.
7. Параллакс-макет: Элементы двигаются с разной скоростью при скролле, создавая эффект глубины. Используется для креативных сайтов, но может замедлить загрузку.
8. Минималистичный макет: Простая структура с большим количеством белого пространства, фокусом на контенте. Идеален для брендов, подчеркивающих элегантность, как Apple.
9. Полноэкранный (Full-Screen) макет: Контент занимает весь экран, часто с большими изображениями или видео на фоне. Применяется в портфолио фотографов или туристических сайтах.
10. Грид (Grid) макет: Современный CSS Grid, позволяющий гибкую сетку блоков. Расширяет карточный подход, подходя для галерей или каталогов.

Эти макеты часто комбинируются, и выбор зависит от типа сайта: для интернет-магазинов — responsive с карточками, для блогов — Z- или F-образные. В 2024–2025 годах тренды склоняются к мобильной оптимизации и интеграции AI для динамических layouts. Изучение инструментов вроде Figma или Adobe XD поможет в создании прототипов. Подробнее о тенденциях можно найти в источниках по веб-дизайну, таких как Habr или специализированные блоги.

Работая в вебе, мы имеем дело с совершенно иным материалом. Наша работа определяется своей преходящестью, часто обновляемой или заменяемой в течение года или двух. Несоответствующие ширины окон, разрешения экранов, предпочтения пользователей и установленные шрифты — это лишь некоторые из неосязаемых факторов, с которыми мы сталкиваемся при публикации нашей работы. И это ещё не всё: мы сталкиваемся с большим количеством устройств, режимов ввода и браузеров, чем когда-либо прежде. Вместо того чтобы создавать неизменные, неизменяющиеся пространства, которые определяют конкретный опыт, они предполагают, что обитатель и структура могут — и должны — взаимно влиять друг на друга. Это наш путь вперёд. Вместо того чтобы создавать разрозненные дизайны для каждого из всё возрастающего числа веб-устройств, мы можем рассматривать их как грани одного и того же опыта. Мы можем проектировать для оптимального просмотра, но использовать стандарты-based технологии, чтобы сделать опыт адаптивным к медиа, которые его отображают. Центральным элементом этого подхода являются CSS media queries, развитие более ранних media types, которые позволяли ограниченную осведомлённость о устройствах. Media queries позволяют дизайнерам проверять характеристики устройства, такие как разрешение, и применять адаптированные стили. Например, мы можем использовать media queries для применения стилей только для экранов с максимальной шириной 600px: при просмотре на экранах меньше 600px floats отключаются, чтобы линеаризовать страницу, stacking элементы вертикально. Для ещё меньших экранов, ниже 400px, макеты изображений переходят от трёх колонок к двум, пересчитывая ширины с процентами, полученными из fluid grid. На больших экранах выше 1300px изображения принимают шестиколонный макет, оптимизируя использование пространства. Responsive web design простирается за пределы простых сдвигов макета. Он позволяет точную настройку, такую как увеличение зон клика для ссылок на touch-устройствах в соответствии с законом Фиттса, selective показ или скрытие навигационных элементов и responsive typesetting для корректировки размера текста и ведущего для оптимальной читаемости. В конечном итоге, responsive web design опирается на три столпа — fluid grids, flexible images и media queries — требуя смены мышления: вместо изоляции контента в disparate, device-specific опытах, мы можем использовать media queries для progressive enhancement нашей работы в разных контекстах просмотра. Это позволяет дизайнам течь с естественной изменчивостью веба, echoing призыву Алсоппа проектировать для 'ebb and flow of things', обеспечивая адаптивность через градиент опытов без defaulting к отдельным, device-specific сайтам.

- Этан Маркотт — один из ведущих экспертов в области веб-дизайна