[HTML] «Чек-лист верстки»: как избавить себя от правок и угодить заказчику

Ответить на тему

Автор

Сообщение

news_bot ^®

Стаж: 6 лет 9 месяцев
Сообщений: 27286

news_bot ^® написал(а)
14-Июл-2020 11:32

Цитировать

Итак, вы проделали огромную работу: писали код, разделяли на блоки, навешивали стили, адаптировали код для мобильных устройств. Работа готова. Давайте убедимся, что это действительно так, и заказчик не вернет ее на доработку.

Что проверяем? Прежде всего это внешний вид и работоспособность сайта. Сайт должен выглядеть как макет, с которого его верстали, хорошо смотреться на разной ширине экрана. Должны работать все интерактивные элементы, не должно быть ошибок в консоли. Работоспособность сайта должна соответствовать техническому заданию.
Затем проверяем более специфические вещи: качество кода, скорость загрузки. Сайт должен проходить валидацию, быть сверстан в соответствии с современными требованиями: семантичность, доступность, модульность кода.
Внешний вид и работоспособность сайта

Целостность верстки, соответствие техническому заданию. Должны быть сверстаны все страницы, которые есть в макете и все скрытые слои, модальные окна, формы.
Внешне сайт выглядит как макет. Присутствуют все картинки. Размеры элементов и блоков соответствуют макету. Если это обсуждалось с заказчиком, то сайт должен соответствовать макету с точностью до нескольких пикселей.
Подключены необходимые шрифты. Размеры, толщина и начертания шрифтов соответствуют макету. Также указаны правильные межстрочные расстояния.
Все интерактивные элементы работают в соответствии с техническим заданием: ссылки ведут куда надо, модальные окна всплывают, форма отправляется. Конечно, в том случае, если это была ваша работа, а не программиста. В противном случае убедитесь, что у модалок прописаны стили класса, отвечающего за его появление, а у формы есть атрибуты method и action.
Интерактивные элементы имеют состояния при наведении, клике и выделении (:hover, :active и :focus). У всех ссылок, кроме пунктов меню, должна быть реакция на :visited. Если состояния прописаны в макете или стайлгайде, они должны соответствовать замыслу дизайнера. Если они не были предусмотрены в дизайне, состояния остаются на усмотрение верстальщика. При взаимодействии с интерактивными элементами ни сам элемент, ни окружающие его блоки не меняют своего положения, если это не было предусмотрено в техническом задании.
Кроссбраузерность. Сайт должен одинаково выглядеть и одинаково работать в разных браузерах. В каких именно — обычно обговаривается в техзадании. Иногда заказчик требует поддержку старых версий IE, иногда не требует IE и Edge вообще. Но обычный набор: последние версии Google Chrome, Mozilla Firefox, Opera, Safari, Microsoft Edge, Internet Explorer.
Адаптивность верстки. Сайт должен нормально смотреться на самой разной ширине экрана: от самого маленького мобильного до широкоформатного десктопа. Внешний вид сайта при настолько отличающихся размерах может сильно различаться. Эти различия дизайнер отображает в макете. Работа верстальщика — сверстать так, чтобы сайт точно соответствовал дизайну в определенных промежутках размеров экрана. И не разваливался при любой ширине экрана.

Качество кода
Теперь проверим те детали, которые не видно невооруженным взглядом.

Валидность. Верстка должна проходить проверку валидатора (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». При работе с формой с телефона, в зависимости от типа инпута, должна показываться разная клавиатура: обычная или цифровая.
Должна быть предусмотрена валидация формы: при попытке отправить пустую или неверно заполненную форму должны появляться уведомления о необходимости заполнить поля.

Ещё больше о верстке можно узнать на нашем шестимесячном курсе «Профессия: Программист» Узнать подробности!
===========
Источник:
habr.com
===========
Похожие новости:

Теги для поиска: #_html, #_productstar, #_htmlverstka (html-верстка), #_blog_kompanii_productstar (
Блог компании ProductStar
), #_html

Профиль ЛС

Ответить на тему

Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы

Текущее время: 22-Ноя 20:15
Часовой пояс: UTC + 5