Как убедиться, что работа выполнена качественно? Как оценить качество вёрстки сайта? На самом деле, ответы на эти вопросы безумно просты и элементарны, ваша задача - всего лишь обратиться за помощью к нашему чек-листу по грамотной и эффективной верстке.
Очистить
0%
Проверить страницу на переполнение контентом #
Введите в консоль браузера команду:
document.body.contentEditable = true
Объявления логически связанных свойств должны быть сгруппированы в следующем порядке:
Позиционирование
Блочная модель и размеры
Текстовые свойства
Отображение
Остальное
Плавные переходы, анимация
Предварительная проверка
Соблюдение пропорций макета
Расположение блоков должно быть 1:1 по сравнению с макетом. Допускается расхождение до 5px для текста. Разрешены и даже приветствуются правки размеров и расположения криво нарисованных блоков (разница размерах в 1-2px на разных страницах).
Уточнить независимость блоков в CSS: минимизация каскада
Проверяется в FF через плагин addon Firebug. При наведении на любой блок, в его стилях не должно быть множество перечёркнутых правил.
Оптимизировать визуализацию сайта
Сайт должен нормально смотреться во всех стандартных разрешениях от 1024 и выше, не иметь горизонтального скролла и вписываться в экран мобильных устройств.
Перепроверить порядок верстки
Вёрстка должна тянутся, не разваливаться и не терять дизайнерский вид при изменении контента на странице. Его может быть больше или меньше чем на макете, он может быть обёрнут во всякие
из визига и т.п. Обязательно нужно проверять удаление заголовков!
Сохранить доступность при выключенных(загружающихся) картинках
Надписи (особенно логотип и главное меню сайта) должны оставаться читабельными, у всех информационных картинок должны быть подписи аккуратным небольшим серым шрифтом (да, для img можно задавать font – это внешний вид alt-текста, что выводится вместо картинки)
Слинковать Label и input/select
Это нужно для удобства юзеров. Также это очень облегчает жизнь пользователям с ограниченными физическими возможностями. Проверяется кликом по label – должен активироваться соответствующий ему элемент ввода.
Точность в input type=”email/url/tel”.
Пока-что практическая ценность для пользователя лишь в том, что на iPhone будет показываться клавиатура соответствующая формату поля ввода. Проверяется на iPhone — в зависимости от типа поля ввода он должен показывать различную клавиатуру: стандартную/цифровую/для набора web/email-адресов.
Убедиться в работоспособности при выключенном JavaScript
JS может быть выключен согласно корпоративных требований безопасности. А в Opera Mini он работает только методом перезагрузки страницы. Но самое главное — сайт должен сохранять нормальный вид, пока он грузится на медленном 3G и js-скрипты ещё не выполнились!
Проверить работоспособность при выключенном Flash
Flash не работает на iOS-девайсах. Flash плохо индексируется поисковиками. Проверяется в FF отключением flash-плагина: Tools→Add-ons→Plugins→Shockwave Flash→disable.
Отсутствие багов при увеличенном шрифте
Проверяется в FF: Шрифты – включением View→Zoom→Zoom Text Only и последовательным нажатие клавиш Ctrl + — (или View→Zoom→Zoom In). -120 dpi – настраивается отдельным апплетом в Control Panel (Vista/Seven) или в свойствах драйвера видеокарты в XP.
Обратить внимание на важные мелочи
-Лого на внутряках должно вести на титулку. На титулке logo = h1, на внутряках H1=заголовок контента, а Logo=div; -Проверять что все интерактивные элементы страницы что должны работать - работают; -В вёрстке не должны оставаться закомментированные «на всякий случай» куски кода, лишние файлы и т.д.
Head
Мета-теги
Doctype: указывает на версию HTML-файла и находится в самом начале страницы. В Doctype должна быть указана пятая версия HTML.
!doctype html
Charset: кодировка документа — UTF-8.
meta charset="utf-8"
X-UA-Compatible: управляет отображением страницы в Internet Explorer, поэтому его необходимо задать.
meta http-equiv="x-ua-compatible" content="ie=edge"
a href="https://msdn.microsoft.com/en-us/library/jj676915%28v=vs.85%29.aspx"
Viewport: мета-тег Viewport задан правильно.
meta name="viewport" content="width=device-width, initial-s
cale=1"
Title: тег Title используется на всех страницах.
Google вычисляет длину заголовка, и обрезает в выдаче те, которые больше 472 пикселей. Оптимальная длина для заголовка — около 55 символов.
Description: описание сайта внутри тега является уникальным и не превышает 150-и символов.
Favicon. link rel="icon" type="image/x-icon" href="https://example.com/favicon.ico"