Критерии вёрстки

Это пример описания для Чек-листа. Тут обычно пишут - зачем был создан этот чек-лист и какую пользу он может принести

1. Разметка

1.1 Грубые ошибки в разметке отсутствуют.

Ссылки сделаны не тегом , а другими тегами; Использование строчных элементов для создания крупных (сеточных) блоков; Абзацы сделаны не тегами , а , или с помощью .

1.2 Разметка сайта должна быть валидна относительно.

https://validator.w3.org/

1.3 В разметке строго соблюдается иерархия заголовков.

1.4 В разметке отсутстует дублирование кода для одного и того же элемента, с помощью которых элемент отображается в разных местах страницы на разных версиях: мобильной, десктопной, планшетной. Этот критерий не касается элементов, которые скрываются или показы

1.5 В разметке используется методология БЭМ как система именования.

Отсутствуют типовые ошибки по методологии: Создание элемента без родительского блока; Создание элемента для элемента; Создание модификатора для модификатора; Использование модификатора без блока или элемента, который он модифицирует (при использовании модификатора у тега должно быть, как минимум два класса: класс блока/элемента и класс модификатора)

1.6 Названия полей форм привязаны к своим полям с помощью .

1.7 Весь текстовый контент на сайте прогнан через типограф.

1.8 На всех телефонных номерах и email стоят атрибуты tel: и mailto:.

1.9 Выполнена HTML-разметка всех страниц проекта и всех элементов на этих страницах.

2. Стили

2.1 Раскладка блоков на странице сделана с помощью флексбоксов и/или гридов.

Использование тега , float: left и блоков с абсолютным позиционированием недопустимо. Использовать табличную раскладку блоков с применением свойств display: table, display: table-row, display: table-cell не запрещено. Позиционирование с помощью position: absolute для декоративных элементов и модалньых окон не запрещено.

2.2 В CSS отсутствует !important.

2.3 Подключены правильные шрифты, их размеры, цвет и толщина равны соответствующим параметрам в макетах и техническом задании.

2.4 Шрифты подключены в CSS локально из папки fonts с помощью правила @font-face. Подключаемые шрифты должны быть в форматах woff2 и woff. Порядок подключения файлов: сначала woff2, потом woff.

2.5 Указаны альтернативные варианты шрифта и тип семейства в конце перечисления font-family

2.6 Вёрстка проходит тестирование переполнением контента.

2.7 По умолчанию поддерживаются 5 последних версий стабильных браузеров Chrome, Mozilla, Opera, Safari и Edge Chromium. А также стабильные версии мобильных браузеров.

Вёрстка идентично отображается в последних версиях браузеров. Проверяются размеры и расположение блоков, внешние сходство с макетом.

2.8 Никакой текстовый контент сайта не зашивается в CSS.

Все тексты хранятся в разметке или атрибутах, чтобы их можно было легко редактировать через админку.

2.9 Для всех элементов, с которыми есть взаимодействие предусмотренна анимация по наведению.

Даже если не предоставлен UI-кит, реализуется на своё усмотрение (например opacity: 0.7). Если кит есть, то мы добавляем только плавность. Добавляется курсор лапка на элементы, на которые можно нажать.

2.10 Обводка ховеров по умолчанию не отключенна, или меняется на предоставленной в дизайне.

3. Адаптивность

3.1 Для адаптива используется резина с перестроением на контрольных точках.

Резина — это принцип при котором на сайте есть резиновая сетка и максимальная ширина. При достижении максимальной ширины, блоки центруются и не увеличиваются. При уменьшении экрана блоки сужаются по ширине, а при достижении контрольной точки перестраиваются иным образом.

3.2 Выполнена вёрстка трёх состояний каждой страницы: мобильной, планшетной и десктопной. Все элементы продолжают распологаться по сетке, заданной в макете; Блоки не выпадают из родителей и из общего центрирующего блока.

Сетка в промежутках между основными точками может быть фиксированной или резиновой. Важно: вне указанных точек вёрстка не должна «разваливаться»:

3.3 В разметке есть правильный вьюпорт тег

4. Скрипты и функционал

4.1 Для реализации скриптов используется нативный JavaScript если иное не указано или не согласовано.

4.2 Реализованы все визуальные компоненты, на которых не завязана работа с данными.

Модальные окна, табы, слайдеры, смена контента и так далее

4.3 Все формы по умолчанию имеют базовую валидацию и маски для телефонов и ввода email.

4.4 Модальные окна закрываются по клику оверлей и на клавишу ESC.

4.5 Перемещение блоков со скриптами и скриптов между страницами не ломает работу остальных скриптов.

Для этого скрипты подключаются ко всем страницам в одинаковом виде.

4.6 Если мобильное меню полностью перекрывает HTML-страницу, то HTML-страница под ним не должна как-либо взаимодействовать с пользователем (скроллинг, весь интерактив и т.д.)

Модальное окно или оверлей, это блокировка. При блокировке фокус пользователя должен быть на содержимое попапа, для этого всё что под ним, не должно никак отвлекать.

5. Графика

5.1 Выполнена ретинизация всей контентной растровой графики.

После того как все проверю по чек-листу, нужно сесть "на дорожку" на диван и посидеть пару минут. Говорят это хорошая примета))). И в путь!

Критерии вёрстки

1. Разметка

2. Стили

3. Адаптивность

4. Скрипты и функционал

5. Графика

Автор: скрыт

Смотрите другие чек-листы в категории "Обучение и Преподавание"

Чек-лист | ЭкспертЧек-лист | Эксперт - создайте чек-лист онлайн, бесплатно!