Прогрессивное улучшение веб-контента

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Адаптивная верстка
• Вспышка нестилизованного контента flash of unstyled content (FOUC)
• Прогрессивное веб-приложение
• Семантический HTML
• Универсальный дизайн
• Ненавязчивый JavaScript