Home > css, верстка, интернет, перевод > Фреймворк для дизайнеров [слишком вольный перевод]

Фреймворк для дизайнеров [слишком вольный перевод]

A List Apart LogoДавайте, меня линчуем и повесим на самом высоком суку! Я решил (в основном, для набора практики) перевести статью c “A List Apart”. Перевод будет точно корявым и плохим, так как я знаю английский точно на 2 по 12-и бальной системе. Кому не нравится – камменты, а я буду переводить для себя и для своей девушки. Всё. Начну.

Фреймворк для дизайнеров

В эти дни, “фреймворк” весьма нашумевшее в web-разработке. К Javascript фреймворкам, таких как Yahoo User Interface library, jQuery, и Prototype, приделяется много времени,а к фреймворкам разработки интернет-приложений, таких как Rails and Django, ещё больше, и означает, что каждый использует какой-то фреймворк для разработки своих сайтов. Но что же именно такое фреймворк? И они используются только програмистами, или можем мы, веб-дизайнеры, получить пользу от этой идеи?

Что такое фреймворк?

Раз мы все на одной странице, давайте договоримся – по крайней мере на время прочтениия этой статьи – о таком определении “фреймворк”: набор инструментов, библиотек, договорённостей и лучших примеров, которые пытаются австрагировать рутинные задания в основные модули, которые могут повторно использоваться. Цель всего этого дать возможность дезайнеру или разработчику сфокусироваться на заданиях уникальных для этого проекта, вернее, каждый раз не изобретать колесо. Вообще говоря, это подход, взятый вышесказаными Javascript и Web Aplication фрейворками.

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

Фреймворк для дизайнеров

Есть шанс, что вы сможете получить выгоду с одинаковых абстракций CSS- кода в процессе web-дизайна. Те дезайнеры, которые работают над несколькими сайтами одинакового рода, будут в более выгодном положении от этого.

Дополнительно, дезайнеры, работающие в комманде с другими дизайнерами, имеют большую выгоду от подхода к фреймворку. Например, я работаю в печатном СМИ, и все 20+ сайтов из нашей конюшни имеют много общего. Просто в силу того, что новосные сайты больше заботятся о своей схожести, чем отличии. Но, даже один web-дезайнер, работающий над проектами, которые все совершенно разные в общем, может найти куски, которые пригодны для австракции в общий CSS-фреймворк.

В Lawrence Journal-World, где я работаю, мы недавно сделали CSS-фреймворк и определили,  что он является большим и эфективным помощником. Конечно, нам понадобилось несколько дней, чтобы создать его, но когда это было сделано, скорость, при которой мы можем собрать “в кучу” качественных страниц дизайна, огромен. Более того, поскольку каждый разработчик в команде в настоящее время оспользует один и тот же фреймворк, когда один хочет сделать изменения над роботой другого члена комманды, не приходится тратить 20 минут, пытаясь понять, почему вещи выглядят так как есть. Они могут просто нырнуть с головой.

Что можно австрагировать?

Когда вы переходите в формировании CSS-фреймворка, Вы захотите взглянуть на вещи, которые вы делаете снова и снова по каждому проекту. Цель состоит в том, чтобы объединить эти вещи в одном месте, как бы методология кодирования “Не повторяй себя” (DRY). Это делает обслуживание гораздо проще и может также сберечь бюджет.

Некоторые вещи, которые я использую с CSS почти в каждом проекте:

  • “Массовый сброс” стилей по-умолчанию браузера. Например, установка “margin” и “padding” в 0 для всех элементов, выключение границ фреймов и рисунков и т.д.
  • Выравнивание типов к согласованому базису. Это включает в себя такие вещи, как установка margin в блоковых элементах, таких как параграфы, заголовки и списки к тому же значению (или кратному) как и базовое значение line-height.
  • Создание основных стилей для форм.
  • Создание нескольких CSS классов, которые всегда использую, таких как .hide (где я устанавливаю display в none) и .mute (где устанавливаю меньше размер шрифта и иногда светлее цвет).

Так же там есть более интересные возможности. Многие веб-дизайнеры нашли себя, используя те же основные структурные сетки снова и снова. Почему бы не перенести это в свою собственную таблицу стилей и структуру таким образом, чтобы является достаточно гибким для использывания  на многих сайтах? Yahoo сделала это с их YUI grids component. Когда мы построили CSS-фреймворк  Journal-World , мы сначала смотрели на реализацию Yahoo. Мы решили что это не совсем то, что мы хотели, но это послужило прекрасным функциональным примером и натолкнуло на  множество идей, каким образом построить наши собственные правила. Мы остановились  на 16-unit  сетке, которая является достаточно гибкой, чтобы мы смогли использовать её на любой из наших сайтов, хотя каждый сайт выглядит стильно и чуть отличаться от следующего.

Кроме того, большинство сайтов имеют общие виджеты, таких как выпадающие меню, вкладки навигации, кнопки и т.д. Они вполне являются главными претендентами на абстракции. Кроме того, у вас может быть общий набор отображаемых идиом, такие как список фотографий, которые имеют эскизы. Вы можете стандартизировать это в css-классе, например как “thumbnail-list”, и всё вам следует сделать, так это добавить его, чтобы вашы эскизы начали работать.

