Как проверить вёрстку?

По завершению одного из этапов создания сайта, разработчики скидывают клиенту на проверку вёрстку, ставя тем самым последнего в тупик. Понятие «вёрстки» известно далеко не всем и как её правильно проверять знает лишь малая часть клиентов. Пропуская данный этап проверки, владельцы сайтов могут ещё до разработки сайта не заметить ошибки, которые отразятся на юзабилити и 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 не должен содержать ошибок;

  • Как видно по чек-листу, который мы сегодня


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

Возврат к списку

Оцените материал:
(Голосов: 2, Рейтинг: 3.35)
Читайте также
Какой выбрать сайт для стартапа?
17.10.2018 17:40:00
Перед тем, как начать думать о дизайне и других технических вопросах, нужно понять, какие цели и задачи будет выполнять веб-сайт молодой компании.
>>>
17.10
02.10
14.09
05.09
21.08
>>> Все новости
Понравилась публикация? Хотите получать интересные уникальный статьи?
Тогда будем рады видеть вас в рядах наших подписчиков!
Нажимая кнопку «Отправить», я даю согласие на обработку моих персональных данных в соответствии с условиями «Политики конфиденциальности»
>
Спасибо за проявленый интерес к нам!
В ближайшее время наш менеджер свяжется с Вами.