55 шагов к идеальной верстке. Чек-лист по тестированию и оптимизации HTML-верстки сайта.

Материал создан с участием партнёра.
Digital-агентство «Компот»

1. Кроссбраузерность

Базовое правило верстки сайта — кроссбраузерность. Это подразумевает под собой корректное отображение сайта во всех современных браузерах.

  • Firefox
  • Chrome
  • Opera
  • Safari
  • Edge

Старые браузеры

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

2. Разрешения экрана

Подготовьте страницы для корректного отображения при разных разрешениях экрана.

  • 1024×600
  • 1024×768
  • 1152×864
  • 1280×800
  • 1280×1024
  • 1440×900
  • 1680×1050
  • 1920×1080

3. Мобильные устройства

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

В 2019 году не меньше 75% трафика приходится на мобильные устройства, поэтому чрезвычайно важно проверить работу сайта на смартфонах и планшетах. Проверяем верстку в landscape- и portrait-режимах (вертикально и горизонтально).

  • Android (смартфоны и планшеты)
  • iOS (смартфоны и планшеты)

4. Базовые проверки вёрстки сайта

  • Соответствие макету.
  • Контактные данные оформлены микроразметкой.
  • Кодировка UTF-8. Проверяется в браузере: Инструменты → Информация о странице. В появившемся окне должно быть написано «Кодировка: UTF8». Эта кодировка должна использоваться для всех файлов: htmlcss, js. Если файлы в разных кодировках — могут быть проблемы.
  • DOCTYPE: HTML5. Первая строка 
  • Логотип добавлен в формате SVG, не мутнеет и не пикселится при масштабировании.
  • Формат копирайта. Правилом хорошего тона будет использование корректного копирайта в подвале сайта. Пример — © ООО «Рога и копыта», 2010—2019
  • Независимость блоков в CSS. При наведении на любой блок, в его стилях не должно быть множество перечёркнутых правил (следствие длинного каскада). Для минимизации каскада и построения надёжной, современной, масштабируемой вёрстки сейчас применяют следующие техники: БЭМ, MCSS и SMACSS.
  • Label и input/select должны быть связаны. Проверяется кликом по label — должен активироваться соответствующий ему элемент ввода.
  • HTML5 валидация заполнения формы. Проверяется в Opera: выключаем javascript, не заполняем форму, жмём Submit — должны появится уведомления о необходимости заполнить поля.
  • JS-валидация форм. Проверяется в Opera/Safari/Chrome: включаем javascript, не заполняем форму, жмём Submit — должны появится уведомления о необходимости заполнить поля.
  • Правильные input type=«email/url/tel». Проверяется на iPhone — в зависимости от типа поля ввода он должен показывать различную клавиатуру: стандартную/цифровую/для набора web/email-адресов.
  • Уведомления об ошибках. Должны быть не js-alert’ом, а текстом в дизайне сайта.
  • Правильная структура заголовков (H1,H2,и TITLE). Проверяется в FF через плагин addon Web Developer>Information>View Document Outline. Красных строк быть не должно!
  • Использование 1 тега h1 на странице.
  • Заголовки <h1> — <h6> не применяются в заголовках блоков.
  • Работоспособность сайта при выключенном JavaScript. Проверяется в FF через плагин addon Web Developer>Disable>Disable JavaScript>All JavaScript. Сайт должен сохранять нормальный вид, пока он грузится на медленном 3G и js-скрипты ещё не выполнились! Весь критически важный функционал сайта должен быть доступен без JS. Дополнительные фишки, например, ссылки на увеличение шрифта или распечатку, при выключенном JS не должны отображаться. Если не хочется/нет возможности реализовывать функционал без JS, нужно хотя-бы выводить уведомление о необходимости включить его.
  • Логотип в шапке является ссылкой. Логотип должен являться ссылкой на главную страницу во всех макетах, кроме макета главной. На главной странице лого не должен являться ссылкой, т.к. страница будет ссылаться сама на себя, что отрицательно сказывается на SEO.
  • Ховер-эффекты на текстовых ссылках. Все ссылки должны как-то реагировать на :hover, :active и :focus.
  • Favicon. Желательно создавать несколько favicon с включенными внутрь неё 32×32, 48×48 и 64×64 вариациями и apple-touch-icon.
  • Skype-плагин не должен ломать вёрстку.
  • Ссылки на внешние ресурсы. Ссылки на чужие сайты должны быть с target=«blank», желательно выделять их иконкой «внешняя ссылка».
  • Структура каталогов верстки. Картинки должны быть в отдельной папке, css — в отдельной и js — в отдельной. Графика, не являющаяся частью дизайна (всякие иллюстрации, фото в новостях и т. д.), нужно положить в отдельную папку, например, «userfiles».
  • В хлебных крошках отсутствуют ссылки текущую страницу.
  • Надежность верстки. На странице с контентом, пробуем добавлять и удалять содержимое — «что будет когда текста много?»«а когда мало?».
  • Наличие удобной маски для ввода телефона. Удобная маска для ввода телефона

5. Валидность

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

  • Валидность верстки.
  • Валидность CSS.

6. Оптимизация верстки

  • Подключение CSS должно быть в <head>, а JS — в конце HTML, перед </body>
  • Оптимизация графики. Для ускорения работы сайта рекомендуем пропустить все графические изображения через специальный оптимизатор.
  • Использование CSS-спрайтов
  • Объединять все css в один файл
  • Объединять все js в один файл
  • Использовать только WOFF при подключении web fonts.
  • Соответствие типов файлов изображений и их назначения. Например, png стоит использовать только в тех случаях, когда требуется прозрачность. В большинстве других случаев png можно заменить на jpg без потери качества. Благодаря этому существенно уменьшится вес страницы и вырастет скорость загрузки.
  • Проверить и оптимизировать сайт с помощью сервиса PageSpeed Insights.
  • Вынести кнопки соц. шаринга в пост-загрузку. Мануал.
  • Подключить библиотеку LazyLoad для графики с целью ускорения загрузки страницы.
  • Подгружать невидимые при первой загрузке части страницы через AJAX. Например содержимое табов, скрытых блоков и так далее.
  • Подгружать js-библиотеки и шрифты с CDN для использования их версий, закешированных с других сайтов, и быстрой загрузки с CDN, если кеша нет.
  • Минимизировать CSS, JS и HTML
Оценка доработки сайта
Доработаем ваш сайт в формате разовых работ без абонентской платы. Напишите на почту info@kompot.bz, позвоните по телефону +7 (499) 685-19-29 или воспользуйтесь данной формой.
Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь c политикой конфиденциальности.