Для создания собственных тем или темизации уже существующих шаблонов существует масса инструментов, помогающих веб-дизайнеру в реальном времени работать с HTML и CSS кодом, тестировать производительность http-запросов, и самое главное – в сжатые сроки внедрять дизайнерские решения в свои веб-проекты.

Разработка любой темы начинается с создания прототипа будущего веб-сайта. Для Drupal 7 в первую очередь, сюда входит главная страница, страница с одним или двумя сайдбарами, страница с обратной связью (форма с полями), страница поиска с выдачей результатов, страницы HTTP ошибок - 403 и 404, страница таксономии для тегов и страница «сайт на обслуживании», графические элементы и favicon.ico.

Построение сетки

Сетка нужна для того, чтобы позиционировать элементы веб-сайта.  Существует множество онлайн-инструментов для построения сеток. Однако большинство веб-дизайнеров CMS Drupal используют 960 grid system (http://960.gs/), 1140 grid system (http://cssgrid.net/), а также популярный инструмент - 35 колоночный CSS фреймворк  The square grid (http://thesquaregrid.com/).

Работа со шрифтами

Множество тем (AdaptiveTheme, Tundra) для CMS Drupal 7 уже имеют встроенную поддержку внешних шрифтов. Однако, чтобы оценить как будет выглядеть тот или иной шрифт на сайте, можно использовать специальные сервисы. Хорошим инструментом считается приложение Typetester (http://www.typetester.org/). С помощью него можно в онлайн-режиме сравнивать шрифты между собой. Кроме того, можно изменять размеры, отступы, цвет текста, фона, выравнивание.

Цветовая гамма

Хорошим инструментом для подбора цветовой гаммы сайта является приложение Kuler от Adobe (https://kuler.adobe.com/). Помимо "стандартной" возможности подбора цвета, на сайте хранится огромное количество цветовых библиотек, что очень удобно, если основного цвета нет и нам в работе необходимо несколько гармонирующих цветов.

Спрайты

Использование CSS-спрайтов на сайте позволяет повысить производительность и грамотно организовать элементы интерфейса сайта. Скорость увеличивается за счет использования одного большого изображения, разделенного на множество мелких графических элементов сайта, например иконок или кнопок. Для подготовки таких файлов существует сервисы позволяющие автоматизировать процесс создания CSS спрайтов. Одним из них является CSS Sprite Generator (http://spritegen.website-performance.org/). А для того, чтобы генерировать CSS-код из изображений поможет сервис Spritecow (http://www.spritecow.com/).

Анализ, тестирование и отладка кода темы Drupal

Однако самым важным приложением, который необходим для любого начинающего или опытного веб-дизайнера,  является Firebug (https://getfirebug.com/). Он представляет собой расширение для браузера Mozilla Firefox, которое является консолью, отладчиком, и DOM-инспектором JavaScript, DHTML, CSS, XMLHttpRequest.

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

FireBug позволяет одновременно и редактировать CSS, XHTML, и даже JavaScript. Это ускоряет процесс исправления ошибок на сайте.

Еще одна важная опция FireBug – это вкладка Net (Сеть). Если ваша страница загружается слишком медленно, просто откройте вкладку Net и посмотрите какие элементы загружаются помимо самой страницы (скрипты, изображения, css-код). Здесь можно увидеть размер каждого элемента и как долго он загружается по времени, а также общее количество обращений к вашему сайту.

Валидация

После того, как тема готова и опубликована, важно проверять весь код на валидность. Валидность – это соответствие кода определенным нормам. Занимается данными вопросами Консорциум Всемирной паутины (World Wide Web Consortium, W3C). Он и разрабатывает все стандарты HTML.

Официальный сайт http://validator.w3.org/ предлагает разработчикам веб-сайтов проверять код на наличие ошибок. Можно осуществлять проверку как по URL-адресу, так и загружать готовые файлы через специальную форму. После проверки валидатор указывает количество ошибок и возможное решение данных проблем.

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