Чек лист проверки верстки сайтов
Более 500 сайтов разработано
Более 500 успешных клиентов
Более 1000 ключевых слов в ТОП10
Как понять, готов сайт к запуску в работу? Все ли сделал разработчик? И какие ошибки нужно устранять? Данный чек-лист проверки верстки сайтов содержит пункты необходимые для правильной оценки готовности сайта.
Проверка верстки делится на три этапа: внешняя, внутренняя и негативная проверки.
Внешняя проверка:
- Внешний вид страниц
Все страницы сайта должны отображаться правильно, быть абсолютно идентичны утвержденному макету. Разрешается исправление кривых блоков. Возможно незначительное несовпадение с макетом на 1-3 пикселей.
Проверяется инструментами PerfectPixel или Page Ruler. Либо другим подходящим способом.
- Кликабельность элементов
Все кнопки, пункты меню и ссылки должны быть кликабельные и выводить на те страницы, на которые нужно.
Проверяет вручную, кликая мышкой на каждый элемент.
- Проверка скорости загрузки страниц
Оптимизировать скорость загрузки сайта, если проблемы с загрузкой не связаны с сервером. Проверяется сервисом Page Speed Insights.
- Проверка на кроссбраузерность страниц
Проверяется корректное отображение страниц сайта во всех браузерах (последние версии), а так же на планшетах, мобильных телефонах на базе Android и IOS в горизонтальном и вертикальном положении устройства.
- Safari
- Yandex
- Opera
- MozillaFireFox
- InternetExplorer
- GoogleChrome
- Мобильные устройства на базе IOS
- Мобильные устройства на базе Android
Все должно показываться правильно, без обрезки, искажения и т.п.
- Проверка адаптированности сайта
Страницы должны адаптироваться под любую ширину устройства, а так же корректно отображаться на RETINA. Все блоки на месте и без горизонтального скролла.
Для проверки существует инструмент Window Resizer . Так же проверяется изменением ширины окна браузера до нужных размеров.
- Проверка корректной работы с текстом
Верстка должна не терять вид при публикации текста или другого контента, в том числе при увеличении объема текста. А так же не разваливаться при перестроении расположения блоков.
Проверяется вводом и удалением текста, добавлением картинок, таблиц и т.п.
- Версия для мобильных устройств
Этот пункт актуален, если заранее обговаривался с заказчиком.
Проверяется просмотром на мобильном устройстве.
- Версия для печати
Этот пункт актуален, если заранее обговаривался с заказчиком.
Проверяется отправкой на печать необходимых страниц. Должно все печататься без искажений.
- Проверка защиты от спама
Защита от спама необходимый элемент для сайта. Название говорит само за себя.
Проверяется отправкой формы без прохождения защиты на спам (например установления флажка "я не робот"). Форма не должна отправляться.
- Прочие детали
Ровные расстояния между блоками, центрирование текста, корректное отображение таблиц (не должны вызывать горизонтальный скролл), при наведении мыши все ссылки должны выделяться, интерактивные элементы сайта должны быть в рабочем состоянии, в текстах не должно быть грамматических ошибок и неодинакового отображения шрифтов и проч.
Внутренняя проверка:
- Проверка кодировки
Кодировка должна быть UTF-8.
Как проверить: Нажимает сочетание клавиш ctrl+U, в открывшемся окне с кодом нажать сочетание ctrl+F, в окне поиска ввести "utf-8", должна в тексте выделиться строка <meta charset='utf-8' />
Для всех файлов JS, HTML, CSS должна быть такая кодировка.
- DOCTYPE
Элемент <!Doctype> сообщает браузеру какую версию HTML использовать. Т.к. существует разные версии HTML, для правильного отображения страниц браузером первой строкой кода задают DOCTYPE, согласно нужной вам версии. Удобнее применять доктайп для HTML5, он подходит для всех документов.
Проверяется сочетанием клавиш ctrl+U. В первой строке должно быть <!DOCTYPE html>.
- Проверка валидности
Валидность - это соответствие установленным стандартам. Ошибок быть не должно. Допускаются только предупреждения.
- для HTML проверяется при помощи валидатора W3C
- для CSS проверяется аналогично
- для js проверяется нажатием сочетания клавиш Ctrl + Shift + i и смотрим вкладку Веб-консоль. Ошибок там быть не должно. Возможны только наличия предупреждений.
- Проверка наличия микроразметки/ микроформаты
Задача микроразметки предоставлять поисковикам структурированную информацию, которая находится на страницах сайта.
Проверяйте наличие микроразметки инструментом https://search.google.com/structured-data/testing-tool
- Проверка доступности верстки по стандартам WCAG
В соответствии со стандартами WCAG сайт должен быть доступным для всех пользователей, в т.ч. с ограниченными возможностями. Доступность по критерию ААА считается идеальной.
Проверить можно сервисом https://try.powermapper.com/Demo/SortSite
- Проверка наличия аналогов шрифтов
В случае, если у пользователя стандартные шрифты не поддерживаются, то для корректного отображения страниц нужны альтернативные шрифты.
Проверить можно поиском по тексту кода названий шрифтов.
- Проверка отправки с обязательными полями форм заказа или обратной связи
Обязательные поля для заполнения утверждаются заказчиком.
Проверяется заполнение обязательных полей в форме и отправке. Форма не должна придти с пустыми полями.
- Правильная структура заголовков
Заголовки должны иметь структуру H1, H2 и т.д.
Негативная проверка:
Под негативной проверкой понимается отключение некоторых плагинов или картинок для проверки правильной работы сайта.
- Проверка доступности при выключенных картинках
При отключении картинок все надписи на страницах должны остаться читабельными.
- Проверка рабочего состояния без JavaScript
Проверяется отключением JS. Страница должна корректно отображаться.
- Проверка рабочего состояния без Flash
При отключении Flesh-плагина функционал должен быть доступен.
- Проверка валидации заполнения форм HTML5 и JS
Проверяется отправкой пустой формы при отключенном JS. Должно появиться уведомление об ошибке заполнения формы.
