По одному из проектов меня попросили написать бумажку, которую можно давать верстальщикам-фрилансерам, чтобы вкратце объяснить, чего от них хотят. Я на самом деле не считаю себя особо большим спецом по верстке, так что получилось довольно сумбурно и местами спорно (иногда проскальзывает специфика проекта, но думаю это некритично). Результат решил опубликовать в блоге, так как возможно многим она может показаться полезной, плюс очень хотелось бы послушать критику и дополнения в комментариях. Источники информации - различные статьи и блоги + личный опыт. Ссылки приводить не буду, так как подробная информация по любой из тем легко гуглится.

1. HTML и CSS должны быть читаемыми (все равно потом все ужимаем):

   1. HTML должен быть иерархическим, открывающие теги с новой строки (кроме случаев с), отступы 4 пробела
   2. CSS желательно не свернутые в строчку, а по одной директиве на строку, тоже с отступами по 4 пробела
   3. Можно сразу использовать SASS - сильно упрощает всем жизнь
   4. Идентификаторы классов должны быть человекочитабельмыми английскими словами и фразами
   5. Очень желательно не использование в названиях классов и идентификаторов ключевых слов из HTML/CSS/JS/jQuery
   6. Очень желательно, чтобы идентификаторы и классы не были префиксными (ни одно названия не является началом или концом другого, например .icon и .icon_small) - это позволяет сократить их все до 1-2 символов на этапе постобработки

2. DOCTYPE предпочтителен HTML5, но в крайнем случае можно и XHTML

3. Кодировка: обязательноUTF-8

4. Валидность:

   1. HTML: http://validator.w3.org
   2. CSS: http://jigsaw.w3.org/css-validator/
   3. WCAG: http://www.cynthiasays.com/ и http://www.w3.org/WAI/WCAG20/quickref/

5. Соответствие макету:

   1. Проверка: https://addons.mozilla.org/ru/firefox/addon/pixel-perfect/, https://github.com/aishek/modulargrid и https://browserlab.adobe.com/en-us/index.html
   2. Хоть и попиксельное соответствие приветствуется и считается обязательным, но местами возможны отклонения:
      1. Когда дизайнер нарисовал криво
      2. Когда незначительные различия в отрисовке шрифтов
      3. Когда у дизайнера разошлось вдохновение и единственный способ сделать точно так как на картинке - впихнуть здоровенный JPEG в пару сот килобайт на фон; в таких случаях стараемся разбить фон на составные части и/или паттерны и делаем его частями, стараясь минимизировать ущерб "креативу" при адекватном размере страницы

6. Кроссбраузерность:

   1. Перед приемом/сдачей работы проверить на http://browsershots.org/ (или аналоге) и во всех доступных под рукой браузерах
   2. Не забыть мобильные браузеры Opera Mini, iPhone и Android.
   3. Хаки для IE в conditional comments, не забываем правильно фильтровать для разных его версий
   4. IE6 должен адекватно воспринимать специфичные для HTML5 теги
   5. Помимо этого желательно проверить все разрешения от 1024х768 до 1920х1080 - везде все должно смотреться пристойно, без скроллбаров и излишних пустых областей

7. Гибкость шаблона:

   1. При этом не смотря на то, что в макетах для примера используется какой-то текст, шаблон должен нормально себя вести при любом количестве текста (как нулевом, так и очень большом) в любом элементе
   2. Если пункт меню, заголовок или просто текст в 5-10 раз длиннее или короче того, что на макете - все должно отображаться корректно (по возможности, естественно)
   3. Если в макете не было всех шести видов заголовков, ссылок в тексте, картинок, цитат, аббревиатур, блоков pre и code - это не значит, что стиль по-умолчанию для всех стандартных html-элементов может отсутствовать в CSS - возьмите цвета и стиль от других элементов шаблона и сделайте хоть как-то, для образца все элементы можно добавить в текст, даже если их там не было
   4. У всех ссылок должно быть отдельное поведение для :hover, у ссылок внутри текста - и для :visited
   5. Если в макете все же были заголовки: их структура должна быть перенесена верно
   6. Надеяться, что WYSIWYG или Word проставит какие-то особые стили к тексту и все будет нормально нельзя
   7. Если используем HTML5, то верстка должна быть семантической, то есть блоки навигации заворачиваем в nav, сайдбар в aside и.т.п.
   8. Стили для печати и мобильной версии указываем отдельными файлами с соответствующим media

