Как нужно правильно верстать (полезные советы)

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

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

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

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

Валидность:

  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/

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

  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 в пару сот килобайт на фон; в таких случаях стараемся разбить фон на составные части и/или паттерны и делаем его частями, стараясь минимизировать ущерб "креативу" при адекватном размере страницы

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

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

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

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

CSS:

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

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

  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/

Шрифты:

  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

Формы:

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

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

JavaScript:

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

Остальное:

  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. Не забыть выкинуть не используемые стили (вроде красной рамочки для выделения элементов в процессе верстки)
966