Умная резина

Что такое резиновая вёрстка? Грубо говоря, резиновая вёрстка сайта — это когда при любой ширине монитора сайт занимает 100%. Хорошо это или плохо?

Плюсы

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

Минусы

• Трудоёмкость. Дизайнер должен учесть множество мелочей, продумать, какие блоки как будут тянуться и пр. Про работу технолога, который это будет верстать и говорить не нужно. Немаловажным аспектом, усложняющим работу являются и коммуникации между дизайнером и технологом: общаться приходится значительно больше, постоянно что-то доделывать и переделывать в процессе, т. к. дизайнер ≠ технолог и всего сразу ему учесть никогда не удастся.
• Ограниченность дизайна:
  • рамки, накладываемые непосредственно резиной не позволяют реализовывать часть решений;
  • большой объём работы по резине отвлекает сознание от главного потока;
  • сложнее уложиться в сроки, которые никуда не делись, всем всё нужно было ещё вчера;
  • проблематичней изучать, открывать, пробовать и использовать новые крутые фишки;
  • и, как следствие всего этого — неудовлетворённость работой, что скажется на её качестве.
• Пользователи 27'х маков компьютеров с большими мониторами вынуждены страдать. Невозможно читать эти ужасно-длинные километровые строчки, глаз вынужден совершать очень большие рывки, двигаясь от строки к строке = усталость, негатив, желание убить всех людей закрыть страницу и не возвращаться.

Вот так мы видим Википедию при ширине экрана в 712 px:

А вот так в 2 360 px:

Чтобы пользователям с очень большими мониторами не было уж сильно плохо, резину делают ограниченной, этакий компромисс: тянемся только от сих до сих (например, от 1 000 px до 1 600 px).

Можно много ещё перечислять и рассуждать, но в общем очевидно, что любое универсальное всегда хуже специального.

О плюсах и минусах сайтов с фиксированной шириной говорить не будем, большинство всех сайтов именно такие и вы сами можете всё посмотреть. Поговорим лучше о нашем методе ↓

Делаем «умную резину»

1. Сначала мы разрабатываем дизайн под самое популярное разрешение (1 280 px).
2. Затем для каждого популярного разрешения мы разрабатываем отдельный дизайн всех макетов, обычно это 1024 px, 800 и больше 1280 — реже.
3. Технолог верстает все страницы под основной дизайн (1 280 px), реализует интерактивные элементы, интерфейсную заскриптовку, в общем — всё-всё-всё.
4. Затем верстаются макеты всех остальных разрешений (конечно, с учётом основного и по его мотивам). Все отклонения от основного разрешения задаются при помощи специального класса элемента body (например: «w1024», «w800», «w1600»), а переключение классов обеспечивает javascript при загрузке окна и изменении его размеров (само собой, при переключении классов тригеруется определённое событие, чтобы можно было произвести необходимые действия с различными сложными элементами — всякими каруселями, требующими переинициализации и пр.).

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

Мы придумали и используем данную технологию уже больше года (может 1.5−2, не помню), я очень удивлён, что никто до сих пор не дошёл до того же (ничего подобного в сети не нашёл).

Вот пример js, выставляющего необходимые классы, пользуйтесь на здоровье ;-)

UPD 1: также рекомендую к прочтению статью на хабре про Адаптивный веб-дизайн (Responsive Web Design).

UPD 2: конечно, просто для изменения стилей не обязательно использовать js, можно (и нужно) использовать медиа-запросы (для старых версий IE есть специальный css3-mediaqueries-js). Javascript из примера пригодится при необходимости сложных манипуляций.