среда, 26 января 2011 г.

Правила верстки

Обрати внимание! Эта статья носит рекомендательный характер.
Верстая, думай о верстальщиках и программистах, которым придется работать с этим макетом после тебя.
Верстай так, чтобы эти слова можно было сказать про результаты твоей работы:
  • Кроссбраузерность
  • Блочная верстка
  • Валидность и семантика кода
  • Логичный, продуманный, ручной код
  • Чистота и аккуратность кода

Соглашения по именованию и размещению файлов

  • Имена файлов и папок должны быть переведены на английский язык
  • Папка с графикой для интерфейса сайта имеет название img
  • Папка с таблицами стилей для сайта имеет название css
  • Папка с ява-скриптами для сайта имеет название js
  • Папка с flash-вставками для сайта имеет название flash
  • Папка с файлами заказчика (фотографии в каталоге, схемы проезда, иллюстрации к новостям, pdf и doc файлы, mp3 файлы и другие) имеет название files
  • Главная страница имеет название index.html
  • Все имена файлов сайта должны иметь понятные названия, будь то картинки, скрипты, стили или архивы. Названия должны быть лаконичными и информативными.

Общие правила

  • В конце заголовков точка не ставится, но если там стоят другие знаки препинания, то они сохраняются.
  • Для удобства восприятия информации, подчеркнутой в основном тексте может быть только гиперссылка.
  • Для всех рисунков обязательно должны быть указаны их width и height, а также должен быть заполнен атрибут alt (альтернативный текст).
  • Во избежание неправильных переносов номеров телефонов следует использовать   в качестве разделителя
  • После открывающей и перед закрывающей скобкой не должно быть пробелов.
  • Названия классов и id должны по смыслу соответствовать применению, например, header, menu, footer, news
  • Определить, в какой кодировке должен быть html-макет. CSS и JS файлы должны быть в той же кодировке, что и макет.
  • Если в Т.З. не сказано другое, макет обязательно должен помещаться без горизонтальных скроллбаров в развернутое на весь экран окно браузера при горизонтальной составляющей разрешения экрана 1024px.
  • Если не оговорено обратное для частных случаев, все блоки, высоту которых ничего в дизайне не мешает сделать динамической, должны иметь именно динамическую (т. е. зависимую от содержания) высоту, а иногда, чтобы ничего не могло потенциально поломать дизайн, нужно задавать и минимальную высоту. Если хотите сделать блок фиксированной высоты — сначала спросите.
  • В макетах, где высота страницы зависит от контента (а таких, как правило, большинство), предусматривай, чтобы футер был прибит к низу браузера при отсутствии/малом количестве контента, если не оговорено обратное.
  • Если страниц несколько, то они должны быть связаны друг с другом ссылками.
  • Логотип должен быть ссылкой на главную страницу сайта и иметь alt="на главную | название компании"
  • Ссылка на сайт разработчика должна открываться в новой вкладке в том же окне
  • Многоточие обозначается не тремя точками, а кодом …
  • Вид сверстанной страницы должен максимально соответствовать дизайну.

Css

  • Используй reset.css
  • В таблицах стилей первыми определяются стандартные элементы p, b, span, a, body, а только затем элементы подклассов
  • При использовании таблиц стилей конструкции в теле html-документа типа font-size, bgcolor, align и другие недопустимы.
  • Если используешь CSS хаки, комментируй, что это и для какого браузера, так же следует выносить хаки в отдельный файл, используя Conditional Comments
  • Контентные части сайта, куда будет выведен текст из визуального редактора, должны корректно отображать текст (p, b, i, etc), картинки (img), ссылки (a ), таблицы (table, tr, td, th), списки (li, ul и т.д.), без использования в тегах классов стилей. Необходимо использовать только класс внешнего контейнера.
  • Все кнопки должны иметь либо стандартный вид, либо настроены через таблицы стилей, либо сделаны как графические элементы
  • В таблицах стилей все буквы должны быть строчными, исключение заглавные буквы в названии шрифтов.
  • В таблицах стилей все величины должны иметь одинаковые единицы измерения px или pt

Html

  • Использовать язык разметки XHTML или HTML 5
  • Необходимо минимизировать HTML-код. Одинаковое форматирование можно получить разными способами. (только не нужно доходить до паранои)
  • Форматирование HTML-кода должно быть логично оформлено. Присутствие иерархических отступов и комментариев — необходимо
  • Общие стили CSS и JS-код вынести в отдельные файлы
  • Если в html — макете Вашего сайта используется больше 2-х вложенных таблиц, то скорее всего код подлежит оптимизации
  • Для задания отступов используются стили padding, margin, а непустые td или br и пробелы
  • Значение атрибутов тегов должны быть заключены в кавычки <p class="tips">
  • Верстай формы правильно: метки полей должны находиться в тегах label
  • Использование каждого тега в верстке должно быть уместно
Основные теги
  • h1..h6 – заголовки
  • ul, dl,.. – списки
  • p – параграфы
  • address – поле для отображения адреса
  • table – для отображения табличных данных
  • th – заголовок таблицы
  • td – данные в таблице
  • div – блоки страницы

Javascript

  • Все что можно сделать без Javascript, делать без него
  • Выносить код в отдельный файл
  • Если делаешь обработку событий при нажатии на ссылки, следи за тем, чтобы обработчики событий возвращали false, чтобы страница не скроллилась вверх (если href="#").

Тестирование

  • Результат работы необходимо тестировать в следующих браузерах IE 6+, Opera 9.6+, FireFox 3+, Google Chrome, Safari
  • Если сайт имеет географическую привязку, то необходимо так же обращать внимание на статистику использования браузеров, например, статистика liveinternet.ru будет отличаться от статистики в Иркутской области (основываясь на данных mail.ru для сайта irk.ru)
  • Результат работы необходимо тестировать по возможности на разных мониторах (Например, монитор ноутбука и стационарный монитор заметно отличаются) и разных разрешениях экрана (разрешение 1024х768 по прежнему остается самым распространенным), статистику можно посмотреть тут
  • Проверить результат работы валидатором

Инструменты

При составлении рекомендации были использованны материалы следующих сайтов:

за что их авторам большое спасибо!)

Еще почитать