Блог студии 77

Резиновая или фиксированная верстка

14 июля 2011

При создании сайта в нашей студии, большое внимание уделяется качественной верстке веб-страниц. Больше информации о верстке сайта в нашей студии я писал в другой статье. Сегодня же я хотел бы рассказать о видах верстки - резиновой и фиксированной. Каждый день мы пользуемся разработками зарубежных интернет-гигантов, таких, как Google, Microsoft и Facebook. Мы сидим за АйМаками и АйБиЭм-совместимыми ПК и используем компьютерные стандарты, созданные американскими учеными. Тем не менее, именно благодаря нам появилось сделанное почти «на коленке», с огромным недостатком финансов, практически на голом энтузиазме, весьма заметное в мировом масштабе сообщество www-ресурсов, именуемое чаще всего Рунетом (РУсский интерНЕТ). Хотя никакой четкой границы между «нашими» и «ненашими» реально не существует, так как Сеть интернациональна по определению, отечественным сайтам свойственен ряд характерных особенностей, выделяющих их на общемировом фоне.

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

Один из аспектов, который неизбежно упоминается в связи с отечественным веб-дизайном – это «резиновая» верстка (разметка). В Рунете стандартом считается верстка, при которой дизайн занимает 100% экрана, независимо от разрешения, в то время как западные сайты чаще всего сделаны по жесткой сетке и зафиксированы по ширине.

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

Противовес резиновой верстке – верстка фиксированная. В этом случае сайт имеет строго определенную ширину и жестко заданные пропорции его основных колонок. То есть, в большинстве случаев сайт «уже» окна браузера, располагается либо по центру окна, либо прижат к левому или (крайне редко) правому краю окна. Оставшееся пространство экрана заполняет фон.

Оба подхода имеют свои индивидуальные особенности, плюсы и минусы. В данной статье я попробую на примерах объяснить мотивы выбора разработчиками верстки того, либо иного типа.

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

Сайт с фиксированной версткой имеет неизменяющуюся ширину независимо от разрешения экрана пользователя. Наиболее часто используемая ширина составляет 960, либо 1000 пикселей – размер, который гарантирует пользователям с разрешением экрана 1024?768 px (наиболее распространенный случай) и выше возможность нормального просмотра сайта без раздражающей горизонтальной прокрутки.

Сайт с фиксированной версткой

Статистика использования экранных разрешений в 2011 году:

1280×1024 – 14,8%
1280×800 – 14,4%
1024×768 – 13,8%
1366×768 – 10,1%
1440×900 – 9,9%
1680×1050 – 9,2%
1920×1080 – 6,2%
1920×1200 – 4,5%
1600×900 – 2,5%
1152×864 – 1,5%
1360×768 – 1,3%
800×600 – 0,6%

Плюсы фиксированной верстки:

  1. Ширина фиксируется для всех браузеров, так что возникает меньше проблем с картинками, формами, видео и другим контентом, имеющим фиксированную ширину;
  2. Фиксированная верстка препятствует излишнему растяжению текстовых строк сайта по ширине;
  3. Фиксированные макеты верстаются быстрее и легче, что очень важно на срочных проектах;
  4. Верстку с фиксированной шириной часто проще стилизовать, в зависимости от применяемых эффектов.
Сайт с фиксированной версткой

Минусы фиксированной верстки:

  • Вид страницы может значительно ухудшиться, если пользователи будут вручную увеличивать размер шрифта в браузере (как правило, этой функцией пользуются слабовидящие). Ввиду того, что ширина текстового блока зафиксирована и не изменяется пропорционально размеру шрифта, в дизайне страницы возникают искажения.
  • При разрешениях, меньших, чем тот, на который рассчитан макет, в браузере появится горизонтальная прокрутка. Хотя разрешения меньше 1024×768 px на персональных компьютерах – уже большая редкость, для распространенных сегодня смартфонов и нетбуков это обычное дело.
  • Фиксированный макет будет оставлять много пустого пространства у пользователей с большим разрешением экрана;
  • Относительно небольшая ширина сайта с фиксированной версткой часто ограничивает в возможностях размещения публикуемых материалов.

Хорошим примером фиксированной верстки является недавно законченный нами сайт по аренде недвижимости

Резиновая верстка

Резиновая верстка создается без определенного размера оболочки, но с использованием процентных свойств. Другими словами, 100% ширина сайта займет все свободное пространство экрана монитора.

Сайт с резиновой версткой

Плюсы резиновой верстки:

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

Минусы резиновой верстки:

  • Избыточность элементов сайта, вмещающихся на больших мониторах, может запутать пользователей и сделать сайт слишком перегруженным;
  • Если не используются ограничения для ширины текстовых блоков сайта, то их становится проблематично читать;
  • Разработчик должен иметь возможность провести тестирование правильного отображения сайта на всех возможных размерах экранов;
  • Дизайнеру в некоторых случаях приходится рисовать несколько вариантов макета для разных разрешений;
  • Так как резиновая верстка более сложная, она требует более тщательной адаптации под различные браузеры.

Наиболее популярные веб-браузеры, под которые, прежде всего, проводится тестирование:

Сайт с фиксированной версткой

Примером резиновой вестки является наш сайт Transit production

Также, к резиновым относятся гибридная и эластичная верстки. Гибридная – это наиболее распространенный вид верстки, который включает в себя как фиксированные, так и относительные размеры элементов – некий компромисс между фиксированной и резиновой html-версткой. Большинство веб-мастеров используют именно этот вид верстки при разработке сайта.

При использовании эластичной верстки размер основного контейнера и других (важных) элементов задается в специальных единицах – em. Em прямо пропорциональны размеру текста или шрифта. Следовательно, при увеличении размера текста на странице, размеры разделов, заданные в em, увеличатся пропорционально.

Все типы резиновой верстки более требовательны к времени и навыкам разработчиков, но практически всегда позволяют максимально эффективно использовать пространство монитора и предоставлять пользователю удобный и универсальный интерфейс. Тем не менее, перед началом проектирования сайта нужно определиться – оправданы ли усилия для «резины», и действительно ли подача информации в таком виде для данного случая будет наиболее эффективна?

Резиновая или фиксированная верстка

Другие статьи автора: