УрокКак должна выглядеть тема для сайта на Друпале
С годами работы с шаблонами сайтов был выработан список, по которому темизаторы и дизайнеры должны сдавать свою работу. Именно так, на наш взгляд, должна выглядеть приличная тема для 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.
- После завершения вёрстки проверьте её на валидность.
- Создать страницу для проверки типографики, например, как тут. Однако приведённый пример не является полным, поэтому лучше сделайте свой.
Над списком работали: Андрей Подлубный, Андрей Постников и, естественно, ваш покорный слуга.
Ещё по теме - Димка Варвашеня давно уже писал про типичные ошибки дизайнеров при создании макета.
Кстати, в недрах Могилёва родился ещё один многообещающий бложек про Друпал. Посмотрим, что из этого вырастет.
- Spleshka
- 11.02.2012
- 19138
Комментарии
Груз сплеч спал? ;)
Конечно, такой контент лежал вне индеса =)
Все в кашу, большая половина про тему, меньшая половина про макет)
И что?
> Вместо пишите (У нас всё-таки XHTML).
у "нас" это у кого?
У всего мира, чо
Это у адекватных Друпалеров. Ибо по умолчанию шаблоны Друпала используют XHTML.
по умолчанию шаблоны друпала используют html5
Серьёзно?
Drupal 6:
Drupal 7:
Вот так должно выглядеть для (X)HTML5:
На таблицах верстают пидорасы. Мужыки верстают на div’ах - все верно :)
Так же хорошим тоном считаю вывод формы поиска блоком в специально предназначенный регион. Если захочется установить такой модуль как GoogleCSE - придется идти в код и исправляться.
Я бы пронумировал все пункты и добавлял следующие. И назвал бы тогда статью "50 факторов, которые делают шаблон кошерным"
Цифра в названии очень важна. Особенно для касты программистов. Они лучше усваивают тогда.
Например. "49 заповедей друпал версталы". Или 38 шагов до вершина блаженства. Или 67 преград дьявола.
xhtml-вымер, и его разработку давно свернули, а всех разработчиков кинули на html 5... Смысл поддерживать drupal -xhtml, не особо понятен...Хотя наверно разработчикам Drupal виднее...
HTML5 будет актуален, когда последний юзер с ie8 перейдет на более адекватный браузер. Так что рано еще, рано.
"Убрать подсказки форматирования и выбор формата воода хотя бы для анонимов. Может, кому-то и нравится, но выглядит не очень симпатично. Но проверить, что у редакторов/администраторов есть возможность переключаться между форматами ввода."
А как это делается вообще?, весь друпал.ру обыскал, какие-то хаки только и всё...
Можно например так. Или использовать модуль Better formats.
а предпочтение макета в векторном формате - это личные хотелки, или таки есть не предвзятые аргументы в пользу таковых?
Это подсказывает опыт работы с макетами в растре и векторе. Бывает надо изменить ширину или высоту какого-то элемента, а он уже теряет свои очертания и становится более размытым, например. Просто работа в векторе гарантирует дизайнеру, что его будут меньше дёргать :) И верстальщик может сократить время своей работы, т.к. не придётся дёргать дизайнера :)
Моя основная претензия к вектору в psd - это его лохматость - дизайнер тягает абы как и на выходе получаются линии/фоны +/- пару пикселей с прозрачностью. И ты сидишь и чешешь репу - это задумка дизайнера или он просто мудак и верстальщику нужно фактически садиться и перерисовывать из дизайнерского вектора.
Если дизайнер кривой или слепой, то тогда простительно в ином случае это ошибка. У нас в компании за это отчитывает верстальщик дизайнера:)))
«Сделанные страницы с 403 и 404 ошибкой (page--403.tpl.php, page--404.tpl.php).»
Оказывается, таких саджесшенов по умолчанию нет, их нужно создавать самому. Я-то кинула файлик page--404.tpl.php, проверила, как это делает Тема, зайдя на /404, и успокоилась) Возможно стоит использовать 404-page.tpl.php, чтобы не нарваться на путь /404, если он вдруг существует.
Про валидную верстку - сказки для новичков и повод для верстальщиков нагнать цену. Эффекта ни для юзера, ни для ПС ровным счетом 0. На кроссбраузерность тоже 0. Google+1 тот же - нихрена не валидный.
Все верно, будем делать все чисто "по русски", шурупы забивать молотком, а гвозди вкручивать отверткой. Правила придумали не просто и соблюдение этих правил - хороший тон.
OK, вот пример сайтика, где все страницы валидные согласно валидатору. Чего-то ни на индекс в Яндексе, ни на посещалку не влияет.
Не верите, тыц второй пример. Тоже самое.
Вы считаете что валидация кода это единственный путь к приросту посещаемости и быстрой индексации? Спешу разочаровать в таком случае...
Тема не должна убирать стандартные стили ядра. Она должна перекрывать их.
Вот этот пункт прокомментируйте, пожалуйста. Зачем на страницу грузить всякие default.css, node.css и т.п, если все классы из них либо не испольщуются вовсе, либо переопределены?
Если все классы переопределены – ничто не мешает изъять из загрузки стандартные css файлы друпала.
P.S. Впервые слышу про полное перекрытие стандартных стилей дру. Видимо вам действительно нечем заняться.
Тема не должна убирать стандартные стили ядра. Она должна перекрывать их.
почему?
А что бы в случае чего можно было на что откат делать!
Думаю, что лучше не загружать дефолтные css. Так мы выигрываем в скорости рендеринга + скорости загрузки css. Хотя все зависит от поставленной задачи и дизайна.
1. Агрегирование никто не отменял.
2. Во многих стилях реально есть смысл. Например, в стилях дефолтных таблиц или вертикальных табов.
Плюсую.
Тема не должна убирать стандартные стили ядра. Она должна перекрывать их. Совершенно не понятно почему? Когда полн завернуто в пять дивов это нормально?
Еще страницы вывода поиска нету.
Присоединяюсь к вопросу, почему нужно перекрывать стандартные стили друпала?
с таблицами и пидорасами хз. когда то, что можно сверстать в таблице с valign= надо ебашить несколькими дивами с кучкой хаков...
Комментировать