Что проверяем? Прежде всего это внешний вид и работоспособность сайта. Сайт должен выглядеть как макет, с которого его верстали, хорошо смотреться на разной ширине экрана. Должны работать все интерактивные элементы, не должно быть ошибок в консоли. Работоспособность сайта должна соответствовать техническому заданию.
Затем проверяем более специфические вещи: качество кода, скорость загрузки. Сайт должен проходить валидацию, быть сверстан в соответствии с современными требованиями: семантичность, доступность, модульность кода.
Внешний вид и работоспособность сайта
- Целостность верстки, соответствие техническому заданию. Должны быть сверстаны все страницы, которые есть в макете и все скрытые слои, модальные окна, формы.
- Внешне сайт выглядит как макет. Присутствуют все картинки. Размеры элементов и блоков соответствуют макету. Если это обсуждалось с заказчиком, то сайт должен соответствовать макету с точностью до нескольких пикселей.
- Подключены необходимые шрифты. Размеры, толщина и начертания шрифтов соответствуют макету. Также указаны правильные межстрочные расстояния.
- Все интерактивные элементы работают в соответствии с техническим заданием: ссылки ведут куда надо, модальные окна всплывают, форма отправляется. Конечно, в том случае, если это была ваша работа, а не программиста. В противном случае убедитесь, что у модалок прописаны стили класса, отвечающего за его появление, а у формы есть атрибуты method и action.
- Интерактивные элементы имеют состояния при наведении, клике и выделении (:hover, :active и :focus). У всех ссылок, кроме пунктов меню, должна быть реакция на :visited. Если состояния прописаны в макете или стайлгайде, они должны соответствовать замыслу дизайнера. Если они не были предусмотрены в дизайне, состояния остаются на усмотрение верстальщика. При взаимодействии с интерактивными элементами ни сам элемент, ни окружающие его блоки не меняют своего положения, если это не было предусмотрено в техническом задании.
- Кроссбраузерность. Сайт должен одинаково выглядеть и одинаково работать в разных браузерах. В каких именно обычно обговаривается в техзадании. Иногда заказчик требует поддержку старых версий IE, иногда не требует IE и Edge вообще. Но обычный набор: последние версии Google Chrome, Mozilla Firefox, Opera, Safari, Microsoft Edge, Internet Explorer.
- Адаптивность верстки. Сайт должен нормально смотреться на самой разной ширине экрана: от самого маленького мобильного до широкоформатного десктопа. Внешний вид сайта при настолько отличающихся размерах может сильно различаться. Эти различия дизайнер отображает в макете. Работа верстальщика сверстать так, чтобы сайт точно соответствовал дизайну в определенных промежутках размеров экрана. И не разваливался при любой ширине экрана.
Качество кода
Теперь проверим те детали, которые не видно невооруженным взглядом.
- Валидность. Верстка должна проходить проверку валидатора (http://personeltest.ru/aways/validator.w3.org/) Валидатор не должен показывать критических ошибок, но предупреждения допустимы.
- Семантичность верстки. Сайт должен быть сверстан с использованием специальных семантических тегов, с учетом спецификации HTML5. Так структура сайта выглядит более логично. Также использование семантической верстки улучшает индексирование сайта поисковиками.
- Доступность. Ваш сайт должен быть сверстан в соответствии с современными требованиями доступности. Помимо моральных бонусов, выполнение этого пункта также даст вам плюс к индексированию поисковиками. Для доступности необходимо использовать семантические теги, структурировать разметку при помощи заголовков, прописывать атрибут alt для подписей к картинкам, должна быть предусмотрена возможность фокусировки на интерактивных элементах и элементах форм при передвижении с клавиатуры.
- Единообразие и аккуратность кода. Код должен быть написан или отформатирован так, чтобы его было легко читать и понимать. Возможно, ваш проект когда-нибудь будет дорабатывать другой разработчик. Надо писать так, чтобы ему было легко разобраться в коде. Структура проекта дело вкуса и привычки. Но хороший тон давать понятные названия папкам и файлам. Также хорошая практика оставлять комментарии в html, css и javascript файлах с указаниями, за что отвечает то или иной кусок кода.Также в вёрстке не должны оставаться закомментированные и неиспользуемые куски кода, лишние файлы, старые версии файлов.
- Сайт должен корректно работать при добавлении текстового контента. Верстка должна быть надежна. Даже если вы верстали не интернет-магазин или блог, владельцу сайта может понадобиться изменить контент. При этом вёрстка не должна съехать или развалиться. При добавлении текстового контента вид и расположение блоков должно оставаться похожим на то, как это было нарисовано в макете.
- Базовая работоспособность сайта должна сохраняться при выключенном javascript. Основной функционал сайта должен быть доступен при отключенном javascript. Это не касается украшательств сайта: эффектов и анимации. Но все страницы должны быть доступны, а в формы можно попасть и без всплывающих попапов.
Оптимизация скорости загрузки страницы
Проверьте в инструментах разработчика, сколько секунд грузится сайт. В идеале скорость загрузки должна составлять 3-4 секунды.
Убедитесь, что:
- скрипты css подключены в <head>, а javascript в конце html файла, перед закрывающим тегом </body>
- для картинок выбран верный формат, и они сжаты. Если изображений много, и они должны быть в хорошем качестве, целесообразно использовать для их загрузки библиотеку LazyLoad.
- css и javascript файлы, если их было несколько при разработке, объединены в файл и сжаты. Если javascript используется не на каждой странице, то к этим страницам его подключать не надо.
Еще более мелкие проверки
Мелкие, но необходимые детали, которые должны быть предусмотрены для того, чтобы сайтом было комфортно пользоваться.
- В <head> прописан DOCTYPE: HTML5 и кодировка UTF-8.
- Логотип компании должен быть в формате SVG и в виде ссылки.
- Изображения должны масштабироваться в зависимости от размера окна (max-width:100%; height:auto;).
- Телефон размечен с помощью ссылки с атрибутом tel.
- Все внешние ссылки должны открываться в новом окне.
- В формах label и input/select/checkbox должны быть связаны между собой. По клику на описание поля формы курсор должен становиться внутрь поля для ввода. Также должны быть указаны правильные типы для инпутов: type=email/url/tel. При работе с формой с телефона, в зависимости от типа инпута, должна показываться разная клавиатура: обычная или цифровая.
- Должна быть предусмотрена валидация формы: при попытке отправить пустую или неверно заполненную форму должны появляться уведомления о необходимости заполнить поля.