Другая возможность – это использование хаков и обходных путей (таких как приспосабливание к старым браузерам) в своих внешних стилях. Я пробовал это сам , но обнаружил, что конечные хаки склонны быть  слишком сайтосависимые, чтобы вставлять в общий фреймворк. Но Ваш опыт может отличаться.

Какова реальная польза миру?

Реальная прелесть в фреймворке, как это начало с быстрого старта. Вы можете создать новый  (X)HMTL документ, включить Ваш фреймворк, и начать с сброшеными padding и margin, хорошей типографией, чистыми формами, слоями, работающими виджетами и многим другим.

Очевидно, Вы хотите настраивать внешний вид для каждого сайта. Чтобы это сделать, вам нужно переписать(переопределить) и добавить к стандартным стилям всё необходимое. Например,  если в вашем фреймворке есть набор верхних горизонтальныйх навигационных вкладок (табов) для всех ul с классом ‘tabs’, и они серые с чёрной границей, Вы можете легко настроить их в соответствии с внешним видом Вашего сайта с помощью всего лишь нескольких строк:

ul.tabs li {
  border: none;
  background-image: url('/images/tabs/site-specific-tab-look.jpg');
}  

!!!! Все работы по левому floating (как перевести? прим. моё.) елементов списка и созданию ссылок, выводимых как блоки (так же “плывут” влево ) и текст,отцентрированый посередине – до тошноты – уже сделано за вас фреймворком. Вам остаётся  сосредоточиться на том, что уникальное и интересное о конкретном сайте, над которым вы работаете, а не переписывать те же CSS, которые Вы писали уже млн. раз.

Как следует построить CSS-фреймворк ?

Есть  несколько возможных путей, по которым можно пойти, строя фреймворк, но  наиболее распространенным и, по-видимому, наиболее полезным является абстрагирование вашего всеобщего css  в индивидуальные стили, которые описывают особенные части одного целого. Например, можно создать таблицу стилей, которая описывает типографию и другая выступает переключателем “массового сброса”. Прелесть такого подхода  является возможность выборочно включать те стили, которые Вам нужно. Вы можете иметь шесть или семь разных таблиц стилей в вашем фреймворке, но если в конкретном проекте не требуется один или два с них, они не должны быть включены. Фреймворк мы создали в нашем офисе с пятью стилями:

  • reset.css — делает массовый ресет.
  • type.css — включает типографию.
  • grid.css — включает компоновку сетки.
  • widgets.css — включает виджеты, такие как табы, выпадающие меню и кнопка “Подробнее”.
  • base.css — включает все другие стили, так что нам надо только вызвать base.css с нашего (X)HTML документа, чтобы использовать весь фреймворк.

Мы тогда храним фреймворк в одном месте и каждый сайт вытягивает его оттуда. И, конечно, имеются также спецефические стили для каждого сайта, которые переопределяют и добавляют   необходимые стили фреймворка.

Предостережение

Этот метод работает достаточно хорошо, но есть одно “но”: он добавляет ряд HTTP соединений необходимые для показа каждой страницы. На больших, сайтов с большим трафиком, добавление пяти или больше HTTP-соединений на каждую страницу, может разгневить системных администраторов. Есть 2 варианта решения даной проблемы:

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

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

Помните: хорошый фреймворк не должет делать вещи сложнее или смешанимы чем простой старт с нуля.

В заключение

Суть в том, что мы веб-дизайнеры, так же как и наши друзья с мира программирования, как правило, часто повторяемся. Мы оказываемся перед сбросом установок браузера по-умолчанию, созданием базовой сетки и написания CSS для навигационных табов снова и снова почти в каждом проекте. Потратив немного времени на абстракцию некоторых с этих идиом в фреймворк, который вы можете использовать в каждом создаваемом сайте, даст возможность быстро стартовать, создавать простой в  обслуживании проект, и помочь другим дизайнерам с вашей команды понимать созданое решение. С некоторыми заботами, но эти преимущества могут быть реализованы без добавлением лишних “наворотов” или ущерба для производительности сайта.

Оригинал:A List Apart: Articles: Frameworks for Designers

  1. usus
    June 13th, 2007 at 16:51 | #1

    увидев, мельком, в 3 абзаце слово “лутших”, обрадовался за переводчика – он хорошо, видимо, учился в школе.. правило “жи, ши – пишем И” – выучил назубок!
    респект!

  2. June 13th, 2007 at 17:32 | #2

    спс. хоть без тупого флема. Растёшь.

  3. June 13th, 2007 at 18:11 | #3

    После перевода стоит 1 раз прочитать свой текст. Потому как ты теряешься в длинных предложениях и много где идет не согласование имен )

  4. June 14th, 2007 at 13:59 | #4

    После перевода стоит 1 раз прочитать свой текст.
    Прочитал. УЖАС!!! ;) И перед постингом тоже прочитал парочку раз. В некоторых местах (как ты сказал теряешься в длинных предложениях ) ещё хуже. Перевод первый (и надеюсь не последний ), буду стараццо.

    зы. Спсб за заныривание ;)

  5. usus
    June 14th, 2007 at 17:35 | #5

    Перевод первый (и надеемся последний )..
    usus :-р

  6. June 15th, 2007 at 09:50 | #6

    есть намного лутший перевод уже )

    http://www.habrahabr.ru/blog/webdev/17177.html

    usus не дождёшся. я буду всех ещё мучать долго )

  1. No trackbacks yet.