Рекомендации по разработке дизайна

Вот решил изложить некоторые рекомендации по разработке дизайна, т.к. дизайнеры часто повторяют одни и те же ошибки.

1. Каждый блок - законченная смысловая структура. Т.е. теги в ограничивающие блок должны начинаться в блоке и в нём заканчиваться. Ни в коем случае, теги, которые относятся к какому-то из блоков не должны находиться в других блоках.


2. Все изображения должны находиться в отдельной папке. Папка должна называться images. Ни в коем случае, не i или ещё какое-то одно-буквенное название...

3. Все пути к файлам должны быть относительными.

4. Логотип - чаще всего является ссылкой на начло сайта. Т.е. ссылкой на '/'
... Логотип...

5. Все стили - в отдельном файле стилей, который называется styles.css или style.css.

6. Не забывайте включать в дизайн все блоки, которые должны быть на сайте. Например, часто на сайте есть авторизация, значит в дизайне она тоже должна быть. Так же часто есть: поиск, карта сайта, меню (верхнее, левое, нижнее), смена страниц, полоса навигации (хлебная крошка), логотип, центральная часть (контент, каталог товаров и т.п.), новости, последние новости, анонсы, полоса прокрутки страниц, и т.п.

7. Лучше использовать div, а не таблицы для расположения блоков. Т.к. div обладает большей свободой, чем таблицы.

8. Название стилей должно быть осмысленным. Название полей, форм и т.п. тоже осмысленные.

9. Не забывайте заключать формы в тег для форм - form.

10. Кнопки должны быть кнопками, а не ссылками.

11. Обязательно указывайте стили для основных тегов, которые срабатывают по умолчанию.
Например, обязательно необходимо назначать стили:

h1, h2, h3, h4, h5, h6, body, a, a:hover и т.п.


12. В стилях используйте комментарии.

13. Теги, закрывающие должны быть под тегами открывающими. Форматируйте корреткно текст.

14. Если грузится для стиля фоновое изображение для стиля, то вначале грузите простой фон, а потом, следующим захом - стиль с изображением.

15. Используйте по-максимуму стили по-умолчанию.
Например, если идёт заголовок страницы, используйте тег

, а не указывайте отдельный div или класс для ячейки.

16. Форматируйте текст в стилях.
Не пишите так:
#knopka { background:url(/user/templates/alerta/images/fonsubmit.gif); background-repeat:repeat-x; border-color:#0f1324; border:none; color:#fff; font-size:11px; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding-bottom:5px; padding-left: 6px; padding-right: 6px; padding-top:4px; height:23px; margin-top:1px;}

Лучше пишите так:
#knopka {
background: url(/user/templates/alerta/images/fonsubmit.gif);
background-repeat:repeat-x;
border-color:#0f1324;
border:none;
color:#fff;

font-size:11px;
font-family:arial, verdana, sans-serif;
font-weight:bold;
text-align:center;

padding-bottom:5px;
padding-left: 6px;
padding-right: 6px;
padding-top:4px;

height:23px;
margin-top:1px;
}

Т.е. каждый отдельный тег - в отдельной строке и с некоторым отступом. При завершении смысловой группы можно отступать строчку.

17. Если пункты меню должны выделяться, то обязательно это должно быть показано в дизайне и в порезке. То же касается других смысловых элементов, например, хлебной крошки.

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

Пример:
#menu a{ text-decoration: none; color:#1c144d;}
#menu2 a:hover{color:#d8354a;}
#menu1 a:hover{color:#d8354a;}
Это не правильно. Т.к. menu 3-х уровневое, а первый уровень меню - без индекса.
Более правильно:
#menu1 a{ text-decoration: none; color:#1c144d;}
#menu3 a:hover{color:#d8354a;}
#menu2 a:hover{color:#d8354a;}

19. Всегда проверяйте дизайн на нескольких основных бразурах: Internet Explorer 6, Opera 9 и выше, FireFox 3, Safary.

20. Не применяйте не стандартные шрифты. Тестируйте на машинах с минимально-установленными компонентами. Так, например, шрифт Arial Narrow не существует, если не установлен MsOffice. Поэтому, не рекомендуется его использовать.

21. Всегда устанавливайте цвет фона в Body, т.к. на некоторых браузерах можно указывать цвет фона для body по умолчанию. Поэтому, если Вы не укажете фон, будет срабатывать цвент по умолчанию, а он не всегда такой, как нужно для дизайна...
Так же не забывайте указывать цвет посещённых ссылок. Т.к. стили для них тоже указываются в браузерах.

22. Ссылки на другие сайты должны открываться в новом окне.
Например:
RS™
Это не правильно, т.к. открывается в том же окне, где находится сайт.

Правильно писать так:
RS™