Добрый день. Я занимаюсь web-разработкой и почти всем, что с этим связано.

10 пунктов для проверки вёрстки

Несмотря на низкий порог вхождения, вёрстка является важным этапом в создании любого интернет-проекта. Но зачастую вёрстке уделяется незаслуженно мало внимания. Несмотря на то, что при приёме результатов работы верстальщика особых вопросов не возникает и всех всё устраивает, это вовсе не исключает того, что вёрстка выполнена некачественно. Поэтому к проверке вёрстки, с которой наверняка придётся иметь дело другим верстальщикам, программистам, сеошникам (в первом пункте объясняется, почему), а главное — пользователям, нужно подойти не менее основательно, чем, скажем, к дизайну. 

В этой статье я собрал 10 требований, которые стоит предъявлять к верстальщику.

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

Следование стандартам гарантирует правильное отображение сайта в браузерах, которые тоже разрабатываются с учётом стандартов. И даже если всё совпадает с макетом, то есть несколько нюансов, которые проявят себя если не сразу, то позже; в любом случае рекомендуется верстать согласно стандартам, которые разрабатываются отнюдь не наобум. К тому же, валидность вёрстки является одним из большого числа факторов ранжирования для поисковых систем.

Проверить валидность HTML-части: http://validator.w3.org/nu/

Проверить валидность CSS: https://jigsaw.w3.org/css-validator/

Валидация CSS
Валидация CSS

2 Онлайн-сервисы

Кроме официальных валидаторов, которые проверяют лишь соответствие стандартам, существуют также сервисы, которые произведут анализ CSS-файлов и дадут советы по их оптимизации и организации. 

Лично мне нравится первый сервис.

Анализ CSS с помощью TestMyCSS
Анализ CSS с помощью TestMyCSS

3 Реальные устройства

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

Популярность разрешений экрана
Популярность разрешений экрана

4 Зоопарк браузеров

Традиционно у верстальщиков установлены все популярные браузеры, каждый из которых имеет своеобразные особенности. Но бывает так, что верстальщик ленивый или ему мало платят, поэтому он работает только в одном браузере, который считает эталоном, а остальные не нужны. 

Автоматизировать проверку можно с помощью данного сервиса https://developer.microsoft.com/en-us/microsoft-edge/tools/screenshots/, который сгенерирует скриншоты сайта из различных браузеров и устройств. 

Популярность браузеров
Популярность браузеров

5 Различный контент

Зачастую при разработке дизайна сайта упускается важный момент — содержимое может быть различного объёма (разрешение изображения, количество символов текста). Анонс новости может быть не только в 4 строки, как красиво нарисовал дизайнер, а в 3 или 5. А, может, и все 100. Изображение в слайдере, загруженное контент-менеджером, может вдруг оказаться не эталонного размера, как нарисовано в макете, а вообще повёрнутым на 90 градусов. Или вообще не существовать. 

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

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

7 Выбор фреймворка

Если готовая вёрстка уйдёт в руки разработчиков (особенно frontend-разработчиков, на плечи которых возляжет различный интерактив: всплывающие окна, динамическая подгрузка содержимого, календари, выпадающие меню), то стоит сначала посоветоваться с ними насчёт frontend-фреймворка, который следует использовать верстальщику. 

Выбор среди фреймворков действительно большой, но большей популярностью (и не зря) пользуется Bootstrap. 

8 Исходники

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

9 Производительность

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

Статьи по теме:

10 Семантика

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

Статьи по теме:

Комментарии