Юрий Мазурский о «сеточности» на сайте бюро
Если в дизайне есть сетка, все отступы и размеры стандартизированы, то достаточно перенести их в вёрстку и пиксель‑пёрфект будет получаться автоматически.
Юрий Мазурский о «сеточности» на сайте бюро
Когда всё‑таки нужно свериться с макетом, советую плагин PerfectPixel для Хрома. Он позволяет наложить картинку‑эталон поверх страницы и задать ему расположение, прозрачность и масштаб. Имея под рукой такой эталон, можно подогнать отступы и размеры с помощью веб‑инспектора:
Похожих плагинов для других браузеров я не знаю, поэтому для проверки в них я использую «дизайнерский» приём: делаю скриншот нужного элемента и вставляю в фотошоп поверх макета и сравниваю вручную. Минус этого подхода в том, что после каждого изменения приходится всё делать заново.
Также есть инструменты, с помощью которых можно задать прозрачность окну с графическим редактором и закрепить его поверх браузера, чтобы сравнить макет с результатом. Я не пользуюсь этим способом, поэтому не могу посоветовать конкретных решений.
С подгонкой нужно быть аккуратным. Если макет изначально собран без системы, вы получите вёрстку с кучей магических чисел и исключений. Если вы видите, что у похожих элементов в макете разные метрики или количество кеглей на странице перевалило за десяток, лучше посоветоваться с дизайнером. Возможно, он расставлял элементы в спешке или забыл поправить размеры в старом блоке.
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.