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

Аватар пользователя petu petu 17 апреля 2010 в 9:13

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

Список требований для дизайн-макета и верстки под Drupal

Пожелания и исправления приветствуются!

0 Thanks

Комментарии

Аватар пользователя xxandeadxx xxandeadxx 17 апреля 2010 в 10:09
Quote:

макет должен быть протестирован в IE6+, Google Chrome 1+, Mozilla Firefox 2+, Opera 9.XX +, Safari 3+;

итого имеем: IE6, IE7, IE8, Chrome 1, Chrome 2, Chrome 3, Chrome 4, Firefox 2, Firefox 3, Firefox 3.5, Opera 9, Opera 9.5, Opera 10, Opera 10.50, Safari 3, Safari 4. извращенцы

Аватар пользователя petu petu 17 апреля 2010 в 23:31
xxandeadxx wrote:
Quote:

макет должен быть протестирован в IE6+, Google Chrome 1+, Mozilla Firefox 2+, Opera 9.XX +, Safari 3+;

итого имеем: IE6, IE7, IE8, Chrome 1, Chrome 2, Chrome 3, Chrome 4, Firefox 2, Firefox 3, Firefox 3.5, Opera 9, Opera 9.5, Opera 10, Opera 10.50, Safari 3, Safari 4. извращенцы

"Стандарт" был начат не вчера, и даже не позавчера, а в прошлом году. Тогда версий было существенно меньше :).
Верстку проверить в основных современных браузерах реально. Это работа верстальщика. Чтобы отловить баги, обычно программист работает в Firefox, менеджер в IE.

Alex_R wrote:

В разделе "Стандарты создания дизайн-макета" в п. 5 и 6 помимо активной ссылки желательно показать и наведенную не нажатую (а можно + к этому и нажатую) ссылку.

По-хорошему - да. Но, упрощая, допускаю, чтобы наведенная ссылка вела себя точно так же, как активная. Посещенные ссылки не темизиру отдельно. Это моё мнение.

Alex_R wrote:

Соглашусь с xxandeadxx, что с браузерами перебор, имхо этот вопрос должен решаться в рабочем порядке с заказчиком отдельно в каждом случае, так же как и п.1 раздела "Стандарты создания дизайн-макета" - 1000пикселов может быть как очень много, так и очень мало, аналогично с 16ым пунктом "Стандарты верстки".
Я вообще с заказчика при резиновом макете прошу два макета на минимальное и максимальное разрешение. Это заменяет собой обычно трудно реализуемое словесное описание п.9.4. для резинового макета.

Стандарты - это дефолтные настройки. Если оговорены детали, дефолтные настройки перекрываются :).
Два макета - хороший вариант, надо внедрить в практику!

Alex_R wrote:

Возможно тупой вопрос - а как реализуется п.13 "Стандартов верстки"? Ведь высота экранов у пользователей может быть разная...

Если честно, не знаю :). Мой верстальщик делает это хорошо. Когда обращался к другому верстальщику, долго плевался, поэтому и написал эту доку. По вопросу - попробую узнать у него...

Alex_R wrote:

В "Стандарты создания дизайн-макета" в пунктах 9.1 и 9.3 во вторых словах заметил очепятки.
Спасибо за полезный материал!

Описки поправил. Спасибо за замечания!

stenli21 wrote:

п.12 - списки (в тегах ul, li, ol) не должны использовать аттрибуты class и id;

А как же тогда быть с темизацией? если нужно какой-то определенный пункт меню выделить?

Ребят, это не догма. Это рекомендации. Если нужно делать каждый пункт меню уникальным, используйте class, id - что считаете нужным. Однако таких кастомных проектов у меня один из пяти.

Stan.Ezersky wrote:

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

Очевидные.. Если это уже десятый проект. Но приходится работать с людьми, для которых текущий проект первый. Чем подробнее "разжуешь" таблетку, тем быстрее получишь результат.

Stan.Ezersky wrote:

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

ИМХО чаще попадаются сайты, где надо подвал прибивать, если контента очень мало.

Stan.Ezersky wrote:
Quote:

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

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

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

Таблицы, жирный, курсив - добавил. Спасибо за подсказку. Картинки, обтекание - для меня это пока что лишнее.

Коллеги, спасибо за комментарии!!! Когда соберу более-менее полный вариант, постараюсь выложить его здесь, на сайте.

Аватар пользователя Alex_R Alex_R 18 апреля 2010 в 12:57
petu wrote:
Alex_R wrote:

