По завершению одного из этапов создания сайта, разработчики скидывают клиенту на проверку вёрстку, ставя тем самым последнего в тупик. Понятие «вёрстки» известно далеко не всем и как её правильно проверять знает лишь малая часть клиентов. Пропуская данный этап проверки, владельцы сайтов могут ещё до разработки сайта не заметить ошибки, которые отразятся на юзабилити и SEO. Мы рады прийти на помощь и помочь в решении этого непростого вопроса, представив небольшой гайд по проверке вёрстки.
Кодировка
За правильное отображение в вёрстке отвечает кодировка, проверить которую необходимо в первую очередь. Для этого открываем исходный код и ищем фразу «UTF-8». Если данная комбинация в вёрстке присутствует, значит всё в порядке, но если её нет, то кодировка в файлах устаревшая и её нужно срочно менять. Старые сайты нередко содержат кодировки Windows-1251 и KOI8, которые не позволят отображать корректно макет на портативных устройствах.
Разрешение
В зависимости от разрешения монитора, будь то совсем маленький лептоп или большой жк-монитор, сайт всегда должен отображаться корректно и без горизонтальных полос прокрутки. Проверить это довольно просто, поменяв разрешение своего браузера. Также, у Firefox есть встроенная утилита для быстрой и удобной проверки разрешения, - для её вызова нажимаем f12 и выбираем Responsive design mode.
Кроссбраузерость
Хорошо знакомое заказчикам слово, значение которого не все понимают до конца. Проверка кроссбраузерности включает в себя проверку корректного отображения сайта в различных браузерах. Дизайн может выглядеть по-разному, особенно на больших сайтах, это допустимо, но на нём не должно быть развалов вёрстки, контент обязательно должен быть читаемым. Для проверки кроссбраузерности лучше всего установить основные бразуеры на свой пк и проверить сайт в каждом из них. Отдельно следует уделить внимание мобильным бразуерам, так как для них вёрстальщики используют отдельные элементы и коды для корректного отображения. У Apple устройств наиболее популярные браузеры – Safari, Chrome, Opera Coast и Dolphin; у Android устройств – Opera Mobile , Opera Mini, Mozilla Firefox, Dolphin и Puffin Browser . Если возможности проверки на реальных браузерах нет, то можно воспользоваться различными онлайн сервисами, например crossbrowsertesting.
Статичная и резиновая вёрстка
Сайт может иметь статичное или тянущееся изображение (хотя статичные сайты встречаются всё реже) и при проверке этого параметра нужно учитывать, что тянущаяся, или как её ещё называют, резиновая вёрстка, при любом разрешении занимает 100% монитора, все элементы страницы должны растягиваться по ширине; статичная вёрстка на любом дисплее отображается одинаково, в зависимости от разрешения меняют размер статичные полосы слева и справа от центральной части сайта. Поскольку оба типа вёрстки имеют свои минусы, наиболее правильным решением будет сжатие и растягивание до определенно-заданных границ. В коде за это отвечает файл стилей и параметры max-width иmin-width.
Валидность
Валидный код, - это HTML-код, написанный по определённому стандарту, носящему название W3C (World Wide Web Consortium). Этот стандарт отвечает, как за правильность отображения в браузерах, так и за ошибки, напрямую влияющие на кроссбраузерность, pagespeed и оптимизацию. Соответствие W3C гарантирует правильный, чистый, структурированный код. Проверить этот параметр довольно легко, на ресурсе W3C есть онлайн чекер, показывающий все ошибки валидации. Важно понимать, что 100% валидного сайта, то есть сайта без ошибок валидации в природе не существует, так как различные CMS имеют собственные строки кода, который валидатор считает ошибкой. И хотя на этапах вёрстки CMS не участвует, впоследствии, при интеграции W3C чекер покажет ошибки. Мы советуем проконсультироваться с разработчиком о природе этих ошибок и попросить свести их, по возможности, к минимуму.
Общие правила проверки кода
Если углубляться дальше, то человеку, проверяющему сайт нужно изучить код на соответствие ряду общепринятых правил, - указанные ниже параметры обязательно должны присутствовать в вёрстке:
- В коде должен быть Doctype, расположенный в первой строке;
- В CSS-стилях сайта должен быть аналог шрифтов для разных систем (Mac, Windows, Linux);
- В консоли не должно быть ошибок связанных с JS, в том числе корректное заполнение онлайн форм, сделанных на JS;
- Файл CSS не должен содержать ошибок.
Как видно по чек-листу, который мы сегодня составили для наших читателей, проверка вёрстки требует времени и определённых знаний. Устранение ошибок на этапе вёрстки, сократит общее время, потраченное на проект, поскольку программисту не придётся возвращаться к вёрстке и исправлять ошибки верстальщика. Если не все пункты, указанные в статье, владелец сайта в силах проверить сам, то мы советуем обратить внимание на кроссбраузерность и разрешение. Эти параметры легко проверить и так же легко увидеть ошибки, которые, как уже говорилось, легче исправить сразу.
