Верстка сайта

Как убедиться, что работа выполнена качественно? Как оценить качество вёрстки сайта? На самом деле, ответы на эти вопросы безумно просты и элементарны, ваша задача - всего лишь обратиться за помощью к нашему чек-листу по грамотной и эффективной верстке.

0%
Проверить страницу на переполнение контентом #
Введите в консоль браузера команду: document.body.contentEditable = true
Проверить БЭМ-разметку
Порядок объявления CSS
Объявления логически связанных свойств должны быть сгруппированы в следующем порядке: Позиционирование Блочная модель и размеры Текстовые свойства Отображение Остальное Плавные переходы, анимация

Предварительная проверка

Соблюдение пропорций макета
Расположение блоков должно быть 1:1 по сравнению с макетом. Допускается расхождение до 5px для текста. Разрешены и даже приветствуются правки размеров и расположения криво нарисованных блоков (разница размерах в 1-2px на разных страницах).
Проверить кроссбраузерность
Проверить валидность
CSSLint и JSHint
Уточнить независимость блоков в CSS: минимизация каскада
Проверяется в FF через плагин addon Firebug. При наведении на любой блок, в его стилях не должно быть множество перечёркнутых правил.
Оптимизировать визуализацию сайта
Сайт должен нормально смотреться во всех стандартных разрешениях от 1024 и выше, не иметь горизонтального скролла и вписываться в экран мобильных устройств.
Перепроверить порядок верстки
Вёрстка должна тянутся, не разваливаться и не терять дизайнерский вид при изменении контента на странице. Его может быть больше или меньше чем на макете, он может быть обёрнут во всякие из визига и т.п. Обязательно нужно проверять удаление заголовков!
Сохранить доступность при выключенных(загружающихся) картинках
Надписи (особенно логотип и главное меню сайта) должны оставаться читабельными, у всех информационных картинок должны быть подписи аккуратным небольшим серым шрифтом (да, для img можно задавать font – это внешний вид alt-текста, что выводится вместо картинки)
Слинковать Label и input/select
Это нужно для удобства юзеров. Также это очень облегчает жизнь пользователям с ограниченными физическими возможностями. Проверяется кликом по label – должен активироваться соответствующий ему элемент ввода.
Точность в input type=”email/url/tel”.
Пока-что практическая ценность для пользователя лишь в том, что на iPhone будет показываться клавиатура соответствующая формату поля ввода. Проверяется на iPhone — в зависимости от типа поля ввода он должен показывать различную клавиатуру: стандартную/цифровую/для набора web/email-адресов.
Убедиться в работоспособности при выключенном JavaScript
JS может быть выключен согласно корпоративных требований безопасности. А в Opera Mini он работает только методом перезагрузки страницы. Но самое главное — сайт должен сохранять нормальный вид, пока он грузится на медленном 3G и js-скрипты ещё не выполнились!
Проверить работоспособность при выключенном Flash
Flash не работает на iOS-девайсах. Flash плохо индексируется поисковиками. Проверяется в FF отключением flash-плагина: Tools→Add-ons→Plugins→Shockwave Flash→disable.
Отсутствие багов при увеличенном шрифте
Проверяется в FF: Шрифты – включением View→Zoom→Zoom Text Only и последовательным нажатие клавиш Ctrl + — (или View→Zoom→Zoom In). -120 dpi – настраивается отдельным апплетом в Control Panel (Vista/Seven) или в свойствах драйвера видеокарты в XP.
Обратить внимание на важные мелочи
-Лого на внутряках должно вести на титулку. На титулке logo = h1, на внутряках H1=заголовок контента, а Logo=div; -Проверять что все интерактивные элементы страницы что должны работать - работают; -В вёрстке не должны оставаться закомментированные «на всякий случай» куски кода, лишние файлы и т.д.

Head

