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

Рискуя испортить вам сюрприз, ответом будет громкое "Нет!". Если вы посетите этот сайт, вы увидите этот ответ, гордо вывешенный на экране. Но в зависимости от возможностей вашего браузера, вы можете увидеть или не увидеть некоторые стилистические изыски, примененные к этому однословному ответу. Даже если вы не увидите никаких стилей, вы все равно получите содержимое, размеченное с помощью семантического HTML.

Cut the Mustard (

Разрезание

горчицы

)

Разделение структуры и представления относительно простое. Вы можете объявлять любые стили, какие захотите, будучи уверенными в том, что браузеры проигнорируют то, что им непонятно. Разделить структуру и поведение не так просто. Если вы дадите браузеру JavaScript, который он не понимает, он не только не применит желаемое поведение, но и откажется разбирать остальную часть JavaScript.

Прежде чем использовать ту или иную функцию JavaScript, стоит проверить, поддерживается ли она. Такое обнаружение функции может уберечь посетителей вашего сайта от проблем из-за неподдерживаемой функции. Если вы хотите использовать Ajax, сначала проверьте, поддерживает ли браузер объект, который вы собираетесь использовать для включения этой функции Ajax. Если вы хотите использовать API геолокации, сначала проверьте, поддерживает ли его браузер.

Команда веб-разработчиков, работающая над новостным сайтом BBC, назвала этот вид обнаружения функций " разрезание горчицы". Браузеры, которые отрезают горчицу, получают улучшенный опыт. Браузеры, которые не отрезают горчицу, по-прежнему получают доступ к контенту, но без улучшений JavaScript.

Обнаружение особенностей, отрезание горчицы, как бы вы это ни называли, является довольно простой техникой. Допустим, вы хотите обойти DOM с помощью querySelector и прикрепить события к некоторым узлам в документе с помощью addEventListener. Ваша логика разрезания горчицы может выглядеть примерно так:

if (document.querySelector && window.addEventListener) {

// Enhance!

}

Здесь следует отметить два момента:

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

Другого утверждения не существует.

Агрессивное улучшение

В те времена, когда веб-дизайнеры пытались контролировать браузеры, как печатные издания, успешный дизайн измерялся пиксельным совершенством: выглядел ли сайт одинаково в каждом браузере?

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

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

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

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

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

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

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