В этом посте я хочу предложить вариант проверки качества HTML-верстки. Многим это может показаться избитым и не интересным. В первую очередь он будет полезен заказчикам верстки, а так же начинающим HTML-верстальщикам.
Проверять верстку лучше, если она размещена на сервере и при медленном модемном соединении. Начать стоит с браузера Mozilla Firefox.
Открываем страницу, смотрим:
Проверка валидности
1. Проверка HTML.
Справа внизу браузера должна появиться круглая зеленая иконка 
, говорящая о том, что HTML-код страницы соответствует стандартам W3C. Если этот плагин не установлен, то берем его тут. В случае, если загорелась красная круглая иконка 
, то верстку нужно вернуть на доработку, или же верстальщик должен представить достаточно веские аргументы почему он пошел на нарушение стандартов.
Я знаю только 3 таких случая – это:
- встраивание на страницу флеш, при чем достаточно большая аудитория будет просматривать сайт с отключенными в браузере скриптами
- при необходимости встраивания в тело ссылки target=_blank
- при верстке HTML-писем (из-за слабой поддержки почтовыми клиентами технологии CSS)
2. Проверка на ошибки в CSS и JavaScript.
Смотрим в правый верхний угол. Там должны появится 3 зеленых иконки 
. У кого не стоит плагин, берем его тут. Если загорелись красные иконки 
, значит верстка либо переключена в режим обратной совместимости со стандартами, либо CSS-код не соответствует стандартам, либо ява-скрипт код имеет ошибки. В этом случае верстка нуждается в доработке.
Проверка семантики
1. Проверка заголовков.
Находим в верхней панели браузера: Инфо > Оглавление документа. Смотрим структуру заголовков. Должна появится аккуратная лесенка из заголовков, описывающая иерархию документа. Не должно быть надписей «Отсутствует заголовок».
2. Проверка материала.
Снова ищем вверху: Ошибок CSS нет > Отключить стили > Все стили. Все оформление сайта должно исчезнуть. Материал должен выглядеть как в любом текстовом редакторе (word), - заголовки, списки, иллюстрации. Информация с главной колонки должна находится как можно выше (во многом зависит от особенностей дизайна).
3. Проверка на наличие микроформатов.
Опять смотрим в правый нижний угол. Там должна загореться оранжевая иконка микроформатов 
. Если плагин не установлен, то берем его тут.
Проверка функциональности
1. Проверка языка и типа документа.
Считаю правильным, если документ будет составлен на языке XHTML 1.0 и отдан с самым строгим определением – Strict.
Почему XHTML а не HTML? Потому что XHTML соответствует XML, а XML, как известно, очень широкой областью применения. Соответственно, документ написанный на XHTML, является более универсальным и может использоваться во многих сегодняшних динамических системах.
Почему Strict, а не Transitional, или Frameset. Главное преимущество состоит в том, что соответствующие ему документы в любом случае будут полностью поддерживаться в будущих версиях XHTML. К тому же, чем строже составлена разметка документа, тем он правильнее и быстрее будет обработан браузером. При дальнейшем разработке сайта строгость к документу может быть понижена, но верстка по прежнему будет отображаться корректно.
Проверить язык и тип документа можно нажав в браузере: Вид > Исходный код страницы. Интересующая строчка должна находиться самой первой:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2. Активность элементов страницы.
Проверить, активны ли на странице ссылки и элементы форм. Текст должен свободно выделяться мышью, логотип должен быть ссылкой. Особое внимание обратить на ролловеры, при наведении на них, картинка должна замещаться мгновенно, задержки быть не должно (этот баг можно увидеть, если верстка размещена на сервере). Проверить подписи к элементам форм, при щелкании на них, фокус должен переходить на сами элементы.
3. Проверка работы JavaScript.
Поведение страницы должно в точности соответствовать техническому заданию, при этом верстка не должна нарушаться.
4. Проверка функционирования страницы с отключенными скриптами.
Нажимаем в панели браузера: Отключить > Отключить JavaScript > Полностью. Доступ к функциям страницы не должен быть затруднен. Все, необходимые для работы, блоки должны быть видны. Нужно помнить, что JavaScript – это всего лишь надстройка, которая помогает решить задачи более удобным способом.
5. Проверка работы страницы с отключенными в браузере изображениями.
Нажимаем: Графика > Отключить изображения > Все изображения. Верстка не должна нарушиться. Вместо изображений должен появиться описывающий ее текст. Все заголовки должны быть видны, графические кнопки и ссылки должны быть заменены текстом или выделены фоновым цветом.
6. Проверка на разных разрешениях.
Верстка не должна иметь горизонтальный скролл при минимальном разрешении, оговоренном в техническом задании. Сейчас, чаще всего, это монитор с разрешением 1024х768рх.
По моим наблюдениям, самым узким браузером, на данный момент, является IE7. При разрешении 1024х768рх, горизонтальный скролл у него появляется при ширине страницы 1004рх, поэтому оптимальной считаю ширину 1003рх.
Так же считаю правильным, если статичная верстка, на больших мониторах, будет находиться в центре экрана, а не сбоку.
Если нужна резиновая верстка, то имеет смысл подумать как о минимальном, так и о максимальном разрешении страницы. При установке максимальной ширины, страница так же должна быть отцентрована по горизонтали на больших мониторах. Ну и самое главное, при изменении ширины браузера, блоки страницы должны вести себя предсказуемо, верстка не должна ломаться.
Так же стоит обратить внимание на подвал. Если дизайн позволяет, то он должен всегда находиться внизу.
7. Масштабируемость.
Не каждый дизайн позволяет реализовать эту функцию. Но если дизайнер это предусмотрел, тогда: в браузере нажимаем Вид > Масштаб > Только текст. После этого нажимаем клавиши Ctrl++ и Ctrl+-. Обычно, верстка должна хорошо выглядеть при увеличении шрифтов на 2 размера от нормы и уменьшении от них на 1.
8. Соответствие макету.
Верстка должна точно соответствовать исходному макету. Проще всего это сделать с помощью плагина Pixel Perfect. У кого его нет, можно взять тут. После установки появится иконка в форме синего ромбика справа внизу браузера 
. Нажимаем на него, открывается панель Pixel Perfect. В эту панель загружаем макет в формате или jpg, или gif, или png. Формат psd плагин не видит. В плагине выбираем нужный макет и в окне браузера он накладывается на верстку. После этого можно сверить соответствие.
9. Кроссбраузерность.
После всего этого можно переходить к проверке корректного отображения верстки в остальных браузерах. В настоящее время имеет смысл тестировать верстку в следующих браузерах: Firefox, Safary, Chrome, Opera, IE6, IE7, IE8. Особое внимание стоит обратить, конечно же, на браузеры от Microsoft, а самое пристальное на IE6.
Следуя этим рекомендациям можно провести достаточно глубокую проверку HTML-верстки, при чем для этого не требуется даже базовых знаний предмета.
Rss-подписка
Email
Re: Как проверить качество HTML-верстки
спасибо за информацию
Евгений Сергеев
Re: Как проверить качество HTML-верстки
вся проблеме в том и состоит, что проверку проводят всякие недоманагеры, сами руками несчастной таблички не верставшие никогда, но с диким самомнением.