Сегодня «фреймворк» одно из популярнейших слов в веб-программировании. Для JavaScript разработаны фреймворки Yahoo User Interface library, jQuery и Prototype, для веб приложений Rails и Django и еще множество других. Так что же такое фреймворк, и можно ли использовать эту концепцию в веб-дизайне?
Давайте определим фреймворк как набор инструментов, библиотек и соглашений предназначенный для вынесения рутинных задач в отдельные модули, которые можно использовать многократно. Главная цель фреймворка, позволить дизайнеру или программисту сфокусироваться на задачах уникальных для каждого проекта, вместо неоднократного изобретения колеса.
Речь идет не обязательно о чем-то широкодоступном и известном, напротив фреймворк может использоваться только вами или вашей командой.
Очевидно, что дизайнеры тоже могут воспользоваться концепцией фреймворка, особенно серьезные преимущества получат те, кто работает над несколькими похожими сайтами и дизайнеры, работающие в команде. К примеру, я работаю в газете, и более 20 наших сайтов имеют очень сходную структуру, надо сказать, что все новостные сайты очень похожи, но даже дизайнер, работающий в одиночку над совершенно разными проектами, может выделить в них похожие части, которые стоит объединить в CSS фреймворк.
В Lawrence Journal-World где я работаю мы недавно разработали CSS фреймворк, который значительно повысил эффективность работы дизайнеров. Конечно, на разработку самого фреймворка ушло несколько дней, но благодаря этому теперь можно создавать качественные страницы с потрясающей скоростью, более того теперь все дизайнеры используют один и тот же фреймворк, и если нужно редактировать работу начатую кем-то другим, не приходится тратить 20 минут, чтобы разобраться что к чему в его коде.
Проанализируйте свою работу, наверняка есть вещи, которые приходится делать в каждом проекте заново. Наша цель в объединении этих действий в отдельный модуль, следуя методике «не повторяй себя». Это упростит поддержку и снизит конечную цену продуктов.
Вот несколько действий, которые приходится делать в каждом проекте:
Конечно возможностей на самом деле больше, например многие дизайнеры часто используют одну и ту же сетку, почему бы не включить ее в свой фреймворк, 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 на несколько файлов, каждый из которых, включал бы стили со сходным предназначением, например один из файлов был бы предназначен для настройки типографики, а другой для сброса стилей по умолчанию. Одно из преимуществ этой техники в возможности использования только необходимых в конкретном проекте частей фреймворка. Наш фреймворк включает пять файлов:
Мы разместили фреймворк на одном из серверов, чтобы все сайты могли его использовать. Конечно, каждый сайт использует и свои таблицы стилей, дополняя или заменяя стили, описанные в фреймворке.
Этот метод работает очень хорошо, но рост количества HTTP запросов вызывает вполне оправданное беспокойство, на крупных сайтах с большим трафиком, пять лишних запросов на каждую страницу могут обернуться адом для системных администраторов. Я вижу два возможных решения этой проблемы:
Хочу напомнить, что цель не в том, чтобы сделать фреймворк настолько абстрактным насколько это возможно и удивить ваших друзей и коллег, напротив, цель в том, чтобы увеличить скорость и эффективность разработки. Если уровень абстракции будет слишком высоким, фреймворк может стать запутанным и перегружать сайт слишком большим количеством HTTP запросов.
Запомните: хороший фреймворк не должен усложнять работу дизайнера.
Веб дизайнеры, как и программисты, имеют склонность снова и снова повторять себя, сбрасывая стили по умолчанию, настраивая базовую сетку, создавая табы снова и снова в каждом проекте. Потратив немного времени на создание фреймворка включающего в себя эти идиомы, можно значительно увеличить скорость разработки и упростить поддержку. Если немного подумать, то можно реализовать эти возможности без ущерба для производительности сайта.