В последние годы в верстке интерфейсов произошло много перемен и нововведений. В продакшне появились флексбоксы и Grid, вместо Photoshop популярность набрала Figma. Все это влияло на формирование требований, предъявляемых к вёрстке интерфейсов.
Каких задач касаются критерии
Данные требования затрагивают только задачи, связанные со статической вёрсткой без адаптивности.
Как работает система требований
Ученик курса выполняет вёрстку макета. В конце курса случайно выбранный наставник проводит оценку его работы по установленным критериям. Успешной защита бывает в том случае, если соблюдены все обязательные критерии. Кроме обязательных, существуют и добавочные требования, которые не учитываются при защите. Они нужны для того, чтобы ученик понял, как он может сделать свою работу лучше.
Кроссбраузерность
Оцениваются величина и размещение блоков, схожесть с макетом.
Проверяется правильная работа анимации (при ее наличии).
Отображение шрифта может немного отличаться.
В последних версиях браузеров Chrome, Firefox, Safari вёрстка должна оставаться одинаковой.
Используемые технологии
Работа должна выполняться при помощи HTML и CSS. Не допускается применение других библиотек и платформ.
Величина страницы
Все страницы обладают минимальной шириной по фрейму. Если окно шире данной величины, страница центрируется.
Горизонтальное прокручивание возникает, только когда ширина окна меньше, чем минимальная ширина страницы.
Переполнение
- Длина текста. Текст при переполнении остается в родительском блоке, не обрезается, не выступает и не смещает другие блоки. Слова минимальной ширины переносятся.
- Размеры элементов. Элементы с размером больше, чем ширина родительского блока, не выступают, не смещают остальные блоки и не нарушают сетку.
- Количество элементов. Если элементов становится больше, они не выступают за пределы родителя. При уменьшении родительского блока элементы могут быть перенесены на следующую строчку. При минимуме элементов родитель должен сохранять наименьший размер.
Параметры текста
Шрифты должны соответствовать следующим критериям:
- Семейство font-family;
- Насыщенность текста font-weight;
- Начертание font-style;
- Размер font-size;
- Высота строчки line-height;
- Цвет шрифта color.
Pixel Perfect
Возможны следующие различия элементов от макета:
- В 5 пикселей по высоте при величинах более 30 пикселей и 2 пикселя по ширине.
- В отображении текста, связанные с изменением на разных фреймворках.
Style Guide
Состояния элементов в макете должны быть такими же, как в стайлгайде. Если в нем не указаны эти данные, то их можно установить произвольно.
Взаимодействие
При наведении либо нажатии на элемент блоки не должны менять своего расположения, если это не указано в макете.
Кодгайд
Код проекта должен быть создан по нормам кодгайда.
Названия
Имена файлов, папок, классов и атрибутов представлять собой английские слова.
Названия папок и файлов необходимо записать строчными буквами без пробелов.
Закомментированный код
В работе не допускаются закомментированные элементы кода без текстовых пояснений.
Неиспользуемые файлы
В работе не допускаются следующие файлы:
- Неподключённые файлы
- Подключённые, но бесполезные файлы.
Файлы svg, заинлайненные в разметку, допускаются в папке проекта.
Ориентиры
Если на странице присутствуют ориентиры, они должны быть обозначены:
- <header> для вводной части, которая повторяется на последующих страницах;
- <main> для не повторяющихся элементов;
- <nav> для содержимого навигации;
- <aside> для дополнительных элементов;
- <footer> для дополнительной информации.
Структура заголовков
Обязательно должен присутствовать заголовок <h1>. Последующие уровни заголовков должны идти по убывающей без пропусков.
Исключения допускаются для <article>, так как в нем может быть своя структура подзаголовков.
Кнопки и ссылки
Ссылки применяются для перехода на другую страницу, а кнопки предназначены для перемещений и других действий на одной странице.
Ссылки, перемещающие на себя, могут не иметь атрибута.
Для ссылок с неизвестным адресом можно применяется атрибут href="#".
Кнопки должны иметь тип действия в атрибуте type.
Формы и поля
Формы должны правильно работать и отсылать информацию всех полей. Поля располагаются внутри тега <form>. Формы должны иметь атрибут action, обязательные поля - required.
Подписи полей необходимо привязать к их полям.
Лишние обертки элементы
В вёрстке не допускается лишнее содержимое, которые можно заменить на псевдоэлементы.
Валидация HTML
Работа должна пройти процесс валидации без ошибок. Допускаются предупреждения.
Favicon
Все страницы должны иметь иконки, подсоединенные с помощью <link rel="icon">.
В корне работы должен присутствовать файл favicon.ico
Фавиконка должны иметь величину 32×32 и формат PNG.
Стили
Все файлы стилей подсоединяются тегом <link rel="stylesheet">.
Собственные стили подключаются общим файлом в <head>, сторонние – этим же тегом, но разными файлами. Сторонние стили подсоединяются до собственных.
В разметке не допускаются инлайновые стили в атрибуте style="" и теге <style>, а также стили для показа поведения JS.
Универсальный селектор
Он не допустим, за исключением следующих случаев:
- Регуляция тега <img>.
- Собственные теги работы: <html> и <body>.
- :root, в котором применяются только кастомные свойства.
Применение ключевого слова
Использование ключевого слова !important не допускается для устранения специфичности.
Применение шрифтов
Вид шрифтов, подсоединенных с использованием @font-face, должен изменятся при помощи font-weight и font-style. Не допускается его изменение при подключении другого семейства.
Графика
Контентная графика вставляется в разметке, декоративная - в стилях.
Декоративная SVG-графика может добавляться в разметке, если её необходимо изменить стилями.
Формат изображений
- JPEG - фото;
- SVG - векторная графика;
- PNG -остальное.
Размеры изображений
Графика, размеченная тегами <img> и <svg>, должна иметь размеры, заданные width и height.
Перенос текста
Не допускаются переносы двойным тегом <br>.
Описание изображений
Контентные графические элементы должны обладать описанием. Есть 3 способа добавить его в дерево доступности:
- Добавить графике alt;
- Вставить скрытую надпись атрибутом visually-hidden;
- Использовать атрибут aria-label.
Описание должно иметь точку в конце.
Описание интерактивных элементов
Данные элементы, как и графика, должны иметь подпись. Она связывается с элементом и показывается на дереве доступности.
Добавляется подпись тегом с классом visually-hidden либо при помощи атрибута alt, и только в конце— aria-атрибутами.
Подпись заканчивается точкой.
Видимое состояние контента
Все элементы должны иметь отображаемое состояние фокуса. Если иное не указано в макете, элементы должны иметь браузерный фокус
Области элементов
В область входят тексты, значки и прочие части. Она не должна перекрывать остальные элементы.
Зона клика может быть больше, чем наполнение элемента, но она не должна перекрывать прочий контент.
Фон изображений
Блок, имеющий надпись на фоновой картинке, должен обладать фоновый цвет – таким же, как главный цвет картинки.
Порядок фокуса
На интерактивных элементах он не должен меняться из-за стилей.
Все файлы стилей подсоединяются тегом <link rel="stylesheet">.
Собственные стили подключаются общим файлом в <head>, сторонние – этим же тегом, но разными файлами. Сторонние стили подсоединяются до собственных.
В разметке не допускаются инлайновые стили в атрибуте style="" и теге <style>, а также стили для показа поведения JS.
