Проверочный список для веб-стандартов

Аватара пользователя
Distructor
Администратор
Сообщения: 1599
Зарегистрирован: 28 дек 2009
Веб-стандарты - это большее, чем просто "бестабличная верстка"

Для разных людей термин "веб-стандарты" означает разные вещи. Для некоторых это просто "страницы без таблиц", для других - "правильный код". Однако веб-стандарты это нечто намного большее. Сайт, простроенный по веб-стандартам, это сайт, который придерживается стандартов (HTML, XHTML, XML, CSS, XSLT, DOM, MathML, SVG и т.д.) и лучших отработанных решений (валидный код, доступный код, семантически правильный код, дружественные URL-ы)

Другими словами сайт, построенный по стандартам в идеале должен быть легким, чистым, основанным на CSS, доступным, удобным и дружественным к поисковым серверам.

О проверочном списке

    Этот проверочный список не претендует на звание "супер-пупер" полного проверочного списка. Возможно его еще можно дополнить и расширить. Что более важно, так это то, что это список не следует рассматривать как обязательный для каждого сайта, который вам придется разрабатывать. Это всего лишь список советов, который можно использовать:
    как обширный список всех имеющихся веб-стандартов
    как удобный инструмент для разработчиков, которым они могут пользоваться при разработке сайтов
    как пособие для тех разработчиков, которые решили двигаться в направление веб-стандартов

1. Качество кода

    1.1 Указан ли у страниц правильный Doctype?
      Doctype (сокращенно от 'document type declaration' - "декларация типа документа") сообщает валидатору, какая версия (X)HTML используется в вашей странице. Декларация должна присутствовать в начале каждой веб-страницы. Doctype - ключевой компонент страницы, претендующей на соответствие стандартам: ваша разметка и CSS не пройдут валидацию, если в вашем документе отсутствует Doctype.
    1.2 Указана ли у страниц кодировка (charset)?
      Если пользовательский агент (например браузер) не может самостоятельно определить кодировку вашей веб-страницы, пользователи увидят на экране нечитаемый текст. Эта информация в особенности важна для тех, кто создает и поддерживает многоязычные веб-сайты. Но вообще объявление кодировки очень важно для тех, кто создает страницы в XHTML/HTML и CSS.
    1.3. Валиден ли (X)HTML код страниц сайта?
      Валидный код браузер выведет быстрее, чем невалидный. Валидный код браузер выведет лучше, чем невалидный. Все больше и больше браузеры подчиняются стандартам, и потому все более важным является валидный и стандартный HTML-код.
    1.4. Валидны ли CSS-таблицы сайта?
      Не забывайте убедиться, что ваш HTML-код и CSS-страницы не содержат ошибок, так как ошибки приведут к искаженному отображению документа на экране.
    1.5. Использует ли сайт какие-либо CSS-хаки?
      В сущности каждый сам решает, какие хаки ему использовать. Это зависит от того, насколько хорошо вы знакомы со всеми вариантами, и от того, какой дизайн вы хотите создать.
    1.6. Используются ли на сайте лишние классы (class) и идентификаторы (id)?
      Я заметил, что разработчики, осваивая новые приемы и технологии, часто создают замечательные CSS-таблицы, и при этом - плохой XHTML-код. В особенности часто в XHTML-коде встречаются ненужные и лишние "div" и "id". Из-за этого HTML-код теряет стройность, а CSS-файлы становятся запутанными.
    1.7. Хорошо ли структурирован код страниц?
      Семантически правильная разметка подразумевает использование html-элементов по их прямому назначению. Хорошо структурированный HTML-документ хорошо воспринимается всем спектром пользовательских программ (браузерами без поддержки стилевых таблиц, текстовыми браузерами, поисковыми роботами и т.д.)
    1.8. Есть ли на сайте "битые" ссылки?
      "Битые" ссылки разочаровывают пользователей и потенциально отвращают от вашего сайта ваших клиентов. "Битые" ссылки могут также сказаться на том, как поисковые роботы будут индексировать ваш сайт.
    1.9. Как у сайта со скоростью загрузки страниц и с их размерами?
      Не заставляйте меня ждать... Вот какую мысль подразумевают пользователи при проведении всех исследований. Даже пользователи с широким каналом устают от медленной загрузки.
    1.10. Выдает ли браузер какие-либо ошибки JavaScript при работе со страницей?
      Internet Explorer для Windows позволяет включить отладчик, который будет выскакивать на экран всякий раз, когда на странице будет обнаружена ошибка в JavaScript. Эта опция находится в меню "Internet Options" на закладке "Advanced". Уберите галочку с пункта "Disable script debugging" (Похожая функция но более удобаная есть по умолчанию и в Opera).

