На SXSW в 2003 году, Стив Чампеон и Ник Финк провели презентацию под названием «Inclusive Web Design For the Future», в которой они обозначили новый подход к веб разработке. Стив назвал ее: прогрессивное улучшение (progressive enhancement).
В чем различия подходов
Чтобы внести ясность, давайте определимся в чем разница между graceful degradation и прогрессивным улучшением. Оба подхода сосредоточены на том, чтобы сайт хорошо работал в различных браузерах и устройствах, разница в том как предполагается этого достигать.graceful degradation
Graceful degradation сфокусирована на создании веб-сайта для наиболее продвинутого браузера. Тестирование в браузерах которые разработчики считают устаревшими проводиться в последней четверти цикла разработки и часто ограничены предыдущими версиями основных браузеров (IE, Mozilla).В соответствии с этой парадигмой, пользователи старых браузеров контент получат не в лучшем виде, но все же получат. Разработчики обращают внимание на исправление только наиболее заметных ошибок, при просмотре сайта в старом браузере.
прогрессивное улучшение
Прогрессивное улучшение — стратегия сфокусированная на контенте. Заметьте разницу: Я даже не упомянул о браузерах.Контент это то ради чего мы создаем сайты. Некоторые сайты его распространяют, некоторые собирают, некоторые запрашивают, некоторые манипулируют им, а некоторые делают все вышеперечисленное, но все они нуждаются в нем. Это делает прогрессивное улучшение более подходящей парадигмой. Именно поэтому Yahoo быстро адаптировало ее и использовало при создании стратегии поддержки браузеров.
Так как же это работает?
Понять прогрессивное улучшение очень легко: просто начинайте думайть с контента. Контент создает базу на которой располагаются слои оформления и интерактивности. Представьте арахис 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].
Источник
Комментариев нет:
Отправить комментарий