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

Они абсолютно правы. Тот, кто пользуется старым браузером, должен иметь доступ к тому же контенту, что и пользователь новейшего и лучшего веб-браузера. Но это не значит, что они должны получать одинаковые впечатления. Как сказал Брэд Фрост:

«Существует разница между поддержкой и оптимизацией.»

Поддерживайте все браузеры … но не оптимизируйте все.

Некоторые дизайнеры неправильно понимают прогрессивное улучшение, считая, что все функциональные возможности должны быть предоставлены каждому. На самом деле все наоборот. Прогрессивное улучшение означает предоставление основной функциональности для всех. После этого каждый браузер сам за себя. Прогрессивное улучшение не ограничивает возможности использования функций, а предоставляет веб-дизайнерам возможность безопасно использовать новейшие и лучшие функции, не беспокоясь о старых браузерах. Скотт Джел из агентства Filament Group выразил это кратко:

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

Если сайт создан с использованием прогрессивного улучшения, то ничего страшного, если какая-то функция не поддерживается или не загружается: 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 может быть излишне многословным; его трудно передать или запомнить.

Теперь, когда новости были размечены с помощью соответствующих элементов HTML – статей, заголовков, абзацев, списков и изображений – пришло время для третьего шага: улучшить!

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

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

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

Благодаря постоянно развивающейся природе CSS, существует множество способов применения макета. Как сказал Энди Таненбаум:

«Самое приятное в стандартах то,