«Чек-лист верстки»: как избавить себя от правок и угодить заказчику?
Итак, вы проделали огромную работу: писали код, разделяли на блоки, навешивали стили, адаптировали код для мобильных устройств. Работа готова. Давайте убедимся, что это действительно так, и заказчик не вернет ее на доработку.
Что проверяем? Прежде всего это внешний вид и работоспособность сайта. Сайт должен выглядеть как макет, с которого его верстали, хорошо смотреться на разной ширине экрана. Должны работать все интерактивные элементы, не должно быть ошибок в консоли. Работоспособность сайта должна соответствовать техническому заданию.
Затем проверяем более специфические вещи: качество кода, скорость загрузки. Сайт должен проходить валидацию, быть сверстан в соответствии с современными требованиями: семантичность, доступность, модульность кода.
Качество кода
Теперь проверим те детали, которые не видно невооруженным взглядом.
Валидность. Верстка должна проходить проверку валидатора (https://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». При работе с формой с телефона, в зависимости от типа инпута, должна показываться разная клавиатура: обычная или цифровая.
Должна быть предусмотрена валидация формы: при попытке отправить пустую или неверно заполненную форму должны появляться уведомления о необходимости заполнить поля.