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

На 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 на сайте W3C.

Раньше здесь была форма комментариев, но теперь её нет. Почему?

Хотите обсудить содержимое заметки? Напишите мне email или сообщение в твиттере. Я отвечаю на все вежливые сообщения, и готов дополнить заметки ценными дополнениями.