Продажи

Проверка верстки сайта для тех кто далек от HTML и CSS

Александр Рыбка 29:11:2017 367

Немного о подготовке: выбор исполнителя

В первую очередь стоит обратить внимание на портфолио студии по верстке (или фрилансера) , у которой вы заказываете услугу. Ознакомьтесь с работами, их отображением в мобильных версиях сайта, возможно есть ссылки на реальные сайты. Посмотрите на отзывы в интернете и сайтах фриланса.

Оцените работу визуально

По своему опыту хочу отметить: в 80% случаев если на сайте нет визуальных багов (десктоп, планшет, телефон), то и в коде все будет в порядке. Откройте сайт в нескольких браузерах. Все хорошо? Двигаемся дальше!

Pixel perfect

Мои работы всегда выполняются в технике пиксель перфект. Это вид верстки при котором PSD макет и сверстанный HTML-шаблон в точности совпадают (пиксель к пикселю). Допускаются мелкие отклонения в 3-4px.

Для проверки советую всем специальное расширение для Chrome. Оно удобно тем что можно просматривать соответствие на всех прорисованных расширениях.

Как с ним работать:

— Просто загрузите подготовленный макет (предварительно преобразовав его в изображение);

— Подтяните вручную или с помощью стрелок до полного совпадения.

Проверка адаптивности

Самый простой способ быстро проверить адаптивность это открыть код. Просто нажмите F11 или через контекстное меню. Нажимаем на иконку телефона и выбираем необходимое расширение.

Проверка адаптивности

Дополнительные расширения и сервисы

Можно также установить расширение RWD Tester на хром. Выберете необходимое устройство, горизонтальное или вертикальное расположение. В отдельной вкладке открывается окно с нужным расширением.

Дополнительные расширения и сервисы

Для более продвинутого уровня можно использовать Browserstack. Платформа поможет проверить сайт на официальных эмуляторах мобильных телефонов, планшетах в реальных браузерах.  В системе предусмотрено много дополнительного функционала, но он уже скорее пригодится верстальщикам.

Проверьте на своем телефоне

К сожалению у всех сервисов встречается погрешность в показаниях. Да и восприятие на экране ноутбука и живом телефоне разное. Поэтому если есть возможность залить сайт локально, зайдите на свой сайт с мобильного телефона и протестируйте его вручную.

Перечисленных пунктов хватит для базовой проверки. Если у вас есть сомнения в качестве выполненной работы то можете обратиться к независимым экспертам, которые проведут более углубленный анализ работы.