2. Степень разделения контента и представления

    2.1. Используется ли на сайте CSS для всех аспектов оформления страницы?
      Используйте стилевые таблицы для управления компоновкой страницы и ее внешним видом для всех аспектов оформления страницы (шрифты, цвета, отступы, границы и т.д.)
    2.2. Перенесены ли вся декоративная графика в CSS?
      Или она все еще встречается в (X)HTML-коде? Ваша цель, как веб-разработчика, состоит в том, чтобы убрать из html-кода вашей страницы все оформительские элементы. Благодаря чему код станет чище и семантически правильнее.

3. Доступность для пользователей

    3.1 Используется ли атрибут "alt" во всех значимых изображениях?
      Каждый нетекстовый элемент сопровождайте текстовым описанием
    3.2. Используется ли на сайте для шрифта относительные единицы измерения?
      В коде и в стилевых таблицах используйте относительные, а не абсолютные единицы для указания размеров элементов . Например, в CSS, используйте "em" или процент ширины, а не абсолютные величины "рt" или "sm".
    3.3. Ломается ли компоновка страницы при увеличении размера шрифта?
      Проведите простой тест. Откройте свой веб-сайт в любом браузере, где есть функция изменения размера шрифта. Теперь увеличьте размер шрифта. Еще раз увеличьте. И еще раз... Посмотрите на свой веб-сайт. По-прежнему ли компоновка страницы осталась неизменной? При разработке сайта не рассчитывайте, что у посетителя в браузере размер шрифта совпадает с вашим.
    3.4. Есть ли на странице видимая ссылка "пропустить"?
      "... Следует предусмотреть способ, который позволяет пользователю перейти к контенту сайта, пропустив навигацию..."
      "... сгруппируйте родственные ссылки, опишите группу и представьте способ пользователям пропустить эту группу при просмотре..."
      ".. масса навигационных на странице ссылок доставляет неприятности не только слепым пользователям. Вспомните и о тех, у кого затруднена моторика и кому придется нажимать много раз клавишу Tab, чтобы пройти по всем этим ссылкам к тексту страницы..."
    3.5. Используются ли на сайте доступные формы?
      Формы на веб-страницах не самая простая вещь для людей с физическими недостатками. Одно дело - навигация по странице с текстовым материалом, и совсем другое - переход по полям формы и ввод информации в нее.
    3.6. Используются ли на сайте доступные таблицы?
      Что касается таблиц. Не забудьте указать заголовки для столбцов и рядов... Для таблиц, где имеются два и более логических уровней рядов и столбцов, воспользуйтесь вспомогательными элементами языка html, чтобы связать логически ячейки данных с ячейками заголовков.
    3.7. Достаточно ли контрастны и ярки цвета на страницах сайта?
      Убедитесь, что разница между цветом фона и цветом текста достаточно контрастна, чтобы не вызывать затруднений при чтении у людей с пониженным восприятием цвета.
    3.8. Используется ли только цвет для выделения критической информации?
      Убедитесь, что вся важная информация, выделенная цветом, также выделена при отсутствии цвета, например с помощью контекста или элементами логической разметки.
      Существует в основном три типа нарушения цветовосприятия: дейтеранопия (нарушение в восприятии красного и зеленого цветов), протанопия (другая форма нарушения восприятия красного и зеленого цветов) и тританопия (нарушение восприятия синего и желтого цветов - очень редкий случай)
    3.9. Используется ли задержка в выпадающих меню?
      У людей с медленной моторикой могут возникнуть трудности при работе с меню, которые для них будут работать слишком быстро.

