96% или резиновая модульная сетка для Web
Вторник, 14 апреля 2009
В последнее время я увлёкся различными типографскими сетками и применимостью их в веб-дизайне. Сайты, построенные с применением базовой сетки в разметке, выглядят намного эстетичнее и гармоничнее, чем их собратья, построенные на личных представлениях о прекрасном отдельно взятого дизайнера.
Одним из лучших сайтов, пропагандирующих базовую сетку для 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!
Напомню, что не рекомендуется использовать вертикальные границы для блоков в эластичной и резиновой вёрстке. Иначе высчитать реальную ширину блоков в браузерах будет очень трудно или вообще невозможно.
Читать по теме:
- Модульная система вёрстки. Википедия, куда же без неё.
- Модульная сетка в веб. Пример вёрстки по семиколоночной сетке.
- Базовая сетка в веб дизайне. Выравниваем текст по сетке.
- Геометрия модульной сетки. Разница в понимании: дизайнер против кодера.
- Сетка. Немного истории и фоток из печатной типографики.
Удачных вам экспериментов с модульной сеткой и красивых макетов!
* * *
Сканер блогов:
Стоит ли публиковать свой лучший контент на сторонних ресурсах?
* * *
* * *
Понравилась статья?
Тогда помогите мне сделать её доступной для других, или будьте в курсе последних событий:
* * *
«Иначе высчитать реальную ширину блоков в браузерах будет очень трудно или вообще невозможно.»
Во всех браузерах ширина бордера и паддинга плюсуется к указанной ширине блока, только и всего.
Отступы можно также задавать в процентах, чтобы не морочить себе голову, а ширину бордера высчитывать с помощью элементарной пропорции, или подгонять уже потом, на готовом макете. Я вот примерно так и поступаю:-)
«Подумаешь, бином Ньютона!»©;-)
Гриды — это, конечно, хорошо, но каждый конкретный проект требует к себе определенного внимания и индивидуальности — иначе мы вернемся в 1998 год, когда все сайты были похожи один на другой
@sordes, обычно границы блоков на макетах рисуются дизайнерами в пикселях, поэтому получив фиксированные размеры границ и %-ые отступы, мы не сохраним исходные пропорции сетки.
@ioni, с возвратом в 1998 я не соглашусь. Если бы, был набор из трёх-четырёх размерностей, то возможно. Но при таком наличии (выборе) размеров и соотношений между блоками + различные фоновые решения для графики, и одинаковость проектам не грозит точно.
Посмотрите на реальные примеры с сайта 960.gs. Выглядят непохоже, но достаточно органично и привлекательно.
Если только, в будущем, дизайнеры не будут копировать модульную сетку друг друга ))
Что они скорее всего и будут делать. Это что-то вроде юкоза)) хыхы, когда все сайты вроде разные, а скукой веет...
Хотя, конечно, спорить не буду, довольно гармоничная верстка очень упрощает восприятие сайта и вообще гораздо эээ... гигиеничнее, чем куча рисунков.
Спасибо за статью, но что-то кодер, сидящий во мне пока очень слабоват... Не очень понимаю, то есть не понимаю каких-то нужных основ чтобы понять вот эти верха... Вот так вот.
Познавательно поел)
@Obfuscate, необязательно быть кодером, чтобы знать и применять в работе эти принципы.
Сетка нужна, иначе буйству фантазии некоторых нет предела.
Краще робити кожен проект по черзі і не залежно від іншого. Хоть це і займе більше ресурсів і часу. Але результат дасть про себе знати...
Оччень интересные примеры на 960. Есть только одно НО: все их образцы имеют с вертикальной сеткой мало общего — композиция «держится» НА ГОРИЗОНТАЛЯХ!!! :)))))))))))) Если кто кодер, и не в курсе — присмотритесь, основные блоки — горизонтальные :)
@tahaco: композиции, может, и держатся на горизонталях, но без вертикалей эти горизонтали — просто неорганизованные пятна. Посмотрите верстку любой газеты. Техническая основа — вертикали, они дают правильно выделиться главным горизонтальным блокам из хаоса.
@rotor: красивая идея, почти как золотое сечение для веба) -обязательно воспользуюсь.
Простите, первый ответ предназначался @nN :)
Жаль, что правильную сетку дизайнеры редко используют, в макетах шрифты с дробным кеглем и интерлиньяжем «auto», а расстояния между элементами тоже везде разное, и не привязано к какой-либо сетке (линейки расставляют для виду).
nN, если margin/padding-bottom у всех элементов сделать кратным интерлиньяжу текста, то будет и вертикаль.
Это всё потому, что не следуют стандартам минимальным и/или просто самоучки, которые неправильно понимают техническую документацию и прочие ценные бумаги...
Я полностью соглашусь с Алесей
На мой взгляд, резиновые модульные сетки — техническое излишество, т.к. модульные сетки: а) изначально имели фиксированные размеры в «твердой» типографии, б) теряют смысл при использовании нетянущихся изображений, т.к. меняются пропорции, что влечет за собой другие технические ухищрения (т.е. человеческий труд).
Гораздо эффективнее использовать фреймворк Blueprint (или аналоги, поддерживающие сборки с разными параметрами), собранный под разные размеры экрана + CSS3 media queries (для старых браузеров есть библиотека css3-mediaqueries.js). В этом случае просто имеем 2-3 набора базовых стилей, которые нам даже не нужно писать самостоятельно. При этом страница остается фиксированной по ширине — получается нечто вроде адаптивной разметки.
Вообще интересно было бы сравнить Blueprint и 960gs — мне кажется, первый выиграет по многим показателям.
[...] работе шаблоны модульной сетки от 960.gs. Этот фреймворк довольно распространен и, в последнее время, [...]
Спасибо автору за тему.
Я хоть понял в каком направлении нужно двигаться при создании дизайна сайта.