В разделе "Стандарты создания дизайн-макета" в п. 5 и 6 помимо активной ссылки желательно показать и наведенную не нажатую (а можно + к этому и нажатую) ссылку.

По-хорошему - да. Но, упрощая, допускаю, чтобы наведенная ссылка вела себя точно так же, как активная. Посещенные ссылки не темизиру отдельно. Это моё мнение.

А я про посещенную ссылку ничего и не говорил, и без нее возможны 5 вариантов:
1. неактивная.
2. неактивная наведеная.
3. неактивная наведенная в момент нажатия (редко используется, но иногда заказчики требуют).
4. активная.
5. активная наведеная.
Сайта со всеми пятью одновременно не нашел, но два варианта с четырьмя (разными) могу показать (правда один не на Друпале)

petu wrote:

Два макета - хороший вариант, надо внедрить в практику!

Рад, что идея понравилась.

petu wrote:
Alex_R wrote:

Возможно тупой вопрос - а как реализуется п.13 "Стандартов верстки"? Ведь высота экранов у пользователей может быть разная...

Если честно, не знаю :). Мой верстальщик делает это хорошо. Когда обращался к другому верстальщику, долго плевался, поэтому и написал эту доку. По вопросу - попробую узнать у него...

Интересно - буду ждать.
Еще раз спасибо за правильное дело!

Аватар пользователя Alex_R Alex_R 17 апреля 2010 в 11:19

Взгляд новичка. Очень полезный материал!
В разделе "Стандарты создания дизайн-макета" в п. 5 и 6 помимо активной ссылки желательно показать и наведенную не нажатую (а можно + к этому и нажатую) ссылку.

Соглашусь с xxandeadxx, что с браузерами перебор, имхо этот вопрос должен решаться в рабочем порядке с заказчиком отдельно в каждом случае, так же как и п.1 раздела "Стандарты создания дизайн-макета" - 1000пикселов может быть как очень много, так и очень мало, аналогично с 16ым пунктом "Стандарты верстки".
Я вообще с заказчика при резиновом макете прошу два макета на минимальное и максимальное разрешение. Это заменяет собой обычно трудно реализуемое словесное описание п.9.4. для резинового макета.

Возможно тупой вопрос - а как реализуется п.13 "Стандартов верстки"? Ведь высота экранов у пользователей может быть разная...

В "Стандарты создания дизайн-макета" в пунктах 9.1 и 9.3 во вторых словах заметил очепятки.

Спасибо за полезный материал!

Аватар пользователя stenli21 stenli21 17 апреля 2010 в 11:26

п.12 - списки (в тегах ul, li, ol) не должны использовать аттрибуты class и id;

А как же тогда быть с темизацией? если нужно какой-то определенный пункт меню выделить?

Аватар пользователя Stan.Ezersky Stan.Ezersky 17 апреля 2010 в 14:28

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

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

Quote:

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

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

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

Аватар пользователя stenli21 stenli21 17 апреля 2010 в 14:02
"Stan.Ezersky" wrote:

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

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

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

Stan - это не я писал...

Аватар пользователя olk olk 18 апреля 2010 в 1:16

Не сочтите за критику Smile Но ваш сайт не совсем соответствует вашим же стандартам ... вернее может и соответствует, но верстка лэйаута все же кривовата.
Попробуйте «сжать» окно браузера до ширины меньше 1000 (чтобы появился горизонтальный скролбар) и посмотрите, что у вас получается справа ...
Да и через валидатор (w3c) страничка не проходит ... вроде как в том числе и созданием сайтов занимаетесь ... аккуратнее надо бы Smile

Аватар пользователя petu petu 19 апреля 2010 в 17:49
olk wrote:

Не сочтите за критику Smile Но ваш сайт не совсем соответствует вашим же стандартам ... вернее может и соответствует, но верстка лэйаута все же кривовата.
Попробуйте «сжать» окно браузера до ширины меньше 1000 (чтобы появился горизонтальный скролбар) и посмотрите, что у вас получается справа ...
Да и через валидатор (w3c) страничка не проходит ... вроде как в том числе и созданием сайтов занимаетесь ... аккуратнее надо бы Smile

Критика принимается!! Сайт действительно никакущий. Руки не доходят, сапожник без сапог :(. Мало того, проекты этого года всё никак не выложу в портфолио :(.

Кстати, оформление - это одна из стандартных друпаловских тем :).

Сжимать уже, чем 1000 пикселей вряд ли стоит. Самое меньшее разрешение - 1024 по ширине.