Способ проверки соответствия макету не менялся много лет. Это расширение PerfectPixel для Хрома или его аналоги для других браузеров. Других удобных способов проверки я не знаю.
Чтобы расширение работало не только для страниц в интернете, но и для ХТМЛ‑файлов на вашем компьютере, поставьте соответствующую галочку в настройках расширения в браузере
Установите расширение, экспортируйте макет в 100% масштабе, откройте нужную страницу, тыкните расширение и перетащите туда макет — он появится поверх страницы. Мышка и кнопки в окне расширения двигают, масштабируют, закрепляют и инвертируют макет.
Чтобы расширение работало не только для страниц в интернете, но и для ХТМЛ‑файлов на вашем компьютере, поставьте соответствующую галочку в настройках расширения в браузере
При наложении считаются допустимыми полупиксельные отклонения в текстовых модулях. Они бывают из‑за разницы рендера текста в графических редакторах и в разных браузерах.
Если закрепить макет, удобно подгонять стили сайта через инструменты разработчика, постепенно перенося изменения в исходный код.
Будьте аккуратны с подгонкой. Цитирую классический совет Руста Кулматова:
Если макет изначально собран без системы, вы получите вёрстку с кучей магических чисел и исключений. Если вы видите, что у похожих элементов в макете разные метрики или количество кеглей на странице перевалило за десяток, лучше посоветоваться с дизайнером. Возможно, он расставлял элементы в спешке или забыл поправить размеры в старом блоке.
И, конечно, наложение макета не должно быть единственной проверкой вёрстки. Наложение не поможет увидеть проблемы с цветами, адаптивом, производительностью, анимациями и так далее. Всё это нужно проверять отдельно, а вёрстку обязательно тестировать на разных реальных устройствах.
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.