Как понять, что верстальщик справился с поставленными задачами. Шпаргалка для заказчика, как проверить верстку.
Из статьи вы узнаете:
- как визуально оценить качество верстки и соответствие техническому заданию (ТЗ);
- как проанализировать адаптацию сайта под мобильные устройства;
- на какие технические моменты обращать внимание;
- что учесть при оценке верстки контента и уровня оптимизации.
Мы продолжаем делиться чек-листами по оценке качества работы 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.
Рекомендуем почитать
5 Оптимизация скорости работы
- Используется сжатие текста GZIP.
- Изображения сжаты для уменьшения их веса.
- Настроено кэширование.
- Используется «ленивая загрузка» изображений, скриптов и CSS.
- При проверке на Google PageSpeed сайт набирает не менее 90 баллов (для мобайла и десктопа).
Рекомендуем почитать
Скорость загрузки страницы: метрики, инструменты и способы повышения
После того как сайт готов, самое время переходить к привлечению посетителей из Яндекса и Google. Вот бесплатный видеокурс по SEO, который поможет разобраться, что к чему. Если же вы захотите прокачаться в поисковом продвижении, записывайтесь на интенсивы по SEO. Через 8 занятий вы сможете самостоятельно запустить SEO и получать клиентов из поиска.