Верстальщик «переводит» визуальные PSD-макеты страниц в код HTML и CSS. Он выступает связующим звеном между дизайнером и веб-разработчиком. Владельцы бизнеса и маркетологи чаще всего обращаются к верстальщикам за такими услугами:
- создание шаблона с нуля;
- доработка/изменение шаблона;
- размещение контента на страницах сайта (текст, статьи, изображения, видео);
- устранение проблем с версткой (техподдержка).
После того как работа готова, нужно понять, насколько качественно она сделана. Начинать проверку верстки стоит по ряду направлений.
1. Проверить визуальную составляющую верстки:
- Страница визуально соответствует макету и требованиям ТЗ, все элементы находятся на своих местах.
- Размеры элементов и блоков на странице соответствуют указанным в макете. Проверка с помощью расширений для Google Chrome PerfectPixel или 1px.
- Элементы одного типа (например, абзацы или иконки) имеют корректное вертикальное и, где необходимо, горизонтальное выравнивание по линиям сетки. Простая проверка — сделать скриншот страницы и наложить в любом графическом редакторе линии сетки.
- Отступы между элементами одного и того же типа (например, между карточками товаров в каталоге) одинаковые.
- При изменении масштаба страницы в пределах 65-140 % нет существенных проблем в верстке.
2. Проверить адаптацию верстки под устройства с различным разрешением:
- Верстка корректно отображается на устройствах с различным разрешением при вертикальном и горизонтальном просмотре: не появляется горизонтальная прокрутка, блоки не накладываются друг на друга и не «плывут». Проверка с помощью сервиса Screenfly.
- Страница корректно отображается при открытии на разных платформах и в разных браузерах. Можно проверить вручную на самых популярных браузерах: IE, Chrome, Firefox, Opera, Safari, Edge. Специальные сервисы для проверки: Browsershots делает скриншоты страницы с более чем 115 версий браузеров, Browserling позволяет просмотреть сайт с выбранного браузера и операционной системы в режиме эмуляции.
3. Проверить техническую составляющую верстки:
- Основные функции страницы доступны при отключенных изображениях, JavaScript и Flash.
- Контент страницы правильно отображается при включенном блокировщике рекламы.
- Код HTML не имеет ошибок при проверке с помощью validator.w3.org. Предупреждения могут быть, но верстальщик должен объяснить, почему они появились.
- Файлы CSS в разделе head подключены до файлов JavaScript.
- Стили CSS прописаны в отдельном файле. Определения стилей с помощью тега <style> или инлайн CSS нужно избегать.
- Код CSS, HTML и JavaScript оптимизирован — удалены лишние пробелы, рабочие комментарии верстальщика и т. п.
- При вводе неправильного 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.
