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

Сегодня «фреймворк» одно из популярнейших слов в веб-программировании. Для JavaScript разработаны фреймворки Yahoo User Interface library, jQuery и Prototype, для веб приложений Rails и Django и еще множество других. Так что же такое фреймворк, и можно ли использовать эту концепцию в веб-дизайне?

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

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

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

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

Очевидно, что дизайнеры тоже могут воспользоваться концепцией фреймворка, особенно серьезные преимущества получат те, кто работает над несколькими похожими сайтами и дизайнеры, работающие в команде. К примеру, я работаю в газете, и более 20 наших сайтов имеют очень сходную структуру, надо сказать, что все новостные сайты очень похожи, но даже дизайнер, работающий в одиночку над совершенно разными проектами, может выделить в них похожие части, которые стоит объединить в CSS фреймворк.

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

Что можно включить в фреймворк?

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

Вот несколько действий, которые приходится делать в каждом проекте:

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

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

На большинстве сайтов используются выпадающие меню, табы, кнопки и другие элементы которые легко унифицировать. Кроме того, есть распространенные способы отображения контента, например эскизы (thumbnails) для фотографий, которые можно стандартизировать и в дальнейшем будет достаточно добавить класс thumbnail-list, чтобы страница с эскизами работала.

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

Каковы реальные преимущества?

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

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

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

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

Как должен быть устроен CSS фреймворк?

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

• reset.css — сброс стилей по умолчанию.
• type.css — настройка типографики.
• grid.css — настройка разметки.
• widgets.css — виджеты, такие как табы, выпадающие меню и кнопки.
• base.css — подключает все остальные файлы, поэтому в html файле достаточно указать base.css, чтобы использовать все возможности фреймворка.

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

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

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

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

Хочу напомнить, что цель не в том, чтобы сделать фреймворк настолько абстрактным насколько это возможно и удивить ваших друзей и коллег, напротив, цель в том, чтобы увеличить скорость и эффективность разработки. Если уровень абстракции будет слишком высоким, фреймворк может стать запутанным и перегружать сайт слишком большим количеством HTTP запросов.

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

Заключение

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

Translated with the permission of A List Apart Magazine³ and the author[s].

Автор: http://designformasters.info/