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

Share
29.11.17

Содержание:

    Pixel perfect

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

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

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

    • Просто загрузите подготовленный макет (предварительно преобразовав его в изображение);
    • Подтяните вручную или с помощью стрелок до полного совпадения.

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

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

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

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

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

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

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

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

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

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

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

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

    Подпишитесь на блог