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

С годами работы с шаблонами сайтов был выработан список, по которому темизаторы и дизайнеры должны сдавать свою работу. Именно так, на наш взгляд, должна выглядеть приличная тема для 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.
  • После завершения вёрстки проверьте её на валидность.
  • Создать страницу для проверки типографики, например, как тут. Однако приведённый пример не является полным, поэтому лучше сделайте свой.

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

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

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

Комментарии

Аватар пользователя Андрей Всех мудрей
Андрей Всех мудрей написал:

Груз сплеч спал? ;)

11.02.2012 02:37
Аватар пользователя Spleshka
Spleshka написал:

Конечно, такой контент лежал вне индеса =)

11.02.2012 03:03
Аватар пользователя impol.ya
impol.ya написал:

Все в кашу, большая половина про тему, меньшая половина про макет)

11.02.2012 02:55
Аватар пользователя Гость
Гость написал:

И что?

11.02.2012 04:02
Аватар пользователя Гость
Гость написал:

> Вместо пишите (У нас всё-таки XHTML).

у "нас" это у кого?

11.02.2012 12:47
Аватар пользователя Андрей Всех мудрей
Андрей Всех мудрей написал:

У всего мира, чо

11.02.2012 14:20
Аватар пользователя Spleshka
Spleshka написал:

Это у адекватных Друпалеров. Ибо по умолчанию шаблоны Друпала используют XHTML.

11.02.2012 14:44
Аватар пользователя Гость
Гость написал:

по умолчанию шаблоны друпала используют html5

11.02.2012 15:25
Аватар пользователя Spleshka
Spleshka написал:

Серьёзно?

Drupal 6:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Drupal 7:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN"
  "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">

Вот так должно выглядеть для (X)HTML5:

<!DOCTYPE html>
11.02.2012 16:23
Аватар пользователя Demetr
Demetr написал:

На таблицах верстают пидорасы. Мужыки верстают на div’ах - все верно :)

11.02.2012 14:01
Аватар пользователя WebWin
WebWin написал:

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

11.02.2012 14:36
Аватар пользователя Андрей Всех мудрей
Андрей Всех мудрей написал:

Я бы пронумировал все пункты и добавлял следующие. И назвал бы тогда статью "50 факторов, которые делают шаблон кошерным"
Цифра в названии очень важна. Особенно для касты программистов. Они лучше усваивают тогда.
Например. "49 заповедей друпал версталы". Или 38 шагов до вершина блаженства. Или 67 преград дьявола.

11.02.2012 21:57
Аватар пользователя pantey
pantey написал:

xhtml-вымер, и его разработку давно свернули, а всех разработчиков кинули на html 5... Смысл поддерживать drupal -xhtml, не особо понятен...Хотя наверно разработчикам Drupal виднее...

13.02.2012 13:39
Аватар пользователя Вася Пупкин
Вася Пупкин написал:

HTML5 будет актуален, когда последний юзер с ie8 перейдет на более адекватный браузер. Так что рано еще, рано.

15.02.2012 12:51
Аватар пользователя Faraday
Faraday написал:

"Убрать подсказки форматирования и выбор формата воода хотя бы для анонимов. Может, кому-то и нравится, но выглядит не очень симпатично. Но проверить, что у редакторов/администраторов есть возможность переключаться между форматами ввода."

А как это делается вообще?, весь друпал.ру обыскал, какие-то хаки только и всё...

14.02.2012 15:00
Аватар пользователя Spleshka
Spleshka написал:

Можно например так. Или использовать модуль Better formats.

14.02.2012 22:07
Аватар пользователя Шут
Шут написал:

а предпочтение макета в векторном формате - это личные хотелки, или таки есть не предвзятые аргументы в пользу таковых?

20.02.2012 03:49
Аватар пользователя Spleshka
Spleshka написал:

Это подсказывает опыт работы с макетами в растре и векторе. Бывает надо изменить ширину или высоту какого-то элемента, а он уже теряет свои очертания и становится более размытым, например. Просто работа в векторе гарантирует дизайнеру, что его будут меньше дёргать :) И верстальщик может сократить время своей работы, т.к. не придётся дёргать дизайнера :)

20.02.2012 21:20
Аватар пользователя Dmitrii Varvashenia
Dmitrii Varvashenia написал:

