​Как верстать грамотно

Вам приходит макет. Вы делаете примерно то же самое, показываете дизайнеру, но он говорит, что нет. Вы не заметили разницу в 10 пикселей, которую заложил он. Да и вообще у него в макете все отступы делятся на 4, а вы сделали "примерно то же самое". Как не допустить такую оплошность?

Для тестирования вашей верстки и оригинала существует замечательный плагин PixelPerfect. Создаете страницу, как считаете нужным, накладываете оригинал (можно сделать принскрин, например, из Zeplin), уменьшаете прозрачность на 50% и смотрите, где различия. И там, где они образовались, правите и подгоняете под макет. Главное, чтобы картинка оригинала была 100%-ой ширины, а не больше/меньше нужной.

Зачем верстать PixelPerfect?

1. Показывает качество вашей работы. Результат должен быть таким, каким его видит дизайнер, а не таким, как увидели макет вы. Верстать без PixelPerfect - все равно что рисовать лишь контуры, не прорисовывая детали.

2. Позволяет обнаружить ошибки. Если у вас блоки съезжают на 2-3 пикселя относительно друг друга, то вам, как программисту, будет казаться, что все ок, а пользователю - некомфортно. При этом отсутствие комфорта он будет воспринимать подсознательно, не в состоянии объяснив, что именно не так.

3. +1 балл в карму перед заказчиком и в резюме. Все любят программистов, верстающих PixelPerfect, а не кое-как.

На что надо обратить внимание:

Не всегда нарисованное дизайнером 100% верно. Он может быть начинающим или спешить. Включайте логику и воображение, чтобы понять, скольки кратные отступы надо задавать и располагается ли этот элемент ровно по центру.

Так что давайте все делать качественно, красиво, согласно дизайнерской задумке и быть хорошими разработчиками. А плагин Pixel Perfect нам в этом поможет. Как грамотно пользоваться, подробная инструкция тут.