Устойчивый веб-дизайн - Jeremy Keith
В более поздней книге "Часы долгого времени" Стюарт Брэнд применил идею срезания слоев – или темповых слоев – к самой цивилизации. Самый медленный слой – это природа, затем идет культура, за ней – управление, затем – инфраструктура, и, наконец, торговля и мода – самые быстрые слои. Каждый слой зависит от нижележащего. В свою очередь, накопление каждого последующего слоя позволяет создать "соседний возможный", наполненный еще большими возможностями.
Аналогичным образом, выразительность CSS и JavaScript возможна только на основе HTML, который сам по себе требует URL для доступа, который, в свою очередь, зависит от протокола передачи гипертекста, лежащего на фундаменте TCP/IP.
Каждый из срезаемых слоев полотна может быть отслоен, чтобы открыть слой ниже. Выполнение этого процесса в обратном порядке – поочередное применение каждого слоя – является ключевым принципом упругого веб-дизайна.
Прогрессивное улучшение
В 2003 году фестиваль South by Southwest в Остине, штат Техас, был в первую очередь мероприятием для музыкантов и кинематографистов. Сегодня музыкальная и кинематографическая части затмевают по значимости South by Southwest Interactive, посвященный всему цифровому. В 2003 году South by Southwest Interactive была небольшим мероприятием, втиснутым в один угол одного этажа Остинского конференц-центра. Это был шанс для нескольких веб-дизайнеров и блоггеров собраться вместе и обменяться идеями. В тот год Стивен Чампеон и Ник Финк представили доклад под названием "Инклюзивный веб-дизайн для будущего с прогрессивным улучшением". В начале доклада они обратились с призывом к оружию:
«Веб-дизайн должен созреть и принять развитие последних нескольких лет, отказаться от отчужденного отношения, сформировавшегося в эпоху грубости и беспорядка доткомов, осознать грядущее будущее широкого разнообразия устройств и платформ и отделить семантическую разметку от логики представления и поведения.»
Как и Тим Бернерс-Ли, Стивен Шампеон имел опыт работы с SGML, языком разметки, который оказал сильное влияние на HTML. Работая с документами, которые необходимо было перепрофилировать для различных целей, он понял, как важно отделять структуру от представления. Осмысленно размеченный документ может быть представлен множеством способов с помощью CSS и JavaScript.
Такой многоуровневый подход к Интернету позволяет предоставлять один и тот же контент широкому кругу людей. Но это не означает, что все получают одинаковые впечатления. В Champeon поняли, что четкое разделение задач позволит применять улучшения в соответствии с возможностями устройства конечного пользователя.
Перефразируя Карла Маркса, прогрессивное улучшение позволяет дизайнерам требовать от каждого браузера в соответствии с его возможностями и предоставлять каждому устройству в соответствии с его потребностями.
Должны ли веб-сайты выглядеть одинаково в каждом браузере?
Некоторые веб-дизайнеры опасались, что прогрессивное улучшение станет творческой смирительной рубашкой. Проектирование для наименьшего общего знаменателя не похоже на рецепт прогресса. Но это было заблуждение. Прогрессивное улучшение требует, чтобы дизайнеры начинали с самого низкого общего знаменателя (хорошо размеченного документа), но нет предела тому, куда они могут двигаться дальше.
На самом деле, именно наличие прочной основы HTML позволяет веб-дизайнерам экспериментировать с новейшими и лучшими CSS. Благодаря закону Постеля и свободной модели обработки ошибок в CSS дизайнеры могут свободно применять стили, которые работают только в новейших браузерах.
Это означает, что не у всех будет одинаковый визуальный дизайн. Это не ошибка. Это особенность Интернета. Новые браузеры и старые браузеры; монохромные дисплеи и многоцветные дисплеи; быстрые соединения и медленные соединения; большие экраны, маленькие экраны и отсутствие экранов – все могут получить доступ к вашему контенту. Этот контент должен выглядеть по-разному в таких разных ситуациях. Если веб-сайт выглядит одинаково как в браузере десятилетней давности, так и на новейших устройствах, то, скорее всего, он не использует преимущества большой гибкости, которую предлагает Интернет.
Чтобы подчеркнуть это, дизайнер Дэн Седерхолм создал веб-сайт, чтобы ответить на вопрос: "Должны ли веб-сайты выглядеть одинаково в каждом браузере?". Ответ на этот вопрос вы можете найти по адресу URL:
dowebsitesneedtolookexactlythesameineverybrowser.com
Рискуя испортить вам сюрприз, ответом будет громкое "Нет!". Если вы посетите этот сайт, вы увидите этот ответ, гордо вывешенный на экране. Но в зависимости от возможностей вашего браузера, вы можете увидеть или не увидеть некоторые стилистические изыски, примененные к этому однословному ответу. Даже если вы не увидите никаких стилей, вы все равно получите содержимое, размеченное с помощью семантического HTML.
Cut the Mustard (
Разрезание
горчицы
)
Разделение структуры и представления относительно простое. Вы можете объявлять любые стили, какие захотите, будучи уверенными в том, что браузеры проигнорируют то, что им непонятно. Разделить структуру и поведение не так просто. Если вы дадите браузеру JavaScript, который он не понимает, он не только не применит желаемое поведение, но и откажется разбирать остальную часть JavaScript.
Прежде чем использовать ту или иную функцию JavaScript, стоит проверить, поддерживается ли она. Такое обнаружение функции может уберечь посетителей вашего сайта от проблем из-за неподдерживаемой функции. Если вы хотите использовать Ajax, сначала проверьте, поддерживает ли браузер объект, который вы собираетесь использовать для включения этой функции Ajax. Если вы хотите использовать API геолокации, сначала проверьте, поддерживает ли его браузер.
Команда веб-разработчиков, работающая над новостным сайтом BBC, назвала этот вид обнаружения функций " разрезание горчицы". Браузеры, которые отрезают горчицу, получают улучшенный опыт. Браузеры, которые не отрезают горчицу, по-прежнему получают доступ к контенту, но без улучшений JavaScript.
Обнаружение особенностей, отрезание горчицы, как бы вы это ни называли, является довольно простой техникой. Допустим, вы хотите обойти DOM с помощью querySelector и прикрепить события к некоторым узлам в документе с помощью addEventListener. Ваша логика разрезания горчицы может выглядеть примерно так:
if (document.querySelector && window.addEventListener) {
// Enhance!
}
Здесь следует отметить два момента:
Это определение функции, а не браузера. Вместо того чтобы спрашивать "какой у вас браузер?" и пытаться сделать вывод о поддержке функции из ответа, безопаснее просто спросить "поддерживаете ли вы эту функцию?".
Другого утверждения не существует.
Агрессивное улучшение
В те времена, когда веб-дизайнеры пытались контролировать браузеры, как печатные издания, успешный дизайн измерялся пиксельным совершенством: выглядел ли сайт одинаково в каждом браузере?
Если каждый браузер не поддерживал определенную функцию – скажем, закругленные углы в CSS, – то эта функция была недоступна. Вместо этого дизайнеры имитировали ее с помощью дополнительной разметки и изображений. В результате веб-сайтам не хватало структурной честности. Это была не только пустая трата таланта и сил дизайнеров, но и возможностей современных веб-браузеров.
Появление мобильных устройств, планшетов и