Моя основная претензия к вектору в psd - это его лохматость - дизайнер тягает абы как и на выходе получаются линии/фоны +/- пару пикселей с прозрачностью. И ты сидишь и чешешь репу - это задумка дизайнера или он просто мудак и верстальщику нужно фактически садиться и перерисовывать из дизайнерского вектора.

16.04.2012 17:50
Аватар пользователя Александр
Александр написал:

Если дизайнер кривой или слепой, то тогда простительно в ином случае это ошибка. У нас в компании за это отчитывает верстальщик дизайнера:)))

26.04.2012 09:17
Аватар пользователя kalabro
kalabro написала:

«Сделанные страницы с 403 и 404 ошибкой (page--403.tpl.php, page--404.tpl.php).»

Оказывается, таких саджесшенов по умолчанию нет, их нужно создавать самому. Я-то кинула файлик page--404.tpl.php, проверила, как это делает Тема, зайдя на /404, и успокоилась) Возможно стоит использовать 404-page.tpl.php, чтобы не нарваться на путь /404, если он вдруг существует.

01.03.2012 16:06
Аватар пользователя Cydo
Cydo написал:

Про валидную верстку - сказки для новичков и повод для верстальщиков нагнать цену. Эффекта ни для юзера, ни для ПС ровным счетом 0. На кроссбраузерность тоже 0. Google+1 тот же - нихрена не валидный.

07.03.2012 17:13
Аватар пользователя Никто
Никто написал:

Все верно, будем делать все чисто "по русски", шурупы забивать молотком, а гвозди вкручивать отверткой. Правила придумали не просто и соблюдение этих правил - хороший тон.

07.03.2012 18:18
Аватар пользователя Cydo
Cydo написал:

OK, вот пример сайтика, где все страницы валидные согласно валидатору. Чего-то ни на индекс в Яндексе, ни на посещалку не влияет.
Не верите, тыц второй пример. Тоже самое.

09.03.2012 11:30
Аватар пользователя WebWin
WebWin написал:

Вы считаете что валидация кода это единственный путь к приросту посещаемости и быстрой индексации? Спешу разочаровать в таком случае...

23.06.2012 04:26
Аватар пользователя Роман
Роман написал:

Тема не должна убирать стандартные стили ядра. Она должна перекрывать их.

Вот этот пункт прокомментируйте, пожалуйста. Зачем на страницу грузить всякие default.css, node.css и т.п, если все классы из них либо не испольщуются вовсе, либо переопределены?

22.03.2012 16:57
Аватар пользователя WebWin
WebWin написал:

Если все классы переопределены – ничто не мешает изъять из загрузки стандартные css файлы друпала.

P.S. Впервые слышу про полное перекрытие стандартных стилей дру. Видимо вам действительно нечем заняться.

23.06.2012 04:29
Аватар пользователя Дмитрий
Дмитрий написал:

Тема не должна убирать стандартные стили ядра. Она должна перекрывать их.

почему?

11.04.2012 13:33
Аватар пользователя pantey
pantey написал:

А что бы в случае чего можно было на что откат делать!

11.04.2012 13:40
Аватар пользователя dmitriy.panyuta
dmitriy.panyuta написал:

Думаю, что лучше не загружать дефолтные css. Так мы выигрываем в скорости рендеринга + скорости загрузки css. Хотя все зависит от поставленной задачи и дизайна.

11.04.2012 20:52
Аватар пользователя Папа
Папа написал:

1. Агрегирование никто не отменял.
2. Во многих стилях реально есть смысл. Например, в стилях дефолтных таблиц или вертикальных табов.

11.04.2012 23:32
Аватар пользователя WebWin
WebWin написал:

Плюсую.

23.06.2012 04:29
Аватар пользователя Vega
Vega написал:

Тема не должна убирать стандартные стили ядра. Она должна перекрывать их. Совершенно не понятно почему? Когда полн завернуто в пять дивов это нормально?

28.07.2012 17:42
Аватар пользователя Aliaric
Aliaric написал:

Еще страницы вывода поиска нету.

15.08.2012 15:14
Аватар пользователя bigferumdron
bigferumdron написал:

Присоединяюсь к вопросу, почему нужно перекрывать стандартные стили друпала?

05.09.2012 01:40
Аватар пользователя Джонни Кейдж
Джонни Кейдж написал:

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

29.03.2013 13:50

Комментировать