4. Доступность для устройств

    4.1. Достаточно ли хорошо сайт работает и в современных и в старых браузерах?
      Прежде чем начинать верстать страницы с использованием CSS, определитесь, какие браузеры вы собираетесь поддерживать и до какой степени.
    4.2. Можно ли работать с материалами сайта при отключенном CSS?
      На ваш сайт могут зайти люди, у которых браузер не поддерживает CSS или поддержка CSS отключена. Если ваши страницы правильно структурированы, у таких посетителей не возникнет никаких проблем при работе с ними.
    4.3. Можно ли работать с материалами сайта при отключенных изображениях?
      Некоторый пользователи просматривают веб-сайты не загружая графические элементы страниц. Так поступают в особенности те, у которых подключение к Интернету слишком медленное. Ваши страницы не должны вызывать затруднений в работе у таких посетителей.
    4.4. Работает ли сайт в текстовых броузерах, таких как Lynx?
      Текстовый браузер это как бы комбинация отключенных графики и CSS. Текстовые браузеры полагаются целиком на структуру документа при создании изображения на экране.
    4.5. Хорошо ли выглядит сайт при распечатке?
      К любому (X)HTML-документу можно прикрепить стиль для вывода на печать и для этого не потребуется трогать разметку самого документа.
    4.6. Хорошо ли работает ли сайт на наладонных устройствах?
      Этот момент вызывает наибольшие затруднения, так как в настоящее время нет единообразия в том, как наладонные устройства поддерживают веб-страницы. Однако некоторые решения в компоновке страниц поддерживаются на наладонниках лучше, чем другие. Поддержка наладонных устройств зависит от целевой аудитории вашего сайта.
    4.7. Снабжен ли сайт детальным набором метаданных?
      Метаданные - это информация, которая понятна для машин.
      Метаданные - это структурированная информация, которая создается людьми специально для того, чтобы описать ею какой-либо ресурс. Другими словами, метаданные - это "данные о данных".
    4.8. Работает ли сайт в окнах различных размеров?
      Среди веб-разработчиков бытует устойчивое убеждение, что с каждым годом средние размеры экрана у посетителей растут. Некоторые разработчики убеждены, что средний размер экрана у посетителей их сайтов составляет по ширине 1024 пикселей. Ну а что насчет пользователей с меньшими размерами экранов или с владельцами наладонников? Являются ли они частью вашей целевой аудитории, и будут ли они испытывать затруднения при работе с вашим сайтом?

