Чек-лист: как проверить верстку

Как понять, что верстальщик справился с поставленными задачами. Шпаргалка для заказчика, как проверить верстку.

Из статьи вы узнаете:

  • как визуально оценить качество верстки и соответствие техническому заданию (ТЗ);
  • как проанализировать адаптацию сайта под мобильные устройства;
  • на какие технические моменты обращать внимание;
  • что учесть при оценке верстки контента и уровня оптимизации.

Мы продолжаем делиться чек-листами по оценке качества работы digital-специалистов: веб-разработчика, UX/UI-дизайнера, контент-менеджера и других. В помощь заказчикам услуг предлагаем очередную шпаргалку — чек-лист, чтобы проверить верстку и работу верстальщика. Этот чек-лист вы можете использовать и для составления ТЗ для специалиста по верстке — так вы не упустите важные моменты.

Верстальщик «переводит» визуальные PSD-макеты страниц в код HTML и CSS. Он выступает связующим звеном между дизайнером и веб-разработчиком. Владельцы бизнеса и маркетологи чаще всего обращаются к верстальщикам за такими услугами:

  • создание шаблона с нуля;
  • доработка/изменение шаблона;
  • размещение контента на страницах сайта (текст, статьи, изображения, видео);
  • устранение проблем с версткой (техподдержка).

После того как работа готова, нужно понять, насколько качественно она сделана. Начинать проверку верстки стоит по ряду направлений.

1 Проверить визуальную составляющую верстки

  • Страница визуально соответствует макету и требованиям ТЗ, все элементы находятся на своих местах.
  • Размеры элементов и блоков на странице соответствуют указанным в макете. Проверка с помощью расширений для Google Chrome PerfectPixel или 1px.
  • Элементы одного типа (например, абзацы или иконки) имеют корректное вертикальное и, где необходимо, горизонтальное выравнивание по линиям сетки. Простая проверка — сделать скриншот страницы и наложить в любом графическом редакторе линии сетки.
  • Отступы между элементами одного и того же типа (например, между карточками товаров в каталоге) одинаковые.
  • При изменении масштаба страницы в пределах 65-140 % нет существенных проблем в верстке.

2 Проверить адаптацию верстки под устройства с различным разрешением

  • Верстка корректно отображается на устройствах с различным разрешением при вертикальном и горизонтальном просмотре: не появляется горизонтальная прокрутка, блоки не накладываются друг на друга и не «плывут». Проверка с помощью сервиса Screenfly.
  • Страница проходит тесты на пригодность для мобильных устройств от Яндекса и Google. Пункт стоит проверять, если данное требование было указано в ТЗ.
  • Страница корректно отображается при открытии на разных платформах и в разных браузерах. Можно проверить вручную на самых популярных браузерах: IE, Chrome, Firefox, Opera, Safari, Edge. Специальные сервисы для проверки: Browsershots делает скриншоты страницы с более чем 115 версий браузеров, Browserling позволяет просмотреть сайт с выбранного браузера и операционной системы в режиме эмуляции.

3 Проверить техническую составляющую верстки

  • Основные функции страницы доступны при отключенных изображениях, JavaScript и Flash.
  • Контент страницы правильно отображается при включенном блокировщике рекламы.
  • Код HTML не имеет ошибок при проверке с помощью validator.w3.org. Предупреждения могут быть, но верстальщик должен объяснить, почему они появились.
  • Нет ошибок в синтаксисе CSS при проверке на jigsaw.w3.org.
  • Код JavaScript не содержит ошибок в codebeautify.org.
  • На сайте используется кодировка UTF-8. Проверка с помощью last-modified.com, поле Content-Type.
  • Файлы CSS в разделе head подключены до файлов JavaScript.
  • Стили CSS прописаны в отдельном файле. Определения стилей с помощью тега <style> или инлайн CSS нужно избегать.
  • Код CSS, HTML и JavaScript оптимизирован — удалены лишние пробелы, рабочие комментарии верстальщика и т. п.
  • Микроразметка не содержит ошибок при проверке в валидаторе Google и валидаторе Яндекса.
  • При вводе неправильного URL появляется страница ошибки 404.

Рекомендуем почитать

Оптимизируем сайт: технический аспект

4 Проверить содержимое страниц и SEO

  • Прописаны стили для основных элементов оформления контента: заголовков H1-H6, списков (ul, ol, li), цитат (blockquote), таблиц (table), абзацев (p).
  • При изменении разрешения экрана текст корректно переносится, не выходит за рамки текстового поля.
  • Таблицы имеют резиновую верстку (если это требование было указано в ТЗ на верстку) — при изменении ширины экрана контент в таблицах читабельный.
  • Формы работают корректно. Активные, правильно и неправильно заполненные поля форм подсвечиваются разными цветами. Есть подсказки для правильного заполнения.
  • Страницы протестированы в программе чтения с экрана (например, JAWS, VoiceOver или NVDA).
  • Для изображений прописаны заголовки title и атрибуты alt.
  • Для каждой страницы указан заголовок title и описание description (или предусмотрены поля для них).
  • На страницах отсутствуют нерабочие ссылки. Проверка с помощью программы Xenu’s Link Sleuth.

Рекомендуем почитать

Как и где научиться SEO: гайд по саморазвитию

5 Оптимизация скорости работы

  • Используется сжатие текста GZIP.
  • Изображения сжаты для уменьшения их веса.
  • Настроено кэширование.
  • Используется «ленивая загрузка» изображений, скриптов и CSS.
  • При проверке на Google PageSpeed сайт набирает не менее 90 баллов (для мобайла и десктопа).

Рекомендуем почитать

Скорость загрузки страницы: метрики, инструменты и способы повышения

После того как сайт готов, самое время переходить к привлечению посетителей из Яндекса и Google. Вот бесплатный видеокурс по SEO, который поможет разобраться, что к чему. Если же вы захотите прокачаться в поисковом продвижении, записывайтесь на интенсивы по SEO. Через 8 занятий вы сможете самостоятельно запустить SEO и получать клиентов из поиска.

Профессиональный инструмент
для создания продающих виджетов
Вы выбираете площадки для рекламы
Повышение продаж с
сайта в 2 клика