Часть вторая. Алгоритм построения модульной сетки. Оптика и геометрия. Продолжение — 2

cherenkevich — 18.02.2010

1. 38 попугаев (Введение)
2. Алгоритм построения модульной сетки. Оптика и геометрия
   1. Алгоритм
      
   2. Микромодуль и оптические компенсации
      
   3. Особенности работы с модульной сеткой при разработке «резиновых» сайтов
      
3. PaperGrid — сетка на бумаге
4. BrowserGrid — сетка в Фотошопе
5. GridBuilder — сетка-камертон в браузере
6. Верстка по сетке: проблемы и решения
7. Список использованной литературы

Особенности работы с модульной сеткой при разработке резиновых сайтов

Модульные сетки как инструмент появились в полиграфии задолго до появления веба. Ни один из тех, на кого сейчас принято ссылаться в разговоре о сетках — Чихольд, Херлберт, Мюллер-Блокман и т. д. — и подумать не могли о резиновых сетках. Поэтому эту часть публикации я могу назвать как основанную на собственных рассуждениях.

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

Средники: тянуть или не тянуть

Что делать с просветами между колонок? У меня на этот счет есть два варианта развития событий (ksoftware  не согласился ни с одним из моих вариантов и предложил радикальный третий).

Первая модель поведения средников в резиновых сайтах — тянуться так же, как тянуться и сами колонки. Все-таки сетка нам и нужна была для того, чтобы придерживаться соразмерности и пропорциональности всех элементов страницы.
Вторая модель поведения — оставить средники фиксированными, чтобы они не растягивались до неприлично больших размеров и не «разрывали» композицию. К тому же фиксированный средник между колонками всегда будет равен микромодулю и среднику между горизонтальных поясов.

Я придерживаюсь второго варианта. Именно его я рассмотрю в шестой части про верстку.

Предлагаю обсудить этот вопрос, так как на данный момент он представляет собой лишь мое субъективное мнение и нигде не подымался в обсуждениях. Автор встречал лишь однажды упоминание этой проблемы — в публикации Кайлы Найт, но решения этот вопрос в публикации Кайлы не получил.

Графический контент

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

Итак, на сегодняшний день гипертекст не позволяет в лоб решать вопросы с растягиванием картинок. Единственное, что сразу приходит на ум — процентное значение размеров картинок. Но это не панацея. Это как кактус из известного баяна: будем плакать и колоться. Хотя бы потому, что если gif-изображения начать уменьшать, они «бьются» и «крошатся».

Следующее, что мы можем попробовать сделать с картинками — обернуть в <div>с CSS-свойством overflow: hidden. Тем самым мы будем кадрировать картинку под нужный размер, показывая ее часть. Но этот прием может сыграть с нами плохую шутку. Но есть вероятность того, что мы нечаянно можем скрыть нужную информацию от пользователя. Этого делать никак нельзя. Попробуйте кадрировать схему метро. Какой после этого от нее смысл?

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

Флеш

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

В заключение

• Сетка не спасает, если дизайн УГ


• И обратное: если ваш дизайн крут, а кто-то говорит, что он «не по сетке» — забейте.

PS. Продолжение будет в понедельник. В планах еще четыре части.

Будет здорово, если вы поддержите меня на Хабре, а то топики-ссылки на  статьи даже в захабренные с трудом попадают.

Спасибо!!

Оставить комментарий

Популярные посты:

• Архив