План статьи
1) Вводная часть
2) Требования по шрифтам
3) Требования по картинкам
4) Требования по html коду и js скриптам
5) Требования по работе статики, адаптивная верстка
7) Вывод
Вводная часть
Всем привет, меня зовут Александр, я являюсь frontend разработчиком, и в сегодняшней статье хочу обсудить с вами требования к верстке сайта, которые стоит предъявлять и которым стоит стремится. За всю свою карьеру я много верстал сайты и в каждой компании были свои требования, где-то они были общими, где-то разными. Давайте же сегодня рассмотрим по пунктам, что и как необходимо проверять в верстке.
Требования к шрифтам
- Все шрифты должны быть предоставлены в нескольких форматах. Это делается для того, чтобы в разных браузерах подгружался свой стиль. По формату стили должны иметь следующие расширения: .eot, .ttf, woff, .woff2. Все вышеупомянутые форматы поддерживаются браузерами и покрывают их большую часть.
- В техническом задании необходимо прописать какого размера должны быть заголовки разных уровней, а их на сайте может быть от трех до четырех уровней, основной текст сайта, ссылки и т.п. все это необходимо прописывать, чтобы верстальщик потом не думал, какой, где размер шрифта должен использоваться. Также, если на сайте используется два и более шрифта, то к размеру текста должен прописываться шрифт, который к нему должен применяться.
- К общим рекомендациям отношу еще прописывать в т.з. отступ от заголовков, расстояние между строками, отступ красной строки и т.п.
Требования к картинкам
- В техническом задании необходимо прописывать все размеры картинок. Это делается для того, чтобы на этапе подготовки макета к верстке специалист мог заранее нарезать картинки под все размеры. В своих стандартах я стремлюсь к следующим величинам 480, 720, 1080, 1366, 1920, 2560. И да, вы правильно заметили, что это размеры ширины экрана.
- Все картинки должны быть сжаты без потери качества, и предоставлены в одном из следующих формтов: .jpg, .png, .webp, .svg, .ico.
- Картинки должны быть сохранены с возможность прогрессивно загружаться, то есть на сайте сначала появляется картинка с плохим качеством, но по мере прозагрузки ее качество улучшается, пока она полностью не прогрузится.
Требования по html разметке и js коду
- Верстка должна быть разбита на блоки. Здесь это требование больше к разработке. Во время работы верстальщик должен делить огромный файл с разметкой на несколько мелких и иметь возможность оперативно все менять.
- Разметка должна проходить валидацию на сайте и на сайте W3C и в ней не должно быть ошибок, другими словами, код должен быть валиден
- Консистентность и логическое применение разметки. То есть разметка должна быть единообразной, а теги должны быть использоваться по назначению.
- JS скрипты должны быть независимы друг от друга и не влиять на глобальную область видимости.
Требования по работе статики, адаптивная верстка
- Статические файлы должны быть закешированы, а css и js файлы в конце иметь хеш, чтобы при изменении версий файлов в браузер загружалась их свежая версия.
- Загрузка стилей, js, картинок не должна блокировать основной поток парсинга html кода браузером.
- Верстка должна подстраиваться под разрешение экрана, в своей практике всегда стараюсь придерживаться этого пункта. Для этого есть две практики: верстать от меньшего размера к большему и наоброт. Не помню, к сожалению, как называются эти практики. На практике лучше всего применять первую: верстать от меньшего к большему размеру, потому что это позволяем телефонам быстрее прогружать ваш сайт и, соответственно, пользователь быстрее сможет воспользоваться вашим сайтом. В плюс этого способа говорит статистика, что большая часть трафика идет с телефона.
- Учитывать разные особенности по отображению сайта в разных операционных системах.
- Проверять версту на переполняемость текстом, пробовать ее сломать каким угодно способом.
Вывод
Итак, на выходе мы имеем четкий чек лист по которому мы можем проверять верстку на качество, если все пункты этого чеклиста верстка проходит, то это верстка хорошего качества. Вы можете себе скопировать вышеописанный список в этой статье и пользоваться им.
Больше статей в моем блоге. Спасибо, что дочитали и до новых встреч в следующих статьях.