Стандарты при изготовлении дизайн-макета и верстки для проектов на drupal 6

Во время моего последнего выступления на семинаре Drupal в Москве, многие из участников захотели увидет те самые стандарты, по которым мы работаем, если макет предоставляется Заказчиком. Я решил немного переработать черновик и выложить на всеобщее обозрение. Критика и дополнения в виде комментариев приветствуется!

Стандарты создания дизайн-макета

  1. Стандартный дизайн-макет должен иметь ширину не более 1000 пикселей;
  2. для случая с интернет-магазином, картинки товара, бренда в каталоге, карточке товара должны иметь заглушки на случай, если товар/бренд не имеет картинки.
  3. макет (в одном из вариантов, если макетов несколько) должен содержать списки (по возможности, вложенные): нумерованый и не нумерованный;
  4. заголовки h1-h6;
  5. оформленную таблицу;
  6. оформленный текст: жирный, курсив;
  7. один из пунктов меню должен быть в активном состоянии;
  8. одна из ссылок должна быть в активном состоянии (это делается для того, чтобы верстальщик знал, как нужно сделать представление активной ссылки);
  9. если меню имеет вложенность, один пункт должен быть раскрытым до самого нижнего уровня;
  10. меню, подразумевающие масштабируемость в будущем, должны иметь место для новых пунктов. Это должно корректно смотреться в разрешении 1024х768;
  11. макет должен иметь небольшое описание. В нем надо указать:
    1. какие ссылки изображены активными;
    2. какие элементы меню изображены активными;
    3. если предполагается какая-либо анимация в меню, она должна быть описана;
    4. тип макета: резиновый макет или фиксированный, что тянется и где (какой слой) в случае, если предполагается резиновая верстка. При резиновой верстке добавляется один вариант макета в максимально возможном размере.

Стандарты верстки

  1. Сверстанный макет должен совпадать с дизайн-макетом во всех поддерживаемых браузерах;
  2. в заголовке должно присутствовать объявление типа документа (DOCTYPE);
  3. страница должна быть сверстана в слоях (div), таблицы допускается использовать только для табличных данных;
  4. в картинках должен быть прописан альтернативный текст;
  5. парные теги должны быть закрыты;
  6. должны отсутствовать лишние атрибуты в тегах, неподдерживаемые теги;
  7. все визуальное оформление должно быть выполнено при помощи каскадных таблиц стилей (css). Полученные html-страницы не должны содержать информации об оформлении страницы, должна быть представлена лишь логическая структура документа;
  8. каскадные таблицы стилей должны быть вынесены во внешние файлы;
  9. код JavaScript должен быть вынесен во внешние файлы, подключаемые в html коде страницы;
  10. при отключении отключаемых блоков/регионов, содержимое должно растягиваться и занимать место отключенных блоков;
  11. пункты меню должны быть реализованы списками;
  12. списки (в тегах ul, li, ol) не должны использовать аттрибуты class и id;
  13. подвал сайта всегда должен быть прибит к низу, вне зависимости от наличия содержимого внутри страницы;
  14. макет должен быть протестирован в IE6+, Google Chrome 1+, Mozilla Firefox 2+, Opera 9.XX +, Safari 3+;
  15. желательно, чтобы верстка была валидна;
  16. резиновый макет должен быть ограничен по ширине 1280 пикселами.
Ваша оценка: Нет Средняя: 3.3 (12 голосов)

Комментарии

Тут не только верстальщики "виноваты". Дизайнер должен нарисовать, иначе верстальщик не сверстает того, чего не видит на макете.

По таблицам - тоже можно добавить.

В основном всё описанное, это очевидные вещи.

Для новичков требования подойдут, а вот про "прибитый подвал" — откровенный бред: есть сайты, где не нужно прижимать футер к низу страницы.
Также бред и с классами в списках.

3. макет (в одном из вариантов, если макетов несколько) должен содержать списки (по возможности, вложенные): нумерованный и не нумерованный;
4. заголовки h1-h6;

А почему нет таблиц? Они тоже должны быть визуально представлены. Также, жирный текст, курсив, виды ссылок, картинки их обтекание текстом тоже должны быть отражены.

Короче, пособие для начинающих верстальщиков, даже не под Друпал, а подо что угодно.

Отправить комментарий

Содержание этого поля является приватным и не предназначено к показу.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Доступны HTML теги: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Строки и параграфы переносятся автоматически.

Подробнее о форматировании