+7 (901)468 25 80
mail@waygrand.com

Чек лист — Проверка вёрстки сайта: кроссбраузерность, адаптивность

  2. Главная
  3. Чек лист // Проверка верстки сайта
Кроссбраузерность. Проверьте верстку в разных браузерах.
Chrome
Яндекс Браузер
Safari
Firefox
Opera
Edge

Актуальная статистика популярности браузеров

https://radar.yandex.ru/browsers

Проверьте адаптацию верстку под разные расширения экранов
1920х1080
1366x768
1280x720
1024x768
768х1024
360х640
Базовые проверки вёрстки сайта
Соответствие макету.
Контактные данные оформлены микроразметкой.
Кодировка UTF-8. Проверяется в браузере: Инструменты → Информация о странице. В появившемся окне должно быть написано «Кодировка: UTF8». Эта кодировка должна использоваться для всех файлов: html, css, 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».
В хлебных крошках отсутствуют ссылки текущую страницу.
Надежность верстки. На странице с контентом, пробуем добавлять и удалять содержимое — «что будет когда текста много?», «а когда мало?».
Наличие удобной маски для ввода телефона. Удобная маска для ввода телефона
Код HTML не имеет ошибок при проверке с помощью validator.w3.org. Предупреждения могут быть, но верстальщик должен объяснить, почему они появились.
Нет ошибок в синтаксисе CSS при проверке на jigsaw.w3.org
Как вам чек лист?
Отправить результат проверки на email*
Отправить
Рейтинг агентства: WayGrand.com
4.92 из 5
(на основании 372 отзывов)

Контакты

+7 (901)468 25 80
mail@waygrand.com
пн - пт : 09:00 - 21:00

Готовые сайты

Уникальные сайты

Продвижение и реклама

Цены и услуги

Каталог сайтов
+7 (901)468 25 80
mail@waygrand.com