Устойчивый веб-дизайн

Если сайт создан с использованием прогрессивного улучшения, то ничего страшного, если какая-то функция не поддерживается или не загружается: Ajax, геолокация, что угодно. До тех пор, пока основная функциональность остается доступной, веб-дизайнерам не нужно изгибаться, пытаясь впихнуть поддержку новых функций в старые браузеры.

Вы также получаете сайт, более устойчивый к модели обработки ошибок JavaScript. Мат Маркиз работал вместе со Скоттом Джелом над отзывчивым веб-сайтом для газеты Boston Globe. Он отметил:

«Множество классных функций в Boston Globe не работают, когда JS ломается; "чтение новостей" – не одна из них.»

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

Рекомендации

Inclusive Web Design For the Future with Progressive Enhancement by Steven Champeon and Nick Finck

Do websites need to look exactly the same in every browser?

by Dan Cederholm

Support vs Optimization by Brad Frost

The Pastry Box by Scott Jehl

Глава 6: Шаги

"Всегда проектируйте вещь,

рассматривая ее в следующем, более широком контексте", – говорил финский архитектор Элиэль Сааринен. "Стул в комнате, комната в доме, дом в окружении, окружение в плане города".

На первый взгляд, веб-дизайн является разновидностью графического дизайна. Использование инструментов графического дизайна, таких как Photoshop, для разработки веб-сайтов укрепляет эту точку зрения. Но чтобы понять суть предназначения веб-сайта, мы должны рассматривать интерфейс в более широком контексте: чего люди пытаются достичь?

При разработке дизайна для Интернета очень соблазнительно думать о таких видах взаимодействия, как пролистывание, касание, нажатие, прокрутка, перетаскивание и опускание. Но очень немногие люди просыпаются утром, предвкушая день пролистывания и простукивания. Они скорее думают о том, как читать, писать, делиться, покупать и продавать. Веб-дизайнеры должны видеть не только поверхностные действия, но и находить под ними более значимые глаголы.

В своей книге Designing With Progressive Enhancement группа Filament Group описывает технику, которую они называют “the x‐ray perspective”( рентгеновской перспективой ):

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

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

Клюв этой утки похож на морду собаки.

Фотография Асмаа Ди.

Под лицензией Creative Commons Attribution-NonCommercial-NoDerivs 2.0 Generic.

Вот трехэтапный подход, который я использую в веб-дизайне:

Определите основную функциональность.

Сделайте эту функциональность доступной, используя максимально простую технологию.

Улучшайте!

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

Информация

Допустим, вы поставщик новостей. Это и есть основная функциональность – предоставлять новости. Есть много, много других услуг, которые вы также можете предоставить; интерактивные головоломки, уведомления в реальном времени и многое другое. Какими бы ценными ни были эти услуги, они, вероятно, не так важны, как обеспечение доступа людей к новостям.

Подборка новостных изданий.

Когда основная функциональность определена, пора переходить ко второму шагу: как сделать эту основную функциональность доступной с помощью максимально простой технологии?

Теоретически, простой текстовый файл был бы самым простым возможным способом предоставления новостей. Но поскольку мы говорим именно о веб-технологиях, давайте сделаем оговорку: как сделать основную функциональность доступной с помощью максимально простой веб-технологии? Это может быть HTML-файл, передаваемый по URL.

Даже на этой ранней стадии можно все переусложнить. HTML может быть излишне раздутым. URL может быть излишне многословным; его трудно передать или запомнить.