8. CSS:

   1. Не забываем о производительности CSS: селекторы обрабатываются справа-налево, подробнее здесь: http://code.google.com/speed/page-speed/docs/rendering.html
   2. CSS3 правила для нормальных браузеров (border-radius, gradient, text-shadow, box-shadow), с остальными извращаемся отдельно, никаких хаков с кучей <b> и подобных
   3. Размеры и позиционирование элемента должны указываться в одних единицах измерения

9. Изображения:

   1. С умом относимся к выбору формата и уменьшаем их объем (см. "Инструменты для минимизации размера изображений"
   2. Иллюстрации и элементы интерфейса с четкими краями лучше сохранять в PNG8, фотографии в progressive JPEG - но в целом руководствуемся минимизацией объема не в ущерб качеству
   3. Отсутствие title и alt непростительно
   4. По возможности всегда указываем размеры изображений, особенно если они являются частью дизайна и заранее известны
   5. Для групп небольших изображений приблизительно одинаковой ширины или высоты (иконки, картинки разных буллетов и.т.п.) используем CSS Sprites: http://css-tricks.com/css-sprites/ (для ленивых есть ряд инструментов для автоматизации процесса)
   6. Для совсем маленьких изображений используем data:URI+MHTML: http://www.phpied.com/inline-mhtml-data-uris/

10. Шрифты:

    1. Указываем базовый размер шрифта в em, там где нужен размер больше или меньше - в % от базового
    2. Line-height задаем в долях
    3. Должно быть как минимум одному шрифту для Windows, Linux и Mac OS. Примеры:
       1. Arial,Helvetica,FreeSans,"Liberation Sans","Nimbus Sans L",sans-serif
       2. "Courier New",Courier,FreeMono,"Nimbus Mono L","Liberation Mono",monospace
       3. Georgia,"Bitstream Charter","Century Schoolbook L","Liberation Serif",Times,serif
       4. "Lucida Sans","Lucida Sans Unicode","Lucida Grande",Lucida,sans-serif
       5. "Lucida Console",Monaco,"DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono",monospace
       6. Palatino,"Palatino Linotype",Palladio,"URW Palladio L","Book Antiqua","Liberation Serif",Times,serif
       7. Tahoma,Geneva,"DejaVu Sans Condensed",sans-serif
       8. "Times New Roman",Times,"Nimbus Roman No9 L","FreeSerif","Liberation Serif",serif
       9. Verdana,"Bitstream Vera Sans","DejaVu Sans","Liberation Sans",Geneva,sans-serif
    4. Если требуется нестандартный шрифт, используем кроссбраузерный font-face: http://randsco.com/index.php/2009/07/04/p680

11. Формы:

    1. Ко всем полям должен быть label или, если так задумано, toggleval
    2. Если используем HTML5, то и поля форм тоже делаем по этому стандарту (email/tel)
    3. Проверить работу tabindex

12. Использование микроформатов желательно, если они уместны (hCard, hCalendar, hAtom, XFN)

13. JavaScript:

    1. Весь используемый JS располагается перед закрывающим </body>
    2. Желательно использование асинхронной загрузки файлов
    3. Работоспособность проверяем средствами Firebug
    4. Сайт должен нормально функционировать с выключенным JavaScript (и Flash тоже, к слову)
    5. Если на странице имеются формы - они должны валидироваться еще до отправки и нормально отображать ошибки (как минимум просто цветом)

14. Остальное:

    1. Полное отсутствие комментариев в html, кроме условных
    2. Копирайт пишем правильно: http://habrahabr.ru/blogs/typography/23812/
    3. Никакого CSS или JS внутри HTML, только внешние файлы
    4. Ссылки на внешние ресурсы должны быть с target="_blank" и по необходимости могут снабжаться иконками: https://github.com/joshuaclayton/blueprint-css/blob/master/blueprint/plugins/link-icons/screen.css
    5. Текст лучше оттипографить перед публикацией: http://rmcreative.ru/blog/post/tipograf
    6. Логотип должен вести на главную страницу
    7. Ссылки на внешние ресурсы (изображения, CSS, JS) лучше делать относительными
    8. Не забываем <title> всей страницы, должен быть понятен как человеку, так и поисковым системам
    9. HTML, JS и CSS лучше минимизировать не на этапе верстки, а автоматически при генерации шаблонов
    10. Не забыть выкинуть не используемые стили (вроде красной рамочки для выделения элементов в процессе верстки)