Критерии качества — основной документ на который опирается разработка интерфейсов. В совокупности эти критерии дают необходимое удобство проверки и дальнейшего использования, обеспечивают качество и скорость загрузки страниц. За основу документа взяты принципы, собранные в течение многих лет опыта разработки, а также требования качества, предъявляемые клиентами.
Большинство описанных критериев не имеют двойной трактовки, однако так же будут критерии, в которых есть возможность выбрать тот или иной вариант.
Документ живёт вместе с развитием индустрии, а значит со временем критерии качества могут меняться и модифицироваться.
[ ] 1.1. В разметке отсутствуют грубые ошибки:
<a>, а другими тегами;<p>, а <div>, <span> или с помощью <br>.[ ] 1.2. Разметка сайта валидна относительно https://validator.w3.org/
Валидным считается конечный код из папки build, так как в исходниках могут быть конструкции, которые не валидны и становятся валидными после сборки. При этом в валидаторе допускаются невалидные конструкции, которые генерируются сторонними ресурсами, например интерактивными картами или внешними формами сервисов.
[ ] 1.3. В разметке строго соблюдается иерархия заголовков.
Если нет прямого указания на использования в том или ином месте заголовков необходимого уровня, расставляются на усмотрение верстальщика, при этом соблюдая иерархию. Заголовок 1 уровня может не участвовать в иерархии, но должен быть как можно выше. Остальные заголовки вкладываются друг в друга, у них нет пропущенных уровней. Для проверки используется простой генератор дерева.
[ ] 1.4. В разметке отсутствует дублирование кода для одного и того же элемента
с помощью которых элемент отображается в разных местах страницы на разных версиях: мобильной, десктопной, планшетной. Этот критерий не касается элементов, которые скрываются или показываются в разных версиях.
[ ] 1.5. В разметке используется методология БЭМ как система именования.
Для разделения блок и элемента, используется ‘__‘ (двойное нижнее подчёркивание), а для модификаторов ‘╌‘ (двойной дефис). При этом нет стандартных ошибок методологии, таких как использование модификаторов, без блока, который он модифицирует, или использование элементов внутри других блоков.
[ ] 1.6. Весь текстовый контент на сайте прогоняется через типограф.
При переносе контента из макетов, текст прогоняется через типограф, чтобы избавиться от висячих предлогов, неправильных дефисов и так далее. Для типографии используются общедоступные типографы и плагины для текстовых редакторов.
[ ] 1.7 Выполняется HTML-разметка всех страниц проекта и всех элементов на этих страницах.
Скрытые и дополнительные элементы должны быть размечены: всплывающие и появляющиеся элементы, модальные окна, все слайды в слайдере
[ ] 1.8. На всех телефонных номерах и email-адресах стоят атрибуты tel: и mailto:.
[ ] 1.9. Названия полей форм привязаны к своим полям с помощью <label>.
[ ] 2.1. При стилизации исправляются огрехи дизайн-макета с разными отступами между одинаковыми элементами
Если одинаковые элементы на разных страницах выполнены по разному или имеют разные отступы, то они универсализируются и проводятся к одному виду. Если по макету не понятно, что именно верный вариант, то он уточняется у клиента.
[ ] 2.2 Для организации стилей используется методология БЭМ.
В исходниках каждый БЭМ-блок это отдельный стилевой файл. Блоки независимы друг от друга и могут перемещаться между страницами. Если используется один файл .css блоки разбиваются комментариями на секции.
[ ] 2.3. Стилизация контентных областей выполнена через каскад
Если на сайте есть контентные области, которые наполняются через визуальный текстовый редактор, их стилизация делается без классов, а реализуется каскадом, от родительского блока. В случае, если блоки внутри текстовой области одним каскадом не стилизовать, используются классы, которые модифицируют контентные блоки.
[ ] 2.4. Раскладка блоков на странице реализуется с помощью флексбоксов и/или гридов.
Использование тега <table>, float: left и блоков с абсолютным позиционированием недопустимо. Но не запрещается:
[ ] 2.5. Никакой текстовый контент сайта не зашивается в CSS.
Все тексты хранятся в разметке или атрибутах, чтобы их можно было в будущем легко редактировать через админку.
[ ] 2.6. Для всех элементов, с которыми есть взаимодействие добавляется анимация по наведению.
Интерфейс должен откликаться, поэтому даже если не предоставлен UI-кит, то верстальщик добавляет на своё усмотрение. Если кит есть, то добавляется только плавность смены состояний. Также добавляется курсор лапка на элементы, на которые можно нажать.