Вёрстка: фикс против «резины»

На Smashing Magazine огромный обзор российского веб-дизайна за авторством Арсения Веснина (Designcollector). Один из аспектов, который неизбежно упоминается в связи с отечественным веб-дизайном – это резиновая верстка.

In Soviet Russia

Действительно, в России стандартом считается верстка, при которой дизайн занимает 100% экрана, независимо от разрешения, в то время как западные сайты чаще всего сделаны по жесткой сетке и зафиксированы по ширине. Артемий Андреевич Лебедев, отец советского веб-дизайна вероятный, изобретатель и ярый поборник резиновой верстки, презрительно называет фиксированные сайты «скриншотами». Практически все сайты Студии имеют пропорциональную верстку, и именно они являлись и являются до сих пор источником идей, вдохновения и технических решений для тысяч дизайнеров, верстальщиков и разработчиков.

И у такого подхода есть очевидные плюсы. Грамотно выполненная резиновая верстка может повысить доступность и качество интерфейса сайта, она адаптируется под различные разрешения и размер окна, максимально эффективно используя рабочее пространство. Однако для некоторых приемов такой верстки неизбежно требуется применение таблиц и Javascript'а, и, как это практикуется в Студии -- без какого-либо пиитета к веб-стандартам. Впрочем, с точки зрения бизнеса веб-стандарты хороши тогда, когда позволяют экономить или зарабатывать, а не ограничивают функционал и снижают качество продукта, коим является любой сайт. С этой позиции высказывание Лебедева о том, что **лучшей валидатор -- это браузер**, кажется более чем оправданным.

Следуйте за мной

Многие последовали примеру Студии и начали делать все сайты резиновыми. Однако если работники Лебедева всегда следят за техническим прогрессом и заботятся действительно обо всех типах устройств отображения, а не только тех, что есть в их распоряжении, то большинство отечественных веб-разработчиков до этого не доросли. И потому очень часто приходится встречать сайты, которые на мониторах с диагональю больше 19 дюймов выглядят неприемлемо – катастрофические пропорции (сайт в ширину больше, чем в высоту), непропорционально длинные строки, на которых умещается по два предложения и т.д. Довольно часто попадается «ленивая» резиновая верстка, при которой изменяется только центральная колонка с основным контентом, а боковые колонки зафиксированы намертво.

Довольно трудно, если не невозможно сделать сайт, который смотрелся бы одинаково хорошо при ширине экрана и в 1024 и 1920 пикселей – разница почти в 2 раза. А между тем оба эти разрешения сейчас в ходу и убывать ни одно, ни другое не собирается – с одной стороны, дешевеют широкоформатные мониторы, с другой – появляется все больше нетбуков и прочей портативной техники с разрешениями, о которых веб-дизайнеры начали было забывать. Поэтому очень важно при резиновой верстке зафиксировать максимальную ширину, на которую будет растягивать ваш сайт. Сделать это можно при CSS-свойства помощи max-width, разумеется с отдельными телодвижениями для IE.

Fix my sink

Фиксированная верстка – прямое наследие полиграфической традиции, в которой какие-либо действия без понятия формата и четких размеров носителя невозможны. Как и в случае с печатью, созданный дизайнером макет максимально точно переносит в браузер и не меняется в зависимости от внешних обстоятельств. Фиксированный лэйаут проще внедрять и поддерживать: дизайнеру нет необходимости отрисовывать один и тот же макет в нескольких состояниях, а верстальщику ломать голову и биться над совместимостью. Готовые модульные сетки вроде 960gs позволяют упростить процесс дизайна и верстки сайтов. Дизайн фиксированных сайтов гораздо проще привести к гармоничному состоянию – можно быть уверенным, что блок, у которого высота и ширина равны, не поменяет своих свойств из-за того, что пользователь изменит размер окна. Очень часто гораздо лучше остановиться на фиксированной верстке, чем запускать сайт с непродуманной и не до конца оттестированной «резиной», качественная имплементация которой требует больших ресурсов – временных и, как следствие, денежных.

Из обоих миров

Совмещение приемов фиксированной и резиновой верстки, а также немного Javascript’а могут давать довольно интересные результаты. Например, лэйауты, в которых количество колонок с пропорциональной шириной зависит от доступного пространства (пример). Используя готовые наработки, можно создавать резиновые сайты по стандартам, тратя минимальное время на совместимость и используя техники, привычные по упомянутой выше 960 grid system – умельцы адаптировали ее под резину. К слову, в CSS3 потребность в резиновой верстке учтена – спецификация Flexible Box Layout Module все еще находится в состоянии черновика, однако с синтаксисом уже можно экспериментировать при помощи плагина для jQuery. Спецификация Flexible Box Layout Module на сайте W3 °C.