Качество верстки

Для верстки существуют достаточно простые критерии качества: корректное отображение в распространенных браузерах, возможность просмотра на экранах стандартных разрешений. Проверить это просто. Но стоит ли на этом останавливаться? Достаточно ли посмотреть сайт в двух-трех браузерах, чтобы считать его качественно, профессионально сверстанным? Не возникнет ли проблем, когда через несколько месяцев появится новая версия браузера? Не будет ли неудачная верстка мешать продвижению? Не возникнет ли проблем с сайтом у некоторых категорий пользователей?

Чтобы прояснить эти вопросы, рассмотрим подробнее несколько важных критериев, определяющих качество верстки.

Валидный html-код

Валидным считается документ соответствующий спецификации языка, утвержденной Консорциумом Всемирной паутины (W3C). Проще говоря, это документ, написанный по всем правилам.

Зачем же нужно проверять html-код валидатором? Ведь сайт и так выглядит отлично! Но ведь никто не спрашивает: зачем проверять орфографию, и так все поймут? Как грамотная речь показывает уровень культуры человека, так и валидный html-код говорит о профессионализме верстальщика, о серьезном подходе к качеству продукта.

В соответствии со стандартами W3C, html должен одинаково отображаться во всех браузерах. Поэтому вероятность того, что валидный сайт будет выглядеть хорошо не только в современных браузерах (включая малораспространенные, в которых верстка обычно не проверяется), но и в их будущих версиях, существенно возрастает. Для невалидного кода качества отображения гарантировать нельзя.

Поисковые системы также гораздо эффективнее индексируют сайты, сверстанные по стандартам. А значит, валидная верстка влияет на успех продвижения сайта.

Семантическая верстка

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

Ярким примером несоответствия семантике является табличная верстка, которая, помимо других недостатков, увеличивает объем кода и медленнее грузится.

А вот некоторые нарушения, которые часто встречаются на тех сайтах, где публикация материалов доверена непрофессионалам.

• Использование только цвета или крупного шрифта для выделения заголовков, без специальных тегов h1, h2, h3 — огромная ошибка с точки зрения продвижения.
• Оформление списков с помощью перевода строки и символов «*» или «-» для маркировки вместо специальных тегов ul, li.
• Нумерация списков вручную, вместо использования тега ol.

Ряд возможностей повысить семантичность не используют даже многие специалисты-верстальщики. Например:

• Специальные теги для оформления контактной информации (address), цитат (blockquote), определений (dfn).
• Микроформаты — способ разметки, включающий в себя информацию о смысле данных. Существуют микроформаты для событий (hCalendar), для контактной информации (hCard), для резюме (hResume) и ряд других.

Преимущества семантической верстки

• Соответствует стандартам W3C, в том числе стандартам доступности (accessibility).
• Способствует продвижению сайта.
• Помогает поддерживать единый стиль оформления на всем сайте.
• Делает использование голосового браузера для слепых более эффективным, так как позволяет легко обнаружить заголовок, таблицу, цитату, список, определение…
• В будущем позволит поисковым роботам и браузерам «понимать» содержание веб-страниц, искать данные не только по ключевым словам, но и по смыслу.

Презентационая графика

Презентационная графика (то есть чисто декоративные элементы, такие как маркеры, разделители, тени…) не должна верстаться картинками. Её необходимо выносить в стилевые файлы в виде фоновых рисунков. Где возможно, общий цвет изображения задается ещё одним фоном — он будет виден при отключенной графике. Тег img применяется только для иллюстраций. В результате:

• Если картинки отключены, пользователь не видит оформления, но не видит и рамки картинок. Получается облегченная версия, передающая фирменное цветовое оформление.
• Фоновые рисунки легко отключить в версиях для печати и для мобильных устройств, избавив пользователя от необходимости печатать или грузить лишнее.
• Поисковые роботы не получают лишний код.

Автор:
Ольга Завьялова

Метки:

• верстка
• качество
• статьи