Мета-теги
Doctype: указывает на версию HTML-файла и находится в самом начале страницы. В Doctype должна быть указана пятая версия HTML. !doctype html
Charset: кодировка документа — UTF-8.
meta charset="utf-8"
X-UA-Compatible: управляет отображением страницы в Internet Explorer, поэтому его необходимо задать.
meta http-equiv="x-ua-compatible" content="ie=edge" a href="https://msdn.microsoft.com/en-us/library/jj676915%28v=vs.85%29.aspx"
Viewport: мета-тег Viewport задан правильно.
meta name="viewport" content="width=device-width, initial-s cale=1"
Title: тег Title используется на всех страницах.
Google вычисляет длину заголовка, и обрезает в выдаче те, которые больше 472 пикселей. Оптимальная длина для заголовка — около 55 символов.
Description: описание сайта внутри тега является уникальным и не превышает 150-и символов.
Favicon. link rel="icon" type="image/x-icon" href="https://example.com/favicon.ico"

HTML-теги

Атрибут lang: должен указывать язык текущей HTML-страницы.
html lang="ru"
Direction: направление текста задано в специальном HTML-теге
html dir="rtl"
Переадресация на страницу с другим языком: значение атрибута rel установлено как alternate
link rel="alternate" href="https://es.example.com/" hreflang="es"
Условные комментарии для Internet Explorer: задаются (если необходимы)
!–[if IE]> Код для браузера Internet Explorer

HTML

Семантические элементы HTML5: элементы HTML5 используются надлежащим образом (header, section, footer, main…).
Комментарии: перед публикацией страницы убедитесь, что удалили все комментарии и ненужный код.

Тестирование HTML-верстки

W3C-валидатор: все страницы сайта необходимо протестировать валидатором на сайте W3C. Он поможет найти незамеченные ошибки в HTML-коде.
Оформление HTML-кода: чтобы поправить недочеты в коде и сократить его размер, воспользуйтесь специальным сервисом.
Проверка ссылок на странице: все ссылки рабочие и не выдают 404 ошибку при переходе
Формат подключенного шрифта: форматы WOFF, WOFF2 and TTF поддерживаются всеми современными браузерами.
Вес шрифта: не превышает 2-х Мб.

Тестирование CSS

Адаптивный дизайн: верстка на сайте адаптивная.
страницы сайта протестированы для разрешений: 320 px, 768 px, 1024 px (можно проверить и на других разрешениях в зависимости от цели сайта).
Печать с помощью CSS: таблицы печати настроены корректно для каждой страницы.
Уникальные ID: идентификаторы на странице не повторяются.
JS-префиксы: все классы или id, используемые в JS, начинаются с js- и не используются для задания стилей через CSS.

Оптимизация

Объединение CSS-файлов: все файлы CSS объединены в один файл. (Не подходит для HTTP/2).
Оптимизация: все CSS-файлы сжаты.
Неиспользуемый CSS-код: весь лишний код удален

Изображения

Оптимизация: Все изображения оптимизированы для отображения в браузере. Формат WebP можно использовать на важных страницах, например, на главной.
Спрайт-файл: маленькие картинки на сайте объединены в один спрайт-файл. Если это иконки, то их можно объединить в спрайт-картинку SVG формата.
Ширина и высота: если заранее известны нужные размеры изображения, то ширина и высота должна быть задана в атрибуте img.
Описание изображения: все картинки img должны быть описаны словами в атрибуте alt.

JavaScript

JavaScript-код отдельными файлами: в HTML-документе не должно быть встроенного JS-кода. Лучше просто указать ссылку на файл с кодом.
Объединение: JavaScript-файлы объединены в один.
Оптимизация: все JavaScript-файлы минимизированы (можно добавить суффикс .min к названию).

Производительность

Вес страницы: каждая страница весит до 500 Кб.
Оптимизация: HTML-код минимизирован.
Отложенная загрузка элементов (Lazy loading): изображения, скрипты и CSS-стили загружаются по мере пролистывания страницы

Заголовки

H1: на всех страницах присутствует заголовок H1, который отличается от названия сайта, заданного в title.
Заголовки
заголовки использованы в правильном порядке — от H1 до H6.

Landmarks

Role banner: для тега Header указан атрибут role=«banner».
Role navigation: для Nav — атрибут role=«navigation».
Role main: для Main указан атрибут role=«main».

Формы

Label: связан с каждым отдельным input-ом в элементах формы. Если label не может быть отображен, нужно использовать aria-label.

Смотрите другие чек-листы в категории "Интернет и Коммуникации"



Комментарии для сайта Cackle


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