О книге "Адаптивный веб-дизайн" Аарона Густавсона

Мне довелось прочитать первое издание книги Аарона Густавсона "Адаптивный веб-дизайн" (книга была издана в 2011 году). Следует сказать, что сейчас, в 2018ом году фокус адаптивности сместился несколько в иную сторону, чем это рассмотрено в книге АГ. Сейчас, когда я слышу словосочетание "адаптивный веб-дизайн", первая мысль, которая приходит мне в голову - это дизайн для разных типов устройств (десктоп, планшет, телефон). В книге же речь идет о проблемах отображения сайта в разных браузерах. Как же сейчас обстоят дела с этой проблемой? Она решена? Или мы на нее забили? Проработав в вебе около 5 лет, я застала тот исторический момент, когда многие компании, занимающиеся разработкой веб-сайтов, заявили: "Всё! Хватит это терпеть! IE6 больше не поддерживаем". И это было уже не стыдно. Видимо, люди решили, что цель не оправдывает средства.

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

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

Ключевой термин, который вводит АГ в книге - отказоустойчивость. Под отказоустойчивостью автор понимает способность сайта донести контент до пользователя в любых условиях (старый браузер, выключенный JS и т.д.). Для достижения этого автор предлагает использовать концепцию постепенного улучшения. Она заключается в накладывании технологий слоями.

Всего АГ выделяет пять больших слоев:

Текст -> HTML-разметка -> CSS -> Javascript -> WAI-ARIA

Всё понятно, кроме последнего. Последнее - это специальная разметка, которая позволяет пользоваться сайтом людям с ограниченными возможностями (тем, кто вынужден пользоваться скрин-ридерами). Последнее - это, конечно, высший пилотаж. Честно говоря, я вообще первый раз услышала об этом стандарте. Мне приходилось делать версию для слабовидящих, но она исчерпывалась рядом дополнительных возможностей: возможностью отключить картинки, установить более удобное сочетание цветов фон/шрифт, увеличить кегль.

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

Мне всегда казалось, что тот факт, что браузер никак не ругается на "фигню" вставленную в html- или css-файл - это недостаток. Так сложнее отслеживать ошибки. А вот в книге АГ это рассматривается как  одна из причин, по которым концепция постепенного улучшения имеет место быть. Вот, например, рассмотрим CSS. Мы делаем набор правил, которые железобетонно работают во всех браузерах. А потом, следующим слоем, добавляем "красивости", которые старые браузеры могут молча не понять (ну и ладно), а новые браузеры поймут, придав при этом лучшие эстетические качества сайту. Именно из-за этой особенности постепенное улучшение на этапе верстки и стилизации достаточно тривиально работает. С JS все обстоит иначе. Он умеет ругаться. Не в рабочую область браузера, конечно. Но сайт из-за ошибок в JS начинает работать некорректно.

А теперь коротко о "разумном, добром, вечном", что посеяла в меня эта книга (основные тезисы):

HTML:

1) Автор является сторонником использования максимально семантичой разметки, то есть использования HTML5. Безграничные возможности CSS, конечно, позволяют нам и из лошади сделать жирафа. Но, с другой стороны, - зачем, если у нас есть в наличии сам жираф. Еще один аргумет в пользу семантичной разметки - скрин-ридеры лучше воспринимают такой сайт.

2) АГ обращает внимание на использование разного рода невидимых в хороших условиях, но играющих важную роль если что-то пошло не так, атрибутов. Например, alt.

3) Той самой вишенкой на HTML-торте является микроразметка. Существуют различные микроформаты, призванные описывать разного рода сущности (события, товары, контактную информацию). Это необходимо, чтобы приложения или поисковики могли извлекать из сайта нужную им информацию.

CSS:

1) АГ предлагает разделять стили на 3 больших блока: типографика, расположение блоков, цвет.

2) АГ обращает внимание, что  CSS - это вообще очень благодатная почва для постепенного улучшения: возможность перезаписи стилей, игнорирование старыми браузерами непонятных свойств и т.д.

4) Так как с IE борются уже давно и долго, то в рамках этой борьбы придумано много костылей. Например, условные комментарии, которые позволяют подключать стили только для IE браузеров

3) Media-запросы позволяют решить ряд проблем и разделить стили. Тут стоит вспомнить о концепции mobile first (сначала мобильные). Интерфейс на телефоне, как правило, легче, чем на десктопе.  Поэтому постепенное улучшение тут должно работать так: сначала надо писать стили для мобильных, а потом при помощи media-запросов усложнять интерфейс для устройств с бОльшим экраном.

JS:

1) Контент должен быть доступен и без JS. Честно говоря, звучит как лозунг: "За мир во всем мир" - несколько мечтательно и утопично. Хо-хо)))

2) Существует проблема использования обработчиков на контенте, подгруженном Ajax-ом. А именно - обработчики перестают работать на блоках, подгруженных ajax-ом. Это имеет место быть из-за того, что инициализация обработчика происходит на загрузку страницы. Автор рекомендует использовать всплытие и вешать обработчики на корневой тег, а внутри обработчика уже проверять, на каком именно теге сработало событие, и выполнять соответствующие действия.

3) Разметка, которая нужна исключительно для работы JS-скрипта, должна генерироваться в самом скрипте.

4) Dependency testing. Разделать скрипт на фрагменты и в каждом проверять доступность сущностей (библиотек, объектов, методов). В общем, страховаться-перестраховаться.

5) JS и стили. Автор рекомендует не задавать правила для HTML-элементов внутри JS-кода. Правильнее сделать набор классов со свойствами, которые устанавливаются программно, и в коде уже оперировать этими классами.

WAI-ARIA (Web Accessibility Initiative - Accessible Internet Application) - стандарт, который позволяет пользоваться интернетом людям с ограниченными возможностями. Повторюсь - для меня это вообще очень новая штука.

1) Применение некоторых стилей (CSS-правил) оказывает влияние на поток информации, воспринимаемый скрин-ридером. Например, скрыть блок можно скрыть разными способами:

• visibility: hidden (скрин-ридер пропустит этот блок)
• display: none (скрин-ридер пропустит блок)
• height: 0, width: 0; overflow: hidden (скрин-ридер снова пропустит блок) 
• text-indent: -999em (скрин-ридер увидит блок, но в этом случае содержимое блока должно быть ограничено текстом и инлайновыми элементами )
• position: absolute; left: -999em (в этом случае скрин-ридер увидит блок, и в блоке может содержаться любая информация)

Мне понравился этот пример. Он показывает, что если сайт разрабатывается с учетом возможности прочтения его скрин-ридером, то нельзя просто аккуратненько расставить дополнительные атрибуты в конце. Об этом надо думать заранее, на этапе проектирования стилей. А если мы все же действуем в рамках концепции progresive enhancement, то когда дело дойдет до ARIA-стандарта, придется рефакторить имеющийся код и стили.

2) В рамках ARIA-стандарта разработаны роли и состояния (на практике это атрибуты тегов). Атрибут role часто перекливается с  названиями HTML5-тегов, но все равно имеет место быть пока существует несемантическая разметка.

3) Использование Ajax также являлось бы проблемой для скрин-ридеров. Но в рамках ARIA есть атрибут aria-live, который позволяет следить за изменениями на странице.

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

***

Ну и общее резюме о книге: для меня книжка практически не открыла ничего нового (если не считать стандарта WAI-ARIA), но полезна тем, что многое разложила по полочкам.