УрокКак должна выглядеть тема для сайта на Друпале

С годами работы с шаблонами сайтов был выработан список, по которому темизаторы и дизайнеры должны сдавать свою работу. Именно так, на наш взгляд, должна выглядеть приличная тема для Drupal:

• Фавиконка.
• Прорисованный / свёрстанный трекер.
• Прорисовывать страницу регионов для блоков.
• Сделанные страницы с 403 и 404 ошибкой (page--403.tpl.php, page--404.tpl.php).
• Страница сайта, когда он находится в режиме разработки (maintenance--page.tpl.php).
• Дизайн должен быть продуман таким образом, что если в блоке или в ноде заголовок оказался слишком длинным, то он не должен некрасиво съезжать.
• Должны различаться по внешнему виду заголовки (h1, h2, h3, h4, h5, h6)
• Ссылка должна быть отрисована как минимум в 3х состояниях: normal, hover, active. Сюда можно добавить и visited, но это уже не обязательно.
• Обязательно должны быть прорисованы и свёрстаны таблицы с заголовками (как минимум рамки или чередующийся фон для tr.even, tr.odd).
• Отступы между параграфами и заголовками.
• Прорисовать и сверстать списковые элементы (маркеры) ul li.
• Пункты меню так же должны иметь как минимум 3 состояния - обычное, выбранное и наведённое, хотя выбранное и наведённое могут совпадать визуально (не желательно).
• Не забыть продумать такой вариант, когда пунктов меню очень много. Сделать так, чтобы вёрстка из-за этого не поехала.
• Для текста на сайте должено быть использовано не более двух шрифтов (а лучше вообще один), страница не должна “плясать” от разнообразия шрифтов.
• Дизайн должен приходить в растре, PSD или EPS, PDF, но дизайн отрисованный в векторе Corel, Illustrator, inkScape (cdr, il, SVG), пожалуй, намного удобнее.
• Кнопки должны быть сделаны в едином стиле и прижаты к одинаковой стороне, если того не требует дизайнерский замысел.
• Элементы форм на сайте тоже должны идти в едином стиле (input, textarea, select, submit и т.п.).
• На макете должны быть прорисованы все состояния элементов и форм. То есть если нарисован, например, опрос, то на макете должен быть нарисован блок до голосования и после него.
• Учитывать SEO при вёрстке сайта. Как минимум соблюдать:
  • h1 Должен встречаться только 1 раз на каждой странице сайта, и в него должен идти заголовок страницы.
  • Заголовки нод в анонсах должны быть заключены в h2.
  • Заголовка блоков в h3.
  • На таблицах верстают пидорасы. Мужыки верстают на div’ах.
  • Из неосновного ещё можно почитать тут.
  • У изображений должен присутствовать аттрибут alt.
  • У ссылок должен присутствовать аттрибут title.
• Не используйте устаревшие тэги.
• Вместо <br> пишите <br/> (У нас всё-таки XHTML).
• Всегда пишите единицы измерения в css и html (100px, 13pt, 2em, 30%).
• Кодировка страниц должна быть UTF-8 (без BOM).
• Не забывать делать акцент на разницу между неопубликованными материалами и комментариями от опубликованных.
• Неплохо было бы выделить материал, который закреплён вверху списка (sticky).
• Комментарии должны содержать как минимум автора комментария, содержимое, ссылки на действия (удалить, редактировать, ответить) и ссылку на комментарий (обычно такого вида: #1).
• Шаблон не должен содержать в себе никакой информации, за исключением (возможно) информации о разработчиках.
• Всё, что можно вынести в настройки темы - выносите. Позвольте пользователю самому выбрать понравившийся вариант.
• Не стоит забывать о стандартах кодирования.
• Если стандартный шаблон не был изменён, то не надо его добавлять в тему. Т.е. если вы ничего не меняли, например, в шаблоне html.tpl.php, то в теме его не должно быть.
• Тема не должна убирать стандартные стили ядра. Она должна перекрывать их.
• Если нет необходимости добавлять свои регионы - пользуйтесь стандартными, а не перекрывайте их идентичными с другими названиями.
• В теме должен быть файл стилей для версии для печати print.css.
• Должна быть проверена корректная поддержка модуля overlay (Drupal 7 и выше).
• Хорошим тоном считается прописывание в теме первичного и вторичного меню автоматически. Т.е. не через блоки, а прямым выводом меню в шаблоне.
• Так как многие сайты используют редакторы текста, то проверить ввод комментариев хотя бы с модулями bueditor и ckeditor.
• Убрать подсказки форматирования и выбор формата воода хотя бы для анонимов. Может, кому-то и нравится, но выглядит не очень симпатично. Но проверить, что у редакторов/администраторов есть возможность переключаться между форматами ввода.
• Вообще, конечно, хорошо бы все размеры сделать в относительных величинах (em, %).
• После завершения вёрстки не поленитесь посмотреть сайт хотя бы в IE7+, Opera, Chrome, Safari, FF.
• После завершения вёрстки проверьте её на валидность.
• Создать страницу для проверки типографики, например, как тут. Однако приведённый пример не является полным, поэтому лучше сделайте свой.

Над списком работали: Андрей Подлубный, Андрей Постников и, естественно, ваш покорный слуга.

Ещё по теме - Димка Варвашеня давно уже писал про типичные ошибки дизайнеров при создании макета.

Кстати, в недрах Могилёва родился ещё один многообещающий бложек про Друпал. Посмотрим, что из этого вырастет.