Источники информации – различные статьи и блоги + личный опыт Ивана Блинкова.
HTML и CSS должны быть читаемыми (все равно потом все ужимаем):
- HTML должен быть иерархическим, открывающие теги с новой строки (кроме случаев с), отступы 4 пробела
- CSS желательно не свернутые в строчку, а по одной директиве на строку, тоже с отступами по 4 пробела
- Можно сразу использовать SASS – сильно упрощает всем жизнь
- Идентификаторы классов должны быть человекочитабельмыми английскими словами и фразами
- Очень желательно не использование в названиях классов и идентификаторов ключевых слов из HTML/CSS/JS/jQuery
- Очень желательно, чтобы идентификаторы и классы не были префиксными (ни одно названия не является началом или концом другого, например
.icon
и.icon_small
) – это позволяет сократить их все до 1-2 символов на этапе постобработки
DOCTYPE
предпочтителен HTML5, но в крайнем случае можно и XHTML- Кодировка: обязательно UTF-8
Валидность:
Соответствие макету:
- Проверка: https://addons.mozilla.org/ru/firefox/addon/pixel-perfect/, https://github.com/aishek/modulargrid и https://browserlab.adobe.com/en-us/index.html
- Хоть и попиксельное соответствие приветствуется и считается обязательным, но местами возможны отклонения:
- Когда дизайнер нарисовал криво
- Когда незначительные различия в отрисовке шрифтов
- Когда у дизайнера разошлось вдохновение и единственный способ сделать точно так как на картинке – впихнуть здоровенный JPEG в пару сот килобайт на фон; в таких случаях стараемся разбить фон на составные части и/или паттерны и делаем его частями, стараясь минимизировать ущерб "креативу" при адекватном размере страницы
Кроссбраузерность:
- Перед приемом/сдачей работы проверить на http://browsershots.org/ (или аналоге) и во всех доступных под рукой браузерах
- Не забыть мобильные браузеры Opera Mini, iPhone и Android.
- Хаки для IE в conditional comments, не забываем правильно фильтровать для разных его версий
- IE6 должен адекватно воспринимать специфичные для HTML5 теги
- Помимо этого желательно проверить все разрешения от 1024х768 до 1920х1080 – везде все должно смотреться пристойно, без скроллбаров и излишних пустых областей
Гибкость шаблона:
- При этом не смотря на то, что в макетах для примера используется какой-то текст, шаблон должен нормально себя вести при любом количестве текста (как нулевом, так и очень большом) в любом элементе
- Если пункт меню, заголовок или просто текст в 5-10 раз длиннее или короче того, что на макете – все должно отображаться корректно (по возможности, естественно)
- Если в макете не было всех шести видов заголовков, ссылок в тексте, картинок, цитат, аббревиатур, блоков pre и code – это не значит, что стиль по-умолчанию для всех стандартных html-элементов может отсутствовать в CSS – возьмите цвета и стиль от других элементов шаблона и сделайте хоть как-то, для образца все элементы можно добавить в текст, даже если их там не было
- У всех ссылок должно быть отдельное поведение для :hover, у ссылок внутри текста – и для :visited
- Если в макете все же были заголовки: их структура должна быть перенесена верно
- Надеяться, что WYSIWYG или Word проставит какие-то особые стили к тексту и все будет нормально нельзя
- Если используем HTML5, то верстка должна быть семантической, то есть блоки навигации заворачиваем в nav, сайдбар в aside и.т.п.
- Стили для печати и мобильной версии указываем отдельными файлами с соответствующим media
CSS:
- Не забываем о производительности CSS: селекторы обрабатываются справа-налево, подробнее здесь: http://code.google.com/speed/page-speed/docs/rendering.html
- CSS3 правила для нормальных браузеров (border-radius, gradient, text-shadow, box-shadow), с остальными извращаемся отдельно, никаких хаков с кучей
<b>
и подобных - Размеры и позиционирование элемента должны указываться в одних единицах измерения
Изображения:
- С умом относимся к выбору формата и уменьшаем их объем (см. "Инструменты для минимизации размера изображений"
- Иллюстрации и элементы интерфейса с четкими краями лучше сохранять в PNG8, фотографии в progressive JPEG – но в целом руководствуемся минимизацией объема не в ущерб качеству
- Отсутствие
title
иalt
непростительно - По возможности всегда указываем размеры изображений, особенно если они являются частью дизайна и заранее известны
- Для групп небольших изображений приблизительно одинаковой ширины или высоты (иконки, картинки разных буллетов и.т.п.) используем CSS Sprites: http://css-tricks.com/css-sprites/ (для ленивых есть ряд инструментов для автоматизации процесса)
- Для совсем маленьких изображений используем data:URI+MHTML: http://www.phpied.com/inline-mhtml-data-uris/
Шрифты:
- Указываем базовый размер шрифта в em, там где нужен размер больше или меньше – в % от базового
- Line-height задаем в долях
- Должно быть как минимум одному шрифту для Windows, Linux и Mac OS. Примеры:
Arial,Helvetica,FreeSans,"Liberation Sans","Nimbus Sans L",sans-serif
"Courier New",Courier,FreeMono,"Nimbus Mono L","Liberation Mono",monospace
Georgia,"Bitstream Charter","Century Schoolbook L","Liberation Serif",Times,serif
"Lucida Sans","Lucida Sans Unicode","Lucida Grande",Lucida,sans-serif
"Lucida Console",Monaco,"DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono",monospace
Palatino,"Palatino Linotype",Palladio,"URW Palladio L","Book Antiqua","Liberation Serif",Times,serif
Tahoma,Geneva,"DejaVu Sans Condensed",sans-serif
"Times New Roman",Times,"Nimbus Roman No9 L","FreeSerif","Liberation Serif",serif
Verdana,"Bitstream Vera Sans","DejaVu Sans","Liberation Sans",Geneva,sans-serif
- Если требуется нестандартный шрифт, используем кроссбраузерный font-face: http://randsco.com/index.php/2009/07/04/p680
Формы:
- Ко всем полям должен быть label или, если так задумано, toggleval
- Если используем HTML5, то и поля форм тоже делаем по этому стандарту (email/tel)
- Проверить работу tabindex
Использование микроформатов желательно, если они уместны (hCard, hCalendar, hAtom, XFN)
JavaScript:
- Весь используемый JS располагается перед закрывающим
</body>
- Желательно использование асинхронной загрузки файлов
- Работоспособность проверяем средствами Firebug
- Сайт должен нормально функционировать с выключенным JavaScript (и Flash тоже, к слову)
- Если на странице имеются формы – они должны валидироваться еще до отправки и нормально отображать ошибки (как минимум просто цветом)
- Весь используемый JS располагается перед закрывающим
Остальное:
- Полное отсутствие комментариев в html, кроме условных
- Копирайт пишем правильно: http://habrahabr.ru/blogs/typography/23812/
- Никакого CSS или JS внутри HTML, только внешние файлы
- Ссылки на внешние ресурсы должны быть с
target="_blank"
и по необходимости могут снабжаться иконками: https://github.com/joshuaclayton/blueprint-css/blob/master/blueprint/plugins/link-icons/screen.css - Текст лучше оттипографить перед публикацией: http://rmcreative.ru/blog/post/tipograf
- Логотип должен вести на главную страницу
- Ссылки на внешние ресурсы (изображения, CSS, JS) лучше делать относительными
- Не забываем
<title>
всей страницы, должен быть понятен как человеку, так и поисковым системам - HTML, JS и CSS лучше минимизировать не на этапе верстки, а автоматически при генерации шаблонов
- Не забыть выкинуть не используемые стили (вроде красной рамочки для выделения элементов в процессе верстки)
Комментарии:
Гость#
Опис использования микроформатов