Общие требования

Общие требования

Соответствие макету (Pixel Perfect)

Расположение блоков должно быть 1:1 по сравнению с макетом. Допускается расхождение до 5px для текста. Разрешены и даже приветствуются правки размеров и расположения криво нарисованных блоков (разница размерах в 1-2px на разных страницах).

Размеры блоков могут меняться при изменениях контента (по высоте например), это нормально. Мы используем Pixel Perfect для проверки что все базовые блоки находятся там где надо, их размеры, отступы — соответствуют макету.

Технические стандарты

Кодировка: UTF-8. Эта кодировка должна использоваться для всех файлов: html, css, js (если файлы в разных кодировках могут быть проблемы) DOCTYPE: HTML5 Валидность (включая CSSLint и JSHint), доступность, микроформаты: Не должно быть JavaScript-ошибок. (Обратите внимание что console. log под IE7-8 ломает код и вызывает ошибки) CSS валидируется по версии 3.0, его валидность не требуется, а вот синтаксические ошибки (типа margin: 10xp) исправлять надо. Микроформаты должны быть. Как минимум – hCard. Желательно также hCalendar, XFN, hAtom. Проверка статическими анализаторами качества кода: CSSLint и JSHint Независимость блоков в CSS: минимизация каскада, использование техник БЭМ
Для минимизации каскада и построения надёжной, современной, масштабируемой вёрстки сейчас применяют следующие техники: БЭМ, MCSS и SMACSS. CSS должен быть написан с использованием препроцессоров (LESS/Sass/Stylus).
Проверяется поиском файлов с расширениями вида: .less, .sass, .scss, .styl — какое-то одно должно быть.

В идеале вёрстка должна соответствовать стандарту доступности: WCAG.

Доступность

Сайт корректно отображается в следующих браузерах: Firefox (последний), Chrome (последний), Safari (последний), iPhone (iOS 4.2 и 5.0, landscape, portrait) (не забыть указать правильный viewport)., Android 2.2 (не забыть указать правильный viewport)., Opera (последняя), IE7+, Opera Mini (последняя). Сайт корректно отображается во всех стандартных разрешениях от 1024 и выше, не иметь горизонтального скролла и вписываться в экран мобильных устройств. Сайт должен нормально отображаться: 1024x600; 1024x768; 1152x864; 1280x800; 1280x1024; 1440x900; 1680x1050; 1920x1080 У всех шрифтов, используемых на странице, прописаны стандартные Win/Mac/Linux-аналоги и общее семейство (serif, sans-serif, mono и т. д.). Все функции сайта доступны при отключенных (загружающихся) изображениях.

Надписи (особенно логотип и главное меню сайта) должны оставаться читабельными, у всех информационных картинок должны быть подписи аккуратным небольшим серым шрифтом (задавать font – это внешний вид alt-текста, что выводится вместо картинки).

Основные функции сайта доступны при выключенном JavaScript. Весь критически важный функционал сайта должен быть доступен без JS. Дополнительные фишки (например ссылки на увеличение шрифта или распечатку) – при выключенном JS не должны отображаться. Если не хочется/нет возможности реализовывать функционал без JS, нужно хотя-бы выводить уведомление о необходимости его включить (реализовывается через <noscript>). Работоспособность при выключенном Flash При увеличении шрифта (через настройки браузера или ОС) страницы не ломаются. Skype-плагин не ломает вёрстку. Ресайз textarea не ломает вёрстку.

Для проектов, где это оговорено, проверяется наличие:

Версии для печати (она должна быть реализована через css). Мобильной версии (таки тоже должна быть через css).

Контент

Вёрстка должна тянуться, не разваливаться и не терять дизайнерский вид при изменении контента на странице. Его может быть больше или меньше чем на макете, он может быть обёрнут во всякие <p> из  визига и т. п. Все поля, содержимое которых приходит из CMS проверены на работу с разным вариантом контента: короткий, длинный, длинный без переноса. Дизайн не разваливается при отсутствии необязательных полей. Для контент-зоны прописано оформление следующих HTML-тегов: H1-H6, ul, ol, li, blockquote, pre, table, p. Хорошо использовать html5-тэги для разметки: header, footer, aside, nav, section, article и т. д. Кроме того что это семантично, также повышается надёжность, «пуленепробиваемость» вёрстки. Лишний открытый или закрытый div легко может поломать вёрстку. Но когда каркас сайта — атомарные и редко повторяющиеся html5-тэги, то «поломка» локализуется в пределах html5-тэга.

Элементы страниц

