Однажды поздно ноябрьским вечером я пролетал над своим родным городом Тусон, штат Аризона. Меня поразила сетчатая планировка этого города. Тусон — один из городов, построенных путем планирования в Соединенных Штатах. Сверху все в этом городе. выглядит как сетка. Она была тщательно продумана дизайнером (рис. 1). Городская планировка Лондона (рис. 2) больше похожа на ту, что была раньше. вне природы.
Рисунок 1: Тусон, Аризона.
Рисунок 2: Лондон
Я давно обдумывал эту статью. Вид этих двух городов с высоты птичьего полета напоминает мне веб-дизайн. Сегодняшние технологии позволяют нам свободно реализовывать проекты на основе сетки или полностью выпрыгивать из сетки. Влияние на веб-дизайнеров Нет сомнений в том, что это толчок, но настоящая проблема заключается в том, как нам избавиться от этих ограниченных мыслей и мыслить за пределами сетки.
ощущение города
Если вы сравните городское планирование с веб-дизайном, сходство между ними будет интересным. Сеточные макеты отлично подходят для создания предсказуемых и простых в навигации веб-сайтов. Сетки отлично помогают дизайнерам планировать и облегчают доступ к ним пользователям (рис. 3).
Рисунок 3: Райан Брилл
С другой стороны, Тусон, безусловно, легкий для посещения город: достаточно немного ориентироваться или иметь карту улиц, жители дают другим указания, достаточно сказать: я нахожусь на юго-западном углу пересечения Кэмпбелл-авеню и Принс-Роуд Где угодно. Общественный транспорт ходит с юга на север или с востока на запад, поэтому определить дорогу очень легко.
С другой стороны, проектировщики Тусона изначально планировали ограниченное расширение, и проблемы возникли, когда город вышел за запланированные пределы. Ограниченность сетки Тусона препятствует появлению сообществ или кварталов различных стилей. Многие жители Тусона считают, что городу не хватает оживленного центра города или множества самобытных кварталов. В результате, даже если такие районы действительно появляются, они легко доступны. Не утруждаюсь искать его.
Лондон другой, это загадка. Я знаю, что сами лондонцы при передвижении полагаются на путеводителей по городу. Транспортная система города полна проблем, и водителям такси необходимо сдать специальные экзамены, прежде чем они смогут работать. Естественный рост города не делает его удобным местом для путешествий.
Тем не менее, Лондон полон интересных районов и уникальных кварталов, а также культурных центров и необычных кварталов. Хотя путешествовать и сложнее, из-за разнообразия вкусов люди охотнее оказываются среди них.
Эта метафора также подходит для тех веб-дизайнов, которые имеют тенденцию быть естественными. Как люди могут легко ориентироваться в этих извилистых переулках? С другой стороны, красивого дизайна можно добиться, выйдя за рамки тех рамок, в которых мы живем. На рисунке 4 вы можете увидеть, как нарушение правил проектирования сетки позволяет дизайну оставаться удобным для использования, но при этом выглядеть по-другому.
Рисунок 4: AIGA Лос-Анджелес
Миф о грид-коде
Как человек, который уделяет больше внимания коду, чем дизайну, я смущен тем, как наш дизайн связан с кодом. Я считаю, что именно долгосрочная компоновка таблиц заставляет нас строить прочную основу (рис. 5). новейший макет CSS, легко понять, почему.
Рисунок 5: к10к
Макеты таблиц хорошо сочетаются с сеткой. Код самой таблицы воспроизводит сетку. Мы просто заполняем ячейки картинками, текстом и элементами интерфейса, чтобы завершить наш дизайн (рис. 6). Если мы хотим реализовать сложный неструктурированный дизайн, нам необходимо использовать в документе большое количество изображений, что приводит к раздуванию всего документа.
Рисунок 6: Смещение веса
Табличная планировка имеет некоторые преимущества, но, как и в случае с городским планированием, эти преимущества иногда могут обернуться недостатками. Сетка на основе таблицы гарантирует, что все ячейки в ней будут одинаковыми. Хотите, чтобы все столбцы имели одинаковую ширину? Слишком просто, такова природа таблиц. Сохранять постоянные промежутки между ячейками? Это тоже пустяк. Однако что, если вам не нужна эта аккуратная структура? К сожалению, вы не можете.
CSS меняет все это, поэтому я думаю, что мы еще не научились проектировать для Интернета. Мы, особенно те, кто пришел в CSS из-за давнего опыта работы с табличными макетами, только начинаем понимать, насколько полезной может быть визуальная модель CSS для выхода из колеи дизайна сетки. Является ли макет CSS идеальным? Нет, помимо преимуществ, которые приносит CSS, мы также кое-что теряем. Расширение столбцов — большая проблема для CSS-дизайна, как и пробелы в ячейках.
CSS — это не что иное, как края и блоки, которые также встречаются в сетках. Однако существенное различие между ними заключается в том, что CSS позволяет нам отделять блок от окружающей среды и удалять его по своему усмотрению (рис. 7).
Рисунок 7
Мы можем использовать атрибуты позиции или плавающего типа для позиционирования, а также легкие изображения в качестве фона. Таким образом, при использовании Box мы можем более эффективно реализовать как сеточную, так и не сеточную компоновку. Вы можете увидеть это в книге Дэйва Ши «Кровь». См. этот пример. в Lust, одном из многих дизайнов, которые он использовал в своем CSS Zen Garden (рис. 8).
Рисунок 8. CSS Zen Garden: жажда крови
На рисунке 9 показан неструктурированный дизайн на основе BOX, используемый в Blood Lust, а также показано, как использовать CSS и BOX для реализации независимых неструктурированных сеток.
Рисунок 9
Как только мы поймем возможности BOX, мы сможем легко преодолеть ограничения сети. Крайне неструктурированный, даже свободный дизайн показан на рисунке 10.
Рисунок 10. Университет Кутцтауна: факультет коммуникационного дизайна.
Эти BOX позиционируются с помощью CSS:
Рисунок 11
Код не только чище, но и более интуитивно понятен и прост для дизайнеров, знакомых с макетом CSS. Дизайн также интуитивно понятен, прост в использовании и нетрадиционен.
Перспективы
Прелесть современных технологий верстки в том, что у нас есть больше возможностей для выбора. Используя CSS, мы можем создавать управляемые, легкие, визуально богатые проекты, которые, если захотим, могут быть основаны на сетке, и мы можем легко сломать или сломать сетку.
Это открывает больше возможностей для современного веб-дизайна, и нам не следует совершать тех же ошибок только потому, что мы лучше знакомы с сеточным дизайном.
Для тех из нас, кто уже давно одержим версткой таблиц, трудности особенно велики. Для тех, кто работал веб-дизайнером в течение многих лет, это означает отказ от того, чем они всегда пользовались. Некоторым это может не показаться трудным, но большинство людей сочтут это пугающим. Нам нужно узнать, как работают модели CSS, и иметь смелость попрощаться со старыми правилами.
Именно от этих новичков мы надеемся увидеть новые прорывы в стереотипах дизайна, для которых наши прошлые методы кажутся странными и жесткими.
Сеть взрослеет, способы проектирования меняются, и нас ждет еще больше инноваций и творчества. Мы не будем придерживаться запланированных городов, мы можем создавать уникальные проекты. Мы, старые дизайнеры, в сочетании с сегодняшними новичками, будем заставлять Интернет меняться с каждым днем.
Автор этой статьи:
Молли Э. Хольцшлаг — известная сторонница и евангелист веб-стандартов. Самая продаваемая из ее более чем 30 книг — «Дзен CSS-дизайна» (Zen Web Design), которую она написала в соавторстве с Дэйвом Ши. Молли — приглашенный эксперт рабочих групп W3C и бывший директор группы проектов веб-стандартов (WaSP). Молли работает с дизайнерами, разработчиками, практиками и лицами, принимающими решения, чтобы сделать Интернет полезным, красивым и значимым.
Постскриптум
Эта статья опубликована в журнале A LIST APART в 2005 году. В 2005 году верстка CSS не была так распространена, как сейчас, и верстка таблиц ошеломила многих людей. Как старший эксперт в области Интернета, автор Молли Э. Хольцшлаг Она. Кроме того, она уже давно пользуется табличной разметкой. Когда CSS приближается к зрелости и макеты на основе CSS обновляются, у нее возникают смешанные чувства по поводу табличного дизайна сетки, как видно из статьи.
Однако в 2009 году, когда CSS получил широкое распространение и макетирование CSS стало привычным, нам необходимо снова задуматься о дизайне сеток. Сетка мертва или таблицы — это зло? Ответ не так прост: как бы он ни менялся, сегодняшняя Сеть имеет вечную цель. Помимо веб-приложений, ее постоянно меняющаяся миссия — выражать и передавать информацию. Если вы грамотный человек, вы влюбитесь. с Лондоном Однако, если бы вы были почтальоном, вы бы выбрали Тусон. Поэтому, будь то сетчатый или естественный дизайн, нет абсолютного преимущества или недостатка. Сетчатый дизайн более четкий и аккуратный, а естественный дизайн более элегантный и изысканный.
И таблицы не так уж и злы, как многие говорят. Следует отметить, что сегодняшние таблицы уже не являются таблицами прошлого. BOX можно комбинировать с CSS, и таблицы, полностью модифицированные с помощью CSS, подобны таблицам. набор органических комбинаций и взаимодействий. BOX, когда вам не нужно точное расположение ячеек в нем, таблица является более совершенным контейнером, чем BOX, поскольку она лучше всего совместима со всеми браузерами, не сворачивается и не сворачивается. он не будет отличаться по длине, его поведение легче соответствует ожиданиям, и, что наиболее важно, это самый прямой способ организации вещей для людей.
Оригинальный автор Молли Э. Хольцшлаг
Источник китайского перевода: официальный сайт COMSHARP CMS, переводчик 35 километров.