5. Основы юзабилити

    5.1. Имеется ли на странице четкая визуальная иерархия элементов?
      Организуйте и выделяйте важность того или иного материала с помощью размеров, отступов и логических связей.
    5.2. Легко ли отличить один уровень заголовков от другого?
      Используйте заголовки для того, чтобы раскрыть структуру документов, при этом используйте их в соответствие со спецификацией.
    5.3. Достаточно ли легко понять навигацию по сайту?
      Навигация вашего сайта должна подсказывать посетителю, на какой странице сайта он сейчас находится и куда он может следовать дальше.
    5.4. Используется ли однообразная навигация на всех страницах сайта?
      Если на каждой странице вашего сайта навигация придерживается одного и того же стиля, посетителям легче будет работать с сайтом и они быстрее будут находить нужную им информацию.
    5.5. Используется ли на сайте приемлемый и однообразный язык текстов?
      Ясный и простой язык материалов позволяет эффективно вести диалог с посетителем. Не забывайте, что ваш сайт могут читать пользователи, для которых ваш язык не является родным.
    5.6. Есть ли у сайта карта и страница с контактной информацией?
      Большинству карт сайтов не удается раскрыть многоуровневую структуру архитектуры сайта. В тестах на юзабилити пользователи часто игнорируют карту сайта или просто не могут ее найти. Сложность карты также является проблемой: карта должна быть именно картой, а не головоломкой по навигации.
    5.7. Если ваш сайт очень большой, есть ли на нем инструмент поиска?
      Для маленького сайта функция поиска не особенно нужна. Всегда найдутся люди, которые никогда не пользуются поиском по сайту. Тем не менее функция поиска является дополнительным хорошим инструментом навигации по сайту для посетителей.
    5.8. Присутствует ли на каждой странице сайта ссылка на его главную страницу?
      Многие пользователи зарывшись в глубины сайта хотят быстро попасть на его главную страницу. Главная страница является как бы отправной точкой для таких пользователей, на которой они заново собираются с силами, чтобы нырнуть в новые глубины сайта.
    5.9. Подчеркнуты ли ссылки?
      Для полноты восприятия пользователями ссылок текст ссылок должен быть оформлен другим цветом и подчеркнут. Посетители не должны метаться по странице в поисках ссылки.
    5.10. Четко ли выделены цветом ссылки, которые пользователь уже посетил?
      Самое главное, если четкое выделены ссылки, которые пользователь уже посетил, он не нажмет на них случайно, и не будет попадать на ту же самую страницу, где уже побывал.

6. Управление сайтом

    6.1. Есть ли у сайта понятная и полезная страница ошибки 404?
      Вы запросили страницу - либо набрав URL в адресной строке, либо щелкнув по ссылке - и обнаружили, что провалились в Ничто. Дружественные к пользователю веб-сайты подадут руку помощи потерявшемуся пользователю, а другие сайты будут рассчитывать на то, что браузер пользователь сам их как-нибудь вытащит из бездны киберпространства.
    6.2. Используются ли на сайте дружественные URL-ы?
      Большинство поисковых серверов (за исключением лишь некоторых - например, Google) не будут индексировать страницы, в чьих URL-ах присутствует символ "?" или какой либо иной символ (скажем "&" или "="). Что хорошего в веб-сайте, если его никто не может найти?
      С точки зрения пользовательского интерфейса самым ужасным является URL-ы. Тем не менее, если они коротки, логичны и самоисправляющиеся, с ними становится удобно работать.
    6.3. Можно ли к вашему сайту обратиться, набрав адрес без "www"?
      В целом не очень критичное требование, а иногда его даже невозможно удовлетворить. Но тем не менее всегда неплохо, если у ваших посетителей есть такая возможность. Если посетитель наберет название вашего сайта без "www" и не сможет к нему обратиться, это будет плохо и для вас и для него.
    6.4. Есть ли у сайта пиктограмма для закладок?
      Пиктограмма для закладок (favicon) это графический файл с картинкой в нескольких разрешениях. Они как правило используются на всех профессионально выполненных сайтах. Пиктограмма для закладок дает веб-мастеру еще один способ рекламы сайта.
      Разумеется, пиктограмма для закладок не является критичной. Однако ее отсутствие порождает волну ошибок 404 в ваших лог-файлах. Такие браузеры как IE всегда запрашивают у сервера эту пиктограмму, когда пользователь помещает ссылку на ваш сайт в закладки. Если на вашем сайте этой пиктограммы нет, в логи попадет ошибка "404 File not found". Так что наличие такой пиктограммы поможет вам значительно сократить размер файла ошибок. То же самое относится и к файлу "robots.txt".

Автор: Russ Weakley
Перевод: Александр Качанов
Источник http://webmascon.com/topics/tools/09a.asp

Вернуться в «Уроки и статьи по верстке»