Прогрессивное улучшение
Стратегия веб-дизайна, делающая акцент на веб-контенте в первую очередь
Порядок прогрессивного улучшения: HTML , CSS и JavaScript .
Статья Википедии, доступ к которой осуществляется через чистый HTML (первый слой). Без стилей (второй слой) и скриптов (третий слой) содержимое составляет всего [ по сравнению с? ] 76 КБ.

Прогрессивное улучшение — это стратегия в веб-дизайне , которая делает акцент на веб-контенте в первую очередь, позволяя всем получить доступ к базовому контенту и функциональности веб-страницы, в то время как пользователи с дополнительными функциями браузера или более быстрым доступом в Интернет получают вместо этого расширенную версию. Эта стратегия ускоряет загрузку и облегчает сканирование поисковыми системами , поскольку текст на странице загружается немедленно через исходный код HTML , а не ждет, пока JavaScript инициирует и загрузит контент впоследствии, что означает, что контент, готовый к потреблению «из коробки», подается немедленно, а не за дополнительными слоями. [1] [2] [3]

Эта стратегия подразумевает отделение семантики представления от контента, при этом представление реализуется в одном или нескольких дополнительных слоях, активируемых на основе аспектов браузера или интернет-соединения клиента . На практике это означает обслуживание контента через HTML , «наименьший общий знаменатель» веб-стандартов, и применение стилей и анимации через CSS в технически возможной степени, а затем применение дальнейших улучшений через JavaScript . [4] Устаревший Adobe Flash можно рассматривать как разделивший последнее место с JavaScript, когда он широко использовался. [5] [6] Поскольку веб-браузеры могут загружать функции сайта в поддерживаемом объеме, а не не загружая весь сайт из-за одной ошибки или отсутствующей функции в JavaScript, постепенно улучшающийся сайт более стабилен и обратно совместим . [4]

История

«Прогрессивное улучшение» было придумано Стивеном Чампеоном и Ником Финком на конференции SXSW Interactive 11 марта 2003 года в Остине [7] и в серии статей для Webmonkey , опубликованных в период с марта по июнь 2003 года [8].

Конкретные методы каскадных таблиц стилей (CSS), относящиеся к гибкости макета страницы, подстраивающегося под различные разрешения экрана, являются концепцией, связанной с подходом адаптивного веб-дизайна . В 2012 году журнал net Magazine выбрал прогрессивное улучшение как № 1 в своем списке главных тенденций веб-дизайна 2012 года ( адаптивный дизайн был № 2). [9] Google поощряет принятие прогрессивного улучшения, чтобы помочь «нашим системам (и более широкому спектру браузеров) видеть полезный контент и базовую функциональность, когда определенные функции веб-дизайна еще не поддерживаются». [10]

Введение

Стратегия представляет собой эволюцию предыдущей стратегии веб-дизайна, известной как «грациозная деградация» , в рамках которой веб-страницы сначала разрабатывались для новейших браузеров, а затем делались пригодными для работы в старых версиях программного обеспечения браузеров. [11] [3] Цель «грациозной деградации» — позволить странице «деградировать» — оставаться презентабельной и доступной, даже если отсутствуют определенные технологии, ожидаемые дизайном. [12]

В прогрессивном улучшении стратегия намеренно меняется на противоположную: веб-контент создается с помощью документа разметки , ориентированного на наименьший общий знаменатель функциональности программного обеспечения браузера. [13] [8] [12] Если контент должен быть отображен интерактивно через JavaScript, например, сворачиваемое навигационное меню, это будет по умолчанию и только сначала скрыто самим JavaScript. [3] Разработчик добавляет все необходимые функции к представлению и поведению страницы, используя современный CSS, масштабируемую векторную графику (SVG) или JavaScript . [14]

Фон

Подход прогрессивного улучшения основан на раннем опыте Champeon ( около  1993–1994 гг .) со стандартным обобщенным языком разметки (SGML), предшествующим HTML и другим языкам веб-презентаций. [8]

Написание контента с семантической разметкой и рассмотрение представления контента отдельно, а не встраивание его в саму разметку, является концепцией, называемой правилом разделения представления и контента [15] [16] . Чэмпеон выразил надежду, что, поскольку веб-браузеры предоставляют стиль представления по умолчанию для контента HTML, это приведет к тому, что веб-сайты с их контентом будут написаны как семантический HTML, оставляя выбор представления веб-браузеру. [8] Однако потребности веб-дизайнеров привели к расширению стандарта HTML жестко закодированными функциями, которые позволяли контенту HTML предписывать определенные стили, и отнимали эту возможность у потребителей и их веб-браузеров. [8] Эти функции вынуждали издателей выбирать между принятием новых разрушительных технологий или разрешением контенту оставаться доступным для аудитории, использующей другие браузеры, дилемма между дизайном и совместимостью. [8] [17] [12] В 1990-х годах все большее количество веб-сайтов не работали ни в чем, кроме последних популярных браузеров. [12]

Эта тенденция изменилась после 1990-х годов, когда CSS получил широкую поддержку [8] [17] благодаря образовательным усилиям широких масс (Эрика Костелло, Оуэна Бриггса, Дэйва Ши и других), показывающим веб-дизайнерам, как использовать CSS для целей макетирования. [ необходима ссылка ]

Основные принципы

Стратегия прогрессивного улучшения состоит из следующих основных принципов: [8]

  • Базовый контент должен быть доступен для всех веб-браузеров.
  • Базовые функции должны быть доступны для всех веб-браузеров.
  • Разреженная семантическая разметка содержит весь контент.
  • Улучшенная компоновка обеспечивается внешними ссылками CSS. [17]
  • Улучшенное поведение обеспечивается внешним JavaScript-связанным кодом. [14]
  • Учитываются предпочтения веб-браузера конечного пользователя.

Поддержка и принятие

  • В августе 2003 года Джим Уилкинсон создал вики-страницу, посвященную прогрессивному улучшению, чтобы собрать некоторые приемы и советы, а также объяснить общую стратегию. [18]
  • Такие дизайнеры, как Джереми Кит, показали, как этот подход можно гармонично использовать с другими подходами к современному веб-дизайну (например, Ajax ), чтобы обеспечить гибкий, но мощный пользовательский опыт. [19] [20]
  • Аарон Густафсон написал серию статей для A List Apart, охватывающую основы прогрессивного улучшения, от базовой философии до подходов CSS и того, как работать с JavaScript. [21] [11] [22] [23]
  • CSS Zen Garden Молли Хольцшлаг и Дэйва Ши распространили использование термина для обозначения стратегий дизайна на основе CSS. [24]
  • Такие организации, как Web Standards Project (WaSP), стоявшие за созданием тестов Acid2 и Acid3 , [25] приняли прогрессивное совершенствование в качестве основы для своих образовательных усилий.
  • В 2006 году Нейт Кохли из Yahoo! подробно остановился на прогрессивном улучшении своего подхода к веб-дизайну и поддержке браузеров, Graded Browser Support (GBS). [12]
  • Стив Чипман из AOL ссылался на прогрессивное улучшение (с помощью сценариев DOM) как на основу своей стратегии веб-дизайна. [26]
  • Дэвид Арц, руководитель группы оптимизации AOL, разработал набор технологий доступной визуализации и изобрел метод демонтажа «улучшения» на лету, сохраняя предпочтения пользователя.
  • Прогрессивное улучшение используется в интерфейсах сайтов, работающих на MediaWiki , таких как Wikipedia , поскольку его можно читать, перемещаться и даже редактировать с помощью базового интерфейса HTML без стилей или скриптов, хотя он и улучшен таковыми. Например, панель инструментов редактора викитекста загружается и работает через JavaScript.
  • Крис Хайльманн обсудил важность целевой доставки CSS, чтобы каждый браузер получал только тот контент (и улучшения), с которым он может справиться. [27] [28]
  • Скотт Джел из Filament Group предложил «Прогрессивное улучшение на основе тестирования» [29], рекомендовав тестировать возможности устройства (а не выводить их из обнаруженного пользовательского агента ) перед предоставлением улучшений.
  • Wt — это серверная среда веб-приложений с открытым исходным кодом, которая прозрачно реализует прогрессивные улучшения во время начальной загрузки, переходя от простого HTML к полноценному Ajax.

Преимущества

Доступность, совместимость и охват

Веб-страницы, созданные в соответствии с принципами прогрессивного улучшения, по своей природе более доступны, [27] обратно совместимы , [6] и охватывают больше , поскольку стратегия требует, чтобы базовый контент всегда был доступен, не был заблокирован обычно неподдерживаемыми или скриптами, которые могут быть легко отключены, неподдерживаемыми (например, текстовыми веб-браузерами ) или заблокированы на компьютерах в чувствительных средах. [14] Кроме того, принцип разреженной разметки упрощает поиск этого контента для инструментов, которые читают контент вслух. Неясно, насколько хорошо сайты прогрессивного улучшения работают со старыми инструментами, разработанными для работы с табличными макетами, « супом тегов » и т. п. [ необходима цитата ]

Скорость, эффективность и контроль пользователя

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

Для сравнения, страницы, начальное содержимое которых загружается через AJAX, требуют от клиента неэффективного запуска JavaScript для загрузки и просмотра содержимого страницы, вместо того чтобы загрузить содержимое немедленно.

Поисковая оптимизация (SEO)

Улучшение результатов в отношении поисковой оптимизации (SEO) является еще одним побочным эффектом стратегии веб-дизайна на основе прогрессивного улучшения. Поскольку базовый контент всегда доступен для поисковых роботов, страницы, созданные с использованием методов прогрессивного улучшения, избегают проблем, которые могут помешать индексации поисковой системы, в то время как необходимость отображать базовый контент страницы посредством выполнения JavaScript сделает сканирование медленным и неэффективным. [27] [30]

Критика и ответы

Некоторые скептики, такие как Гаррет Даймон, выразили обеспокоенность тем, что прогрессивное улучшение не работает в ситуациях, где для достижения определенных представлений или поведения пользовательского интерфейса в значительной степени используется JavaScript. [31] Лори Грей (информационный архитектор в KnowledgeStorm [32] ) возразила, заявив, что информационные страницы должны кодироваться с использованием прогрессивного улучшения, чтобы их индексировали поисковые роботы. [33] Джефф Стернс (автор SWFObject , популярного приложения Flash) утверждал, что страницы с большим количеством Flash должны кодироваться с использованием прогрессивного улучшения. [34]

Дизайнеры Дуглас Боуман и Боб Стайн выразили сомнения относительно принципа разделения содержания и представления в абсолютных терминах, вместо этого настаивая на реалистичном признании того, что эти два понятия неразрывно связаны. [35] [15]

Смотрите также

Ссылки

  1. ^ "Прогрессивное улучшение быстрее". jakearchibald.com . 2013-09-03 . Получено 2021-11-11 .
  2. ^ Tse, Tiffany (2017-02-15). «Что такое прогрессивное улучшение и почему оно должно вас волновать?» . Получено 2023-09-28 .
  3. ^ abc Олссон, Томми (2007-02-06). "Изящная деградация и прогрессивное улучшение". Искусство доступности . Accessites.org. Архивировано из оригинала 2012-03-04 . Получено 2023-09-28 .
  4. ^ ab van der Sluis, Bobby (2005-04-19). "Десять хороших практик написания JavaScript в 2005 году". Архивировано из оригинала 2008-07-04 . Получено 14 апреля 2006 .
  5. ^ Миллс, Крис (8 июля 2011 г.). «Изящная деградация против прогрессивного улучшения». World Wide Web Consortium . Получено 2020-08-13 .
  6. ^ ab Nyman, Robert (2006-03-01). "Что такое доступность?" . Получено 14 апреля 2006 г.
  7. ^ Стивен Чампеон; Ник Финк (2003-03-11). "Инклюзивный веб-дизайн для будущего (презентация SxSWi)". Архивировано из оригинала 2014-11-08 – через South by Southwest .
  8. ^ abcdefgh Чемпеон, Стив (21.03.2003). «Прогрессивное улучшение и будущее веб-дизайна». Webmonkey . Получено 28.09.2023 .
  9. ^ "15 главных тенденций веб-дизайна и разработки в 2012 году". Creative Bloq . net . 9 января 2012 г. Архивировано из оригинала 2017-08-23.
  10. ^ Пьер Фар (2014), Обновление наших технических рекомендаций для веб-мастеров, блог Webmaster Central
  11. ^ ab Gustafson, Aaron (2008-10-07). «Понимание прогрессивного улучшения». A List Apart . Получено 2023-09-28 .
  12. ^ abcde Koechley, Nate (2006-02-13). "Graded Browser Support". Yahoo! Developer Network . Архивировано из оригинала 2006-04-14.
  13. ^ "101 совет по поисковой оптимизации". www.meta4creations.com . Получено 14.04.2016 . Прогрессивное улучшение […] означает [чтобы] создать ваш веб-сайт, начиная с браузеров с наименьшим общим знаменателем в уме.
  14. ^ abc Джеймс Эдвардс; Кэмерон Адамс (2006-03-07). "Script Smarter: Quality JavaScript from Scratch". SitePoint . Получено 14 апреля 2006 г. .
  15. ^ ab Stein, Bob (2000-11-17). «Тревога разлуки: миф об отделении стиля от содержания». A List Apart . Получено 28.09.2023 .
  16. ^ "Separation: The Web Designer's Dilemma". A List Apart . 14 мая 2004 г. Получено 24 мая 2017 г.
  17. ^ abc Malicoat, Todd (2003-08-23). ​​"Форма против функции в дизайне сайта". SEO Today . Архивировано из оригинала 2003-08-29 . Получено 14 апреля 2006 г.
  18. ^ Уилкинсон, Джим (2003), Прогрессивное улучшение - обсуждение CSS Архивировано 09.03.2016 на Wayback Machine
  19. ^ Блог Джереми Кейта Adactio (2005), Прогрессивное улучшение с помощью Ajax
  20. ^ Кит, Джереми (2006-06-20). «Поведенческое разделение». A List Apart . Получено 28-09-2023 .
  21. ^ Густафсон, Аарон (27.03.2007). «Разрушение пользовательского опыта». A List Apart . Получено 28.09.2023 .
  22. ^ Густафсон, Аарон (2008-10-22). "Прогрессивное улучшение с помощью CSS". A List Apart . Получено 2023-09-28 .
  23. ^ Густафсон, Аарон (2008-11-04). "Прогрессивное улучшение с JavaScript". A List Apart . Получено 2023-09-28 .
  24. ^ Лоусон, Брюс. «Интервью с Дэйвом Ши, садовником дзен-буддизма CSS». DMXzone.com . Архивировано из оригинала 2007-06-08 . Получено 2007-06-05 .
  25. ^ "Результаты теста Acid в популярных браузерах". SciActive . Архивировано из оригинала 2008-05-05 . Получено 2008-05-05 . Тест Acid 3 находится в стадии разработки и будет обновлен, когда The Web Standards Project выпустит финальную версию теста.
  26. ^ Стивен Г. Чипман (2005), New Skool DOM Scripting
  27. ^ abc Heilmann, Chris (22.02.2005). «Двойное зрение — дайте браузерам CSS, который они могут переварить». Developer Shed. Архивировано из оригинала 20.07.2006 . Получено 06.07.2017 .
  28. ^ "Семь ошибок доступности (часть 1)". Digital Web Magazine . 2006-04-12. Архивировано из оригинала 2006-04-12 . Получено 14 апреля 2006 г.
  29. ^ Jehl, Scott (23 сентября 2008 г.). "Test Driven Progressive Enhancement". A List Apart . Получено 27 октября 2009 г.
  30. ^ Спенсер, Стефан (2007-09-25). "PE хорош для SEO". Searchlight - CNET News . Архивировано из оригинала 2011-09-10.
  31. ^ Даймон, Гаррет (29.08.2005). "Реальность прогрессивного улучшения". Архивировано из оригинала 17.03.2007.
  32. ^ "IA Summit 2006: Speakers Biographies". ASIS&T . Архивировано из оригинала 2006-04-17.
  33. ^ Грей, Лори (2006-03-27). "Web 2.0 и SEO?". Ассоциация по информационным наукам и технологиям . Архивировано из оригинала 2006-04-17.
  34. ^ Стернс, Джефф (27.02.2006). «Использование альтернативного контента в качестве контента во Flash». deconcept . Получено 28.09.2023 .
  35. ^ Боуман, Дуглас (14 октября 2003 г.). "Они действительно разделены?". Stopdesign.com . Архивировано из оригинала 28 марта 2006 г. Получено 14 апреля 2006 г.

Дальнейшее чтение

  • Бриггс, Оуэн; Чэмпеон, Стивен; Костелло, Эрик; Паттернсон, Мэтью (2004) Каскадные таблицы стилей: отделение контента от представления (2-е изд.). Сан-Франциско: Apress. ISBN 1-59059-231-X 
  • Густафсон, Аарон (2011) Адаптивный веб-дизайн: создание насыщенных впечатлений с помощью прогрессивного улучшения . Чаттануга: Easy Readers. ISBN 978-0-9835895-0-1 . 
  • Кит, Джереми (2007) Bulletproof Ajax . Беркли: Новые гонщики. ISBN 0-321-47266-7 
  • Кит, Джереми (2005) DOM-скриптинг: веб-дизайн с JavaScript и объектной моделью документа . Беркли: друзья ED. ISBN 1-59059-533-5 
  • Паркер, Тодд; Толанд, Пэтти; Джел, Скотт; Костелло Вакс, Мэгги ( The Filament Group ) (2010) Проектирование с прогрессивным усовершенствованием Peachpit/New Riders. ISBN 978-0-321-65888-3 
Взято с "https://en.wikipedia.org/w/index.php?title=Progressive_enhancement&oldid=1262701636"