Начиная с 1994 года сообщество веб-разработчиков говорит о graceful degradation. Концепция заключалась в том, что пользователям современных браузеров контент предоставлялся в полном виде а тем кто использовал Netscape 4 в упрощенном. Этот подход работал хорошо, но не способствовал развитию универсально доступного веб, как его видел Тим Бернерс-Ли. Спустя десяток лет, несколько умных людей задумались о graceful degradation и обнаружили, что это не всегда лучший вариант. Озабоченные доступностью контента и возможностями мобильных браузеров, они искали новый путь в веб-разработке — путь сфокусированный на контенте и позволяющий больше, чем просто дать минимальный доступ старым браузерам и устройствам.

На SXSW в 2003 году, Стив Чампеон и Ник Финк провели презентацию под названием «Inclusive Web Design For the Future», в которой они обозначили новый подход к веб разработке. Стив назвал ее: прогрессивное улучшение (progressive enhancement).

В чем различия подходов

Чтобы внести ясность, давайте определимся в чем разница между graceful degradation и прогрессивным улучшением. Оба подхода сосредоточены на том, чтобы сайт хорошо работал в различных браузерах и устройствах, разница в том как предполагается этого достигать.

graceful degradation

Graceful degradation сфокусирована на создании веб-сайта для наиболее продвинутого браузера. Тестирование в браузерах которые разработчики считают устаревшими проводиться в последней четверти цикла разработки и часто ограничены предыдущими версиями основных браузеров (IE, Mozilla).

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

прогрессивное улучшение

Прогрессивное улучшение — стратегия сфокусированная на контенте. Заметьте разницу: Я даже не упомянул о браузерах.

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

Так как же это работает?

Понять прогрессивное улучшение очень легко: просто начинайте думайть с контента. Контент создает базу на которой располагаются слои оформления и интерактивности. Представьте арахис M&M:

M&M

В центре орешек контента, семантически размеченный с помощью (X)HTML. Дальше идет слой CSS. И завершает картину слой JavaScript, как плотная оболочка конфеты с замечательным вкусом (которая к тому же не позволяет конфете таять в руках).

Знакомые с мантрой поклонников стандартов — разделение, разделение, разделение — прекрасно поймут этот подход. Разработку основанную на веб стандартах часто сравнивают со слоеным пирогом (или с бисквитом ). Я предпочитаю аналогию с арахисом M&M, поскольку в нем все слои полностью окружают контент, точно также как на самом деле это делают стили и скрипты.

Если вам еще не надоела моя пищевая аналогия, я расскажу чем этот подход хорош и как слои связаны с парадигмой прогрессивного улучшения.

Арахис

Некоторые предпочитают обычный арахис арахису M&M, точно так же некоторые пользователи (и поисковые роботы) хотят только контент.

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

Разметка должна предоставлять таким пользователям возможность пользоваться сайтом на базовом уровне.

Шоколадный слой

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

Есть люди которые любят арахис в шоколаде. У некоторых браузер поддерживает CSS, но не JavaScript, а кому-то повезло работать в компании IT отдел которой страдает фобией JavaScript. В любом случае эти люди должны получить доступ к контенту сайта.

В следующей статье серии будут рассмотрены несколько методов применения стилей к контенту с учетом прогрессивного улучшения.

Оболочка

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

Я не знаю насколько трудно сделать оболочку для M&M (хотя догадываюсь, что арахис в шоколаде окунают в соответствующую смесь), но добавить новый функционал с помощью JavaScript очень просто если вы делаете это в соответствии с концепцией прогрессивного улучшения. Точно так же как M&M может быть разных цветов, слой JavaScript может отличаться в зависимости от возможностей браузеров и устройств с помощью которых посетители просматривают сайт.

Вы наверняка знаете, что такой подход к использованию скриптов называется ненавязчивый (unobtrusive) JavaScript, ему будут посвящены третья и последняя статья серии.

Соберем все вместе

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

Translated with the permission of A List Apart Magazine and the author[s].