HTML-код
Проверка валидности, семантики, кодировки и т.д.
- Обязательно указывайте DOCTYPE. Актуальный — <!DOCTYPE html>
- Проверяйте верстку валидаторами HTML и CSS. Актуальный валидатор
- Верно заполняйте title сайта, это влияет на поисковую выдачу.
- Делайте семантическую верстку — верно используйте теги h1-h6, header, footer, section, article, nav и пр.
- Используйте только один h1 на одной странице.
- Не забывайте указывать верную кодировку страницы (UTF-8).
- Указывайте верный атрибут lang для страницы.
- Называйте классы исключительно по назначению элемента title, product, а не по внешнему виду big, red
- При верстке используйте только селекторы по классу (исключение — текстовый контент, который потом будет «натягиваться» на CMS).
- Удаляйте любые комментарии из html, они лишние.
- Любые интерактивные элементы должны работать (переход по ссылке, открытие модального окна и т.д.).
- Не верстайте декоративные элементы в html. Для этого существуют псевдоэлементы.
- Соблюдайте правила кодстайла html, css, js, вплоть до порядка свойств.
- Связывайте лейблы (подписи полей) и инпуты
- Для телефона и email используйте ссылку со специальными значениями — :tel и :mailto
CSS-код
Современные технологии, минимализм в коде, БЭМ.
- Используйте БЭМ или аналоги даже на небольших проектах. Это позволит верстать быстрее и надежнее.
- Как следствие из правила выше — полностью откажитесь от каскада, кроме случаев, когда нужно стилизовать натягиваемый на CMS текст.
- Используйте современные технологии (не используем float, работаем с flexbox). Если поддержка браузеров позволяет — используйте CSS Grid.
- Соблюдайте рекомендации по организации отступов в верстке. Это поможет избежать непредвиденных отступов при изменении вашей верстки.
- Не используйте сброс стилей. Пользуйтесь normalize.css и корректным сбросом box-sizing.
- Мелкие различия в одинаковых элементах реализуйте засчет модификаторов в БЭМ.
JS (jQuery)-код
Отсутствие ошибок, корректная работа всего функционала и т.д.
- Не используйте прямое изменение стилей через JS, пользуйтесь сменой классов (только если функционал будет работать и без смены стилей).
- Удаляйте все console.log() из кода.
- Используйте функции для грамотного разделения логики вашего приложения.
- Используйте подход DRY (Don`t repeat yourself) — то есть не повторяйте одинаковый код.
Доступность
Удобная работа с клавиатуры, «прослушиваемый» интерфейс.
- Делайте интерфейс сайта доступным только с клавиатуры, без мышки.
- Тестируйте сайт с помощью скринридера (NVDA, VoiceOver).
- Обязательно указывайте alt для картинок по смыслу.
- Указывайте aria-атрибуты для реализации доступности (например, атрибут aria-label для интерактивных элементов без описания).
- Управляйте фокусом внутри сайта. Например, при открытии модального окна, фокус должен находиться только в нем.
Общие требования
Общие требования по юзабилити и проекту
- Правильно организуйте структуру папки: все стили в папку css, скрипты в js и т.д.
- Делайте логотип ссылкой. На главной странице сайта у логотипа не нужно указывать href.
- Обязательно добавляйте состояния :hover, :active, :focus
- Используйте cursor: pointer для интерактивных элементов.
- Добавляйте favicon на страницу.
- Для ссылок на внешние ресурсы указывайте target=»_blank»
- «Типографьте» и «Орфографьте» текст с помощью Типографа и Орфографа.
- Оптимизируйте скорость загрузки сайта (сжатие, конкатенация и т.д.).
- Делайте подписи в формах для всех полей (или placeholder), а также корректные обозначения ошибок при неверном вводе.
- При отправке данных асинхронно предусмотрите ответы при ошибке и успешной отправке.
- Если изображений на странице много — используйте lazyload.
Внешний вид
Требования по внешнему виду вашей верстки
- Соблюдайте соответствие макету. Если заказчик требует Pixel Perfect — расхождение с макетом не должно быть более 3х пикселей. Проверять Pixel Perfect удобно через расширение
- Делайте верстку кроссбраузерной. Сайт должен выглядеть идентично в браузерах Chrome, Opera, Safari, Edge, Firefox (при особых требованиях — и в IE11).
- Тестируйте свою верстку на переполнение как текстом, так и новыми блоками.
Адаптивная верстка
Требования к отображению на разных размерах.
- Делайте ваши сайты аккуратными и доступными для пользователя на любой ширине устройства от 320 и выше.
- По возможности используйте только безопасные брейкпоинты.
- Делайте изображения адаптивными: {max-width:100%; height:auto;}
- Проверяйте вашу верстку на пригодность с помощью теста.