Заголовки на странице образуют осмысленную иерархию (h1, h2, … и т. д.). У всех пиктограмм и элементов интерфейса, значение которых может быть не до конца очевидно есть title с подсказкой. У всех интерфейсных пиктограм и картинок в контент-зоне есть alt. У всех ссылок на странице прописаны состояния: hover, active, focus, visited. У Ссылок на чужие сайты указан target="_blank". У сайта прописан favicon. ico (желательно с включенными внутрь неё 32x32, 48x48 и 64Ч64 вариациями) и apple-touch-icon.

Формы

У полей формы задан правильный порядок переключения через tabindex. Поля label и input/select в форме слинкованы. Поля которые можно провалидировать через HTML5 — валидируются. HTML5 ошибки оформлены. Форма дополнительно валидируется через JS (проверяется в Opera/Safari/Chrome: включаем javascript, не заполняем форму, жмём Submit – должны появится уведомления о необходимости заполнить поля). Если проверяем frontend в целом — должна быть серверная валидация формы.
Проверяется в Firefox 3.6: выключаем javascript, не заполняем форму, жмём Submit – должны появится уведомления о необходимости заполнить поля Правильные input type=”email/url/tel”. Уведомления об ошибках должны быть не js-alert’ом, а текстом в дизайне сайта! Всё оформление в формах должно быть повешено на классы, id — только для линковки с label (a то потом программеры прикручивают, пишут свои id и ломается внешний вид).

Оптимизация скорости работы (PageSpeed Insights и GTMetrix)

Проверяется для standalone верстки:

Отдельные CSS-файлы объединены в два общих файла (для IE и остальных браузеров) и пожаты. Отдельные JS-файлы объединены и пожаты. jQuery и Modernizr грузятся с CDN Яндекса. Изображения обработаны инструментами для уменьшения их веса. Интерфейсные изображения объединены в спрайты. Декоративные изображения размером меньше 5 Kb включены в файлы стилей как base64.

Структура и наименование элементов

Стандарты наименования и расположения элементов

SEO

Проверяется для standalone верстки:

Правильная структура заголовков (H1,H2,… и т. д. и TITLE)
Это забота о семантичности кода, заголовки структурируют сайт, делают его корректным документом. Корректный Document Outline важен для SEO У всех страниц, которые не нужно индексировать (страницы CMS, поисковая выдача) прописан meta-тег “robots” со значением “noindex”. Контент на странице который не нужно индексировать обернут тегом <noindex>. Ссылки которые не нужно индексировать (например пользовательские разделы сайта) имеют аттрибут rel=”nofollow”. Для поддержваемых нами типов контета прописана микродата (смотри стандарт). Для автосайтов информация об автомобилях оформлена микроформатами hProduct и hReview.

Важные мелочи:

Лого на внутряках должно вести на титулку. На титулке logo = h1, на внутряках H1=заголовок контента, а Logo=div

У каждой страницы должен быть свой уникальный TITLE формата About Us — %CompanyName% Все страницы должны быть слинкованы и проверены на наличие битых ссылок. Все ссылки должны как-то реагировать на :hover, :active и :focus — показыванием/убиранием подчёркивания, сменой цвета, чем угодно. У всех ссылок, кроме пунктов меню, должна быть реакция на :visited Проверять что все интерактивные элементы страницы что должны работать — работают. «Контент в начале страницы» — содержимое страницы должно идти в начале кода, до всяких сайдбаров и прочего. Все созданные странички изначально должны быть порезаны на шаблоны, чтоб программеру было легче их интегрировать. Копирайт должен быть написан правильно (перенесен). Должны быть favicon. ico (желательно с включенными внутрь неё 32Ч32, 48Ч48 и 64Ч64 вариациями) и apple-touch-icon В вёрстке не должны оставаться закомментированные «на всякий случай» куски кода, лишние неиспользуемые файлы, старые версии файлов и т. п. Все бекапы можно вытянуть из системы контроля версий (например Git или SVN), а на живом проекте «мусор» потом мешает разобраться как что работает. Размеры для блоков, чьи размеры зависят от содержащегося в них текста, нужно задавать в em, а не px. Если url ссылки неизвестен, то он должен быть равен её анкору, написанному латиницей с заменой пробелов/спецсимволов на тире. Skype-плагин не должен ломать вёрстку Ресайз textarea не должен ломать вёрстку При проверке frontend в целом — 404-страница должна отдаваться с кодом 404 а не 200. Ссылки на чужие сайты должны быть с target="blank", желательно выделять их иконкой «внешняя ссылка». Разумеется картинки должны быть в отдельной папке, css — в отдельной и js — в отдельной. Графика, не являющаяся частью дизайна (всякие илююстрации, фото в новостях и т. д.) — нужно положить в отдельную папку, например userfiles. Изображения должны масштабироваться в зависимости от размера окна (max-width:100%; height:auto;)