сайт в традиционном браузере с включенной таблицей стилей

Ранее я рассказывал о том, как моя организация почти купила систему управления сайтом. Одним из основных критериев, от которых мы отталкивались при выборе CMS, была возможность создавать различные страницы для различных устройств просмотра: по одной версии для каждого браузера, одну для браузеров Брайля и других ассистивных технологий, версию для карманных устройств.

Сейчас стоимость производства различных страниц для различных устройств просмотра — это то, о чём надо забыть. Пусть никто вас не убеждает в том, что вам необходимо создавать разные версии сайта или что вам необходимы отдельные инструменты для этого. Web-стандарты решают эту проблему бесплатно.

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

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

На рисунках вы видите три скриншота сайта ono.org.ua. На первом рисунке показан сайт в традиционном браузере с включенной таблицей стилей, на рисунке ниже — браузер с выключенной таблицей стилей, а на последнем — сайт в том виде, в каком он отображается на карманном компьютере. Везде показана одна и та же страница. Навигация сайта — список с самой простой разметкой из возможных в XHTML.

Здесь вы видите, как отображается строгий HTML, когда таблицы стилей выключены

Сайт будет работать хорошо и с помощью Screen Reader — программы, созданной для прочтения вслух содержания на экране компьютера пользователя с ослабленным зрением. Как и многие другие пользовательские агенты, Screen Reader предоставляет пользователю содержание, отталкиваясь от структуры разметки. Screen Reader читает список с соответствующими ударениями и делает паузы после точек. Созданный один раз, сайт должен отображаться на многих пользовательских агентах. Сделайте ваш сайт более доступным, не тратя ни копейки на ненужные версии, различные для разных браузеров и устройств.

Отображение сайта в браузере мобильного телефона

Я привел список для навигации в качестве примера, но это всего лишь вершина айсберга. Далее идея «Создай один раз — используй везде» излагается более подробно.