• САЙТ под ключ от простых визиток до крупных индивидуальных проектов
  • ДИЗАЙН сайтов баннеров логотипов фирменный стиль стильный
    креативный возбуждающий
  • ВЁРСТКА сайтов любой сложности адаптивная валидная

  • Программирование

    php / mysql
    jquery / javascript
    эффективный,
    безопасный
    и быстрый код
  • Система управления сайтом

    удобная, простая и быстрая
Искусство в WEB-технологиях

Правила грамотной и качественной вёрстки сайтов

В данной статье приведены некоторые основные правила, которые часто предъявляются при заказе вёрстки html-страниц. С подобными пожеланиями к верстке сайта можно столкнуться при работе с рекламным агентством или дизайн-студией.


Материал предназначен для верстальщиков начального и среднего уровня, и заказчиков, желающих выяснить технический уровень сдаваемых им сверстанных страниц.


Итак, каковы же основные прaвила качественной верстки?

  1. Верстка должна быть кроссбраузерной для Internet Explorer 6+, Firefox 2+, Opera 9+, Google Chrome, Safari 3+. Следует однако заметить, что в последнее время 6-я версия IE теряет свою актуальность. С чем нельзя не поздравить верстальщиков!
    Также, результат работы необходимо тестировать на разных разрешениях монитора(начиная от 1024x768).
  2. Верстка всех страниц должна проходить валидацию:
    как HTML,
    так и CSS.
    Использование некоторых CMS, модулей для них и других готовых скриптов, тонкая настройка кросбраузерности для сложных сайтов, а также вставка на сайт содержимого различных форматов - часто могут сильно затруднить достижение валидности.
  3. Вид сверстанной страницы должен максимально соответствовать дизайну. То есть отступы, отбивки(margin и padding), межстрочные расстояния, и размеры шрифтов должны совпадать с соответствующими параметрами эскиза (макета, выполненного в графическом редакторе). Время от времени попадаются веб-страницы, при вёрстке которых важно соблюдать сходство с макетом с точностью до пикселя. В большинстве же случаев отклонение некоторых элементов в пределах 3-5 пикселей считается допустимым.
  4. Все CSS-стили должны быть вынесены в отдельный файл, в HTML допускается только присутствие классов и идентификаторов.
  5. Логотип сайта должен быть ссылкой на главную страницу сайта и иметь атрибут alt="на главную | название компании" (при необходимости применяется title).
  6. В html-страницах сайта должны присутствовать комментарии к основным элементам: шапка, логотип, меню, заголовок страницы, контент, футер и т. д.
  7. Названия классов и идентификаторов должны по смыслу соответствовать применению и быть интуитивно понятными (например: header, menu, footer, news), при необходимости с комментариями о том, где стиль используется.
  8. В каскадных таблицах стилей(css) рекомендуется использовать для всех величин одинаковые еденицы измерения pt или px.
  9. Каждый тег img должен иметь приписывать alt="название картинки". Все alt-ы на сайте должны начинаться либо с заглавной буквы либо с прописной и должны быть написаны на одном языке
  10. Надписи на кнопках также должны быть написаны либо все с заглавной буквы либо все с прописной и на одном языке
  11. Все кнопки должны либо иметь стандартное оформление, либо настроены через таблицы стилей, либо сделаны как графические элементы
  12. Атрибут Тitle страницы должен иметь следующий вид:
    Название подраздела | Название раздела | Название компании
  13. Необходимо минимизировать HTML- и CSS-код. Одинаковое форматирование можно получить разными способами. Чем проще и короче написан код, тем он профессиональнее. Нужно избегать лишних идентификаторов и классов, используя наследование. В CSS следует использовать по возможности сокращённые формы записи. Например вместо свойств:
    background-color:#FFCC66;
    background-image: url("image.gif");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: right bottom;

    можно записать одну строку:
    background: #FFCC66 url("image.gif") no-repeat fixed right bottom;
  14. Форматирование HTML- и CSS-кода должно быть оформлено логично. Присутствие иерархических отступов и комментариев — очень желательно.
  15. Заголовки первого уровня делаются тегом h1 и только так! Заголовки второго уровня — h2 и т. д. Для создания списков существуют специальные теги, пренебрегать ими не стоит.
  16. Для всех тегов необходимо их значения атрибутов заключить в кавычки:
    <p class="head">.
  17. Знаки copyright и registered — это не буквы "с" и "r" в скобках, а коды &copy; и &reg; соответственно.
  18. В местах, где перенос части фразы на новую строку недопустим необходимо использовать неразрывный пробел(&nbsp;), например:
    и т.&nbsp;д.
    Такая запись позволит избежать разрыва сокращения «и т. д.».