96% или резиновая модульная сетка для Web

Иллюстрация к статье «96% или резиновая модульная сетка для Web»

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

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

Монолит (px)

Итак, основання на пропорциях и золотом сечении, фиксированная модульная сетка выглядит примерно так. Запомните этот пример, он пригодится для понимания эластичного и резинового подхода.

Чтобы разработать фиксированный макет по такой сетке, достаточно лишь выбрать ширину основных модульных блоков и отступов между ними, основываясь на приведенных размерах.

Достаточно подробная разработка макета на такой сетке описана на nettuts.com. Вряд ли у меня есть чем дополнить данное руководство.

Эластик (em)

Самое главное при проектировании такой разметки помнить, что она зависит от базового значения шрифта, используемого на сайте. Это значит, что сайт с 1em Verdana и 1em Arial будут заметно отличаться друг от друга по масштабу, из-за заметной разницы в размерах этих гарнитур.

Чтобы проектировать эластичный макет по базовой сетке приведённой выше, лучше всего воспользоваться удобным калькулятором для перевода px в em. Да, и помните, что в большинстве браузеров, по умолчанию, 1em=16px.

Ещё можно скачать неплохой CSS-фреймворк, основанный на сетке 960 Grid, для проектированния подобных эластичных макетов.

Пример эластичной страницы вы можете увидеть в статье «Масштабируемые изображения».

Резина (%)

C резиновой вёрсткой по сетке 960 Grid наблюдается некоторая неоднородность в возможностях браузеров и ожиданиях верстальщиков и дизайнеров.

Если посмотреть неплохой фреймворк Fluid 960 Grid System для резиновой разметки в разных браузерах, то можно увидеть, что разметка блоков с правого края разваливается в Opera, Chrome и Safari, но отлично работает в Firefox и даже Internet Explorer 6 (!).

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

Результаты

Экспериментальным путём доказано:

  • Браузеры Mozilla Firefox и Internet Explorer воспринимают процентные значения, указанные в десятичных дробях с точностью до двух цифр после запятой. Им можно указывать проценты, например, вот так: 12.15%, 50.42% и т.д.
  • Браузеры Chrome и Safari понимают десятичные дроби с точностью до одной цифры после запятой. Они понимают вот так — 10.1%, 45.5%. Вторую цифру после запятой они игнорируют.
  • Браузер Opera понимает только целые числа — 1, 2, 3, …

Отсюда и «поломанная» сетка в фреймворке.

И что теперь?

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

Если отталкиваться от того, что внешний div-контейнер страницы будет составлять 96% размера окна браузера (по аналогии с 960px), то легко считать, что остальные блоки будут высчитываться из расчёта 10px=1%. Например блок шириной 60px будет равен 6%, а блок шириной 860px=86%.

В итоге, просуммировав все значения отступов и ширины блоков в любой полосе модульной сетки, мы получим всё те же 96%.

Всё просто. И будет работать во всех браузерах.

По-моему, пропорции соотношений блоков и отступов в таком подходе останутся такими же, что и в фиксированной или эластичной модульных сетках. Хотя, можно оспорить очевидность такого подхода в комментариях к посту ;)

Warning!

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

Читать по теме:

Удачных вам экспериментов с модульной сеткой и красивых макетов!

* * *

Сканер блогов:

Стоит ли публиковать свой лучший контент на сторонних ресурсах?

* * *

* * *

Понравилась статья?

Тогда помогите мне сделать её доступной для других, или будьте в курсе последних событий:

* * *

Статьи по теме:

Комментариев: 20

  1. sordes, 14.04.2009 в 8:57

    «Иначе высчитать реальную ширину блоков в браузерах будет очень трудно или вообще невозможно.»

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

    Отступы можно также задавать в процентах, чтобы не морочить себе голову, а ширину бордера высчитывать с помощью элементарной пропорции, или подгонять уже потом, на готовом макете. Я вот примерно так и поступаю:-)

    «Подумаешь, бином Ньютона!»©;-)

    Ответить

  2. ioni, 14.04.2009 в 9:49

    Гриды — это, конечно, хорошо, но каждый конкретный проект требует к себе определенного внимания и индивидуальности — иначе мы вернемся в 1998 год, когда все сайты были похожи один на другой

    Ответить

  3. rotor, 14.04.2009 в 10:17

    @sordes, обычно границы блоков на макетах рисуются дизайнерами в пикселях, поэтому получив фиксированные размеры границ и %-ые отступы, мы не сохраним исходные пропорции сетки.

    @ioni, с возвратом в 1998 я не соглашусь. Если бы, был набор из трёх-четырёх размерностей, то возможно. Но при таком наличии (выборе) размеров и соотношений между блоками + различные фоновые решения для графики, и одинаковость проектам не грозит точно.

    Посмотрите на реальные примеры с сайта 960.gs. Выглядят непохоже, но достаточно органично и привлекательно.

    Если только, в будущем, дизайнеры не будут копировать модульную сетку друг друга ))

    Ответить

  4. Obfuscate, 20.04.2009 в 19:10

    Что они скорее всего и будут делать. Это что-то вроде юкоза)) хыхы, когда все сайты вроде разные, а скукой веет...

    Хотя, конечно, спорить не буду, довольно гармоничная верстка очень упрощает восприятие сайта и вообще гораздо эээ... гигиеничнее, чем куча рисунков.

    Спасибо за статью, но что-то кодер, сидящий во мне пока очень слабоват... Не очень понимаю, то есть не понимаю каких-то нужных основ чтобы понять вот эти верха... Вот так вот.

    Познавательно поел)

    Ответить

  5. rotor, 21.04.2009 в 10:50

    @Obfuscate, необязательно быть кодером, чтобы знать и применять в работе эти принципы.

    Ответить

  6. Алеся, 28.04.2009 в 9:52

    Сетка нужна, иначе буйству фантазии некоторых нет предела.

    Ответить

  7. tahaco, 16.05.2009 в 16:36

    Краще робити кожен проект по черзі і не залежно від іншого. Хоть це і займе більше ресурсів і часу. Але результат дасть про себе знати...

    Ответить

  8. nN, 08.07.2009 в 21:36

    Оччень интересные примеры на 960. Есть только одно НО: все их образцы имеют с вертикальной сеткой мало общего — композиция «держится» НА ГОРИЗОНТАЛЯХ!!! :)))))))))))) Если кто кодер, и не в курсе — присмотритесь, основные блоки — горизонтальные :)

    Ответить

    • @ Search Bot, 08.11.2009 в 11:42

      @tahaco: композиции, может, и держатся на горизонталях, но без вертикалей эти горизонтали — просто неорганизованные пятна. Посмотрите верстку любой газеты. Техническая основа — вертикали, они дают правильно выделиться главным горизонтальным блокам из хаоса.

      @rotor: красивая идея, почти как золотое сечение для веба) -обязательно воспользуюсь.

      Ответить

  9. Антон, 08.09.2009 в 22:38

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

    nN, если margin/padding-bottom у всех элементов сделать кратным интерлиньяжу текста, то будет и вертикаль.

    Ответить

    • Кирилл, 17.01.2010 в 18:01

      Это всё потому, что не следуют стандартам минимальным и/или просто самоучки, которые неправильно понимают техническую документацию и прочие ценные бумаги...

      Ответить

  10. Александр, 24.04.2010 в 14:17

    Я полностью соглашусь с Алесей

    Ответить

  11. Scriptin, 12.06.2010 в 20:29

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

    Гораздо эффективнее использовать фреймворк Blueprint (или аналоги, поддерживающие сборки с разными параметрами), собранный под разные размеры экрана + CSS3 media queries (для старых браузеров есть библиотека css3-mediaqueries.js). В этом случае просто имеем 2-3 набора базовых стилей, которые нам даже не нужно писать самостоятельно. При этом страница остается фиксированной по ширине — получается нечто вроде адаптивной разметки.

    Вообще интересно было бы сравнить Blueprint и 960gs — мне кажется, первый выиграет по многим показателям.

    Ответить

  12. @ Прокачиваем шаблоны от 960.gs | rotorweb.ru | Проблемы и решения в Web-дизайне, 02.08.2011 в 9:43

    [...] работе шаблоны модульной сетки от 960.gs. Этот фреймворк довольно распространен и, в последнее время, [...]

    Ответить

  13. Валера, 12.11.2011 в 23:54

    Спасибо автору за тему.

    Я хоть понял в каком направлении нужно двигаться при создании дизайна сайта.

    Ответить

  14. Слава, 21.05.2012 в 12:27

    > Я не знаю, зачем авторы фреймворка пошли на ухищрения с дробями

    Затем, что проценты отсчитываются не от ширины окна, а от ширины контейнера.

    Ответить

  15. @ Aharito, 24.01.2013 в 22:47

    @Слава

    Да, вы правы. Я тоже читал это с некоторым недоумением.

    Такую сетку можно использовать, если полностью отказаться от вложенности контейнеров, что, естественно, порождает новые проблемы.

    Мне интересно, какие всё же есть хаки/решения для Оперы, ведь она до сих пор не воспринимает дробные проценты... Неужели скрипт нужно писать специально для этих целей?

    Ответить

  16. @ Прокачиваем шаблоны от 960.gs | Просто блог, 19.02.2014 в 11:29

    [...] работе шаблоны модульной сетки от 960.gs. Этот фреймворк довольно распространен и, в последнее время, [...]

    Ответить

  17. Никита, 10.03.2016 в 9:16

    Спасибо за ваше старание и труд! Материал полезный и интересный!

    Ответить

Есть что сказать?