В этой статье мы попробуем разобраться, в чем же разница между двумя принципами создания страницы на основе «отзывчивого» веб-дизайна: Progressive Enhancement и Graceful Degradation.
Graceful degradation
Graceful degradation, или «отказоустойчивость» - это более широкое понятие, которое применяется, не только в веб-дизайне. В общем смысле предполагает способность системы работать даже в случае отказа некоторых ее компонентов. И чем серьезнее отказ, тем ниже качество работы системы или работы с системой, но при этом основной функционал системы остается рабочим.
Graceful degradation может выражаться в возможности работы с отключенным JavaScript, в акуратном отображении сайта в браузере без поддержки спецификации CSS3, в адекватном отображении сайта с отключенными картинками. Все эти отказы не должны влиять на работу веб-приложения. Однако, если все работает, то пользователю гораздо удобнее пользоваться сайтом.
Если рассмотреть конкретный пример, например в области проектирования веб-интерфеса, то этот принцип можно сформулировать как «система может работать и с полностью отключенным JavaScript, но с включенным с ней будет работать намного удобнее». Вопрос не в том, может ли быть такая ситуация, что JS отключен или не функционирует полностью, или почему это происходит. Эта ситуация берется как данность. Дизайнер должен разработать такой интерфейс, который будет так же продолжать работать, пусть и с отключенным JS.
Часто для следования этому принципу приходится переделывать логику серверной обработки форм. Однако, такой подход будет окупаться, если задуматься об отказоустойчивости еще на этапе планирования формы.
Соблюдение принципа graceful degradation позволяет пользователям (а каждый пользователь — это потенциальный клиент) иметь возможность работы с сайтом в любых ситуациях.
Progressive Enhancement
Прогрессивное улучшение представляет собой принцип, который вкупе с «mobile first» создает теоретическую основу для «отзывчивого» (адаптивного) веб-дизайна. Уже его название говорит, что он позиционирует создание веб-страницы поэтапно, циклически, по принципу «от простого - к сложному». На каждом из заранее намеченных этапов внешний вид страницы должен становиться красивее, лучше и удобнее, однако весь функционал должен быть доступен изначально.
Является более частным случаем graceful degradation, так как все построенные на нем веб-страницы будут полностью соответствовать принципу graceful degradation.
Обычно создание страницы по принципу прогрессивного улучшения состоит из следующих этапов:
- Создание страницы на «чистом» HTML
На этом этапе создается полнофункциональная страница, которая состоит из одного только HTML-кода, семантически и логически верного, а, значит может интерпретироваться любым браузером, даже самым простейшим. На этом этапе не производится никакого форматирования и браузер сам форматирует страницу по тем стандартам, которые в нем вложены. Прогрессивное улучшение настаивает на том, что первый этап самый важный, так как нет в вебе ничего более ценного, чем контент.
Коротко: создание семантической и логической структуры документа
- Добавление правил CSS
На этом этапе применяется CSS-таблица старого формата: добавляется сетка разметки, позиционирование элементов, применяются фоновые изображения для блоков, изменяются стили, цвета и начертания текстов. В общем, страница получает новый стилизованный вид, становится красивее и приятнее.
Коротко: придание внешнего вида документу
- Применение CSS3
Теперь к документу можно применить все эффекты и улучшения, предусмотренные спецификацией CSS3. То есть добавить полупрозрачность, тени, скругление углов для блоков, плавные анимационные переходы для псевдоклассов или элементов форм.
Коротко: придание безупречности внешнему виду документа
- Создание скриптов на JavaScript
На этом этапе создаются все эффекты и принципы взаимодействия веб-страницы с пользователем с использованием JavaScript. Это и запросы AJAX, и динамическая загрузка или проверка данных, анимационные эффекты и виджеты (например, Prototype или jQuery). В общем делаем страницу удобнее для пользователя.
Коротко: взаимодействие, интерактивность, удобство
Попробуем применить данный подход на практике. Разработаем и оформим простейшую форму входа на сайт. На первом этапе создадим форму логина на чистом HTML. Форма не так красива, но она полностью функциональна. Ниже приведен код страницы и результат отображения в браузере:
Теперь на втором этапе придадим форме стиль применив к ней таблицу стилей, содержащую только те правила, которые применимы к CSS без специальных свойств. Добавим цвет фона, отступы, выравнивание. Теперь форма выглядит лучше:
Теперь добавим правила из спецификации CSS3. Добавим закргления к блокам, тени для полей ввода текста, стилизуем кнопку, с помощью новых селекторов уберем ненужный отступ сверху. Получим улучшенную форму:
На последнем этапе можем создать AJAX-запрос, чтобы пользователь мог зайти на сайт без необходимости перезагружать страницу.
При этом на каждом конкретном этапе (при поддержке его браузером) будет отображаться полностью функциональная страница. Но если браузер поддерживает более совершенные технологии, то страница становится только лучше.
Какому принципу следовать?
Если сайт максимально эффективно выстроить по концепции graceful degradation, то получится приблизительно то же самое, что и было бы при использовании progressive enhancement. Так в чем же тогда разница?
Дело в том, что построить сайт по принципу graceful degradation достаточно сложно, так как немного разработчиков могут сделать это качественно. В самом простом случае graceful degradation можно сделать следующее: создать сайт для самой последней версии браузера, а затем показать пользователям сообщение, в котором указывается, что им необходимо выполнить загрузку новой версии браузера. При этом разработчиков может и не волновать, как сайт выглядит в старых браузерах. Еще одним примером плохого graceful degradation является полное отключение функциональности сайта при отключении JavaScript. Яркий пример – отправление сообщений на сайте Facebook.com.
Поэтому progressive enhancement возник в ответ на некачественный graceful degradation. Проектировать такие интерфейсы стало проще и качественнее, так как есть четко сформулированные этапы создания интерфейса.
В адаптивном дизайне есть понятие «mobile first», которое в чем-то соответствует понятию progressive enhancement, так как призывает действовать от простого к сложному, от мобильных экранов до настольных ПК. Именно поэтому ключ к правильному применению адаптивного веб-дизайна зависит от умения разработчика применять принципы progressive enhancement и mobile first.