Jeremy Keith
Устойчивый веб-дизайн
Общение
Применить трехэтапный процесс к новостному сайту относительно просто. Просмотр новостей – это довольно пассивное действие. Чтобы действительно проверить этот процесс, нам нужно применить его к чему-то более интерактивному.
Предположим, мы создаем социальную сеть. Люди, использующие наш инструмент, должны иметь возможность общаться друг с другом независимо от того, в какой точке мира они находятся. Основной функцией является отправка и получение сообщений.
Вот лишь некоторые из социальных сетей, которые появились в Интернете.
Отображать сообщения в веб-браузере несложно. На сервере может быть много сложностей, связанных с базами данных, синхронизацией, очередями и балансировкой нагрузки, но HTML, необходимый для структурирования списка в обратном хронологическом порядке, не сильно отличается от HTML, необходимого для новостного сайта.
Для отправки сообщения из браузера на веб-сервер требуется интерактивный HTML. Вот тут-то и приходят на помощь формы. В этом случае формы с текстовым вводом и кнопкой отправки должно быть достаточно, по крайней мере, для базового функционала.
Теперь люди могут получать и отвечать на сообщения в нашей социальной сети, независимо от того, какое устройство или браузер они используют. Теперь задача состоит в том, чтобы улучшить этот опыт, не нарушая при этом фундаментальную деятельность.
Если бы мы оставили сайт в таком состоянии, только на HTML, я не думаю, что мы скоро отпраздновали бы выход нашей компании на IPO. Чтобы действительно выделить наш сервис на фоне конкурентов, нам необходим третий шаг в этом процессе: улучшение!
По крайней мере, мы можем применить ту же логику, которую мы использовали для новостного сайта, и стилизовать наш сервис. Используя CSS, мы можем обеспечить цвет, текстуру, контраст, веб-шрифты, а для больших экранов – макет. Но давайте не будем останавливаться на презентации. Давайте улучшим и взаимодействие.
В настоящее время эта социальная сеть имеет такой же тип взаимодействия на основе страниц, как и новостной сайт. Каждый раз, когда кто-то отправляет сообщение на сервер, сервер отсылает браузеру новую страницу. Мы можем сделать лучше. Пришло время для Ajax.
Мы можем перехватить отправку формы и отправить данные на сервер с помощью Ajax – мне нравится использовать слово Hijax для описания такого перехвата Ajax. Если есть ответ от сервера, мы также можем обновить часть текущей страницы вместо обновления всей страницы. Также было бы неплохо представить подходящую анимацию.
Мы можем пойти дальше. Браузеры, поддерживающие WebSockets, могут получать сообщения с сервера. Люди, использующие эти браузеры, могли получать обновления, как только они были отправлены. Можно даже использовать одноранговые соединения между браузерами, чтобы люди могли общаться напрямую.
Не каждый браузер поддерживает эту расширенную функциональность. Это не страшно. Основная функциональность – отправка и получение сообщений – по-прежнему доступна всем.
Творение
Что, если бы наша социальная сеть была более специализированной? Давайте сделаем сервис для обмена фотографиями. Это немного поднимает планку. Вместо отправки и получения сообщений основной функцией теперь является отправка и получение изображений.
Сайты обмена фотографиями.
Интерфейс должен показывать обратный хронологический список изображений. HTML справится с этой задачей. И снова нам нужна форма для отправки данных на сервер, но на этот раз это должна быть загрузка файла, а не текстовое поле.
С этими изменениями основная функциональность создана. Настало время для усовершенствования.
Помимо всех существующих усовершенствований – CSS, веб-шрифтов, Ajax, WebSockets – мы можем использовать API File, представленный в HTML5. Это позволяет нам манипулировать изображением непосредственно в браузере. Мы можем применять эффекты к изображению перед отправкой его на сервер. Используя фильтры CSS, мы можем предложить целый ряд улучшений изображения – от оттенков сепии до виньеток. Но если браузер не поддерживает API File или фильтры CSS, люди все равно могут загружать свои селфи с лицами уток.
Сотрудничество
Было время, когда использование программного обеспечения означало установку на компьютер отдельных программ. Сегодня можно иметь машину, на которой не установлено ничего, кроме веб-браузера. Написание электронных писем, поиск контактных данных, назначение встреч в календаре, ведение бухгалтерского учета и выполнение других финансовых задач – все это можно делать без установки специальных приложений. Вместо этого, зайдя по URL-адресу, можно вызвать нужный инструмент в нужный момент.
Поставка программного обеспечения через Интернет не просто заменяет способ работы, ориентированный на настольные компьютеры. Наличие подключения к Интернету открывает возможности для всех видов совместной работы. Возьмем, к примеру, приложения, которые когда-то назывались "текстовыми процессорами". Пока эти программы были привязаны к отдельным машинам, попытка совместного редактирования документа была сложной задачей, требующей много координации, пересылки файлов туда и обратно. При использовании Интернета, обмен одним URL-адресом может позволить нескольким людям работать над одним и тем же документом.
Инструменты совместного письма в Интернете.
Давайте применим трехэтапный процесс к текстовому процессору на базе Интернета:
«Определите основную функциональность.»
Тавтологическим ответом будет "обработка слов". Не очень полезно. Что люди на самом деле делают с этим программным обеспечением? Они пишут. Они делятся. Редактируют.
«Определите основную функциональность.»
Если посмотреть на наши три глагола – писать, делиться и редактировать – то один из них мы получаем бесплатно, просто используя URL: делиться. Два других – писать и редактировать – требуют использования формы. Базовый элемент TEXTAREA может служить вместилищем для слов, предложений и абзацев, из которых будет состоять все – от технических отчетов до великого американского романа. Отправка этого содержимого на веб-сервер означает, что его можно сохранить на потом.
Технически это текстовый процессор на основе веб-технологий, доступный любому, у кого есть веб-браузер и подключение к Интернету. Но работа в нем неуклюжа и скучна. Было бы стыдно не воспользоваться некоторыми более удобными возможностями, доступными в современных браузерах.
«Улучшайте!»
Используя JavaScript, скромный TEXTAREA можно заменить более богатым интерфейсом редактирования, распознающим каждое нажатие клавиши и применяющим стилизацию на лету. Веб-шрифты могут сделать процесс написания более красивым. Ajax позволит сохранять работу на сервере практически постоянно, без необходимости отправки формы. Сокеты WebSockets позволяют нескольким людям одновременно работать над одним и тем же документом.
Для работы Ajax и WebSockets требуется подключение к Интернету. Гарантии стабильного интернет-соединения нет, особенно если вы пытаетесь работать в поезде или в гостинице. Современные браузеры предоставляют функции, которые после первоначальной загрузки страницы могут превратить саму сеть в улучшение.
Если браузер поддерживает какую-либо форму локального хранения, то данные могут храниться в базе данных на стороне клиента. Нестабильные сетевые соединения или неожиданное отключение электричества не помешают сохранить важный документ. Используя Service Workers, веб-разработчики могут предоставить инструкции о том, что делать, когда браузер (или сервер) находится в автономном режиме.
Это современные возможности браузера, которые мы должны использовать в полной мере… как только мы убедимся, что предоставляем базовые возможности для всех.
Масштаб
Уорд Каннингем, создатель вики, придумал термин "технический долг", чтобы описать общую проблему в мире программного обеспечения. Решения, принятые в спешке в начале проекта, приводят к каскаду проблем в дальнейшем. Мне нравится думать о трехэтапном многоуровневом подходе как о своего рода "техническом кредите". Уделив время обеспечению основной функциональности в начале, вы получаете свободу для экспериментов в дальнейшем.
Некоторые люди неправильно понимают прогрессивное улучшение как отказ от новейших и лучших браузерных технологий, но на самом деле все наоборот. Многоуровневый подход к созданию веб-страниц дает вам разрешение попробовать новейшие API JavaScript, независимо от того, как много или мало браузеров в настоящее время их используют.
Мы рассмотрели несколько примеров применения трехэтапного подхода к нескольким продуктам и услугам – новостям, социальным сетям, обмену фотографиями и обработке текстов. Вы можете применить этот подход ко многим другим услугам: внесение и обновление пунктов в список дел, управление встречами в календаре, поиск маршрутов, бронирование столиков в ближайших ресторанах. Каждый из них может быть создан с помощью одного и того же процесса:
Определите основную функциональность.
Сделайте эту функциональность доступной, используя максимально простую технологию.
Улучшайте!
Этот подход работает в разных масштабах. Он работает не только на самом высоком уровне сервиса; его можно применять и на уровне отдельных URL-адресов.
Спросите "Какова основная функциональность этого URL?" сделать эту функциональность доступной с использованием простейшей технологии, а затем улучшить оттуда. Это может действительно прояснить, какой контент наиболее важен, что важно в мобильном первом реагирующем рабочем процессе. Как только вы это установите, убедитесь, что содержимое отправляется с сервера как HTML (простейшая возможная технология). Затем, используя условную загрузку, вы можете решить сделать запросы Ajax для поддержки контента, если экран недвижимости доступна. Для URL-адреса отдельной новостной истории, сама история будет отправлена в первоначальном ответе, но связанные с ней истории или комментарии могут быть перенесены с сервера только по мере необходимости (хотя вы все еще можете предоставить ссылки на соответствующие истории и комментарии для всех).
Мы можем пойти глубже. Мы можем применить трехэтапный процесс в масштабе отдельных компонентов на странице. "Какова основная функциональность этого компонента? Как я могу сделать эту функциональность доступной, используя максимально простую технологию? А теперь как я могу ее улучшить?"
Компонент может быть разработан как поющая и танцующая интерактивная карта. В рентгеновских очках основная функциональность оказывается гораздо проще: показать местоположение. Предоставьте адрес этого места в виде текста: простейшая возможная технология. Теперь вы можете улучшить.
Стоит помнить, что улучшения могут предоставляться по скользящей шкале. Первым улучшением для текстового адреса может быть статичное изображение. Следующим усовершенствованием может быть замена статичного изображения интерактивной "скользкой" картой, работающей на Ajax. Если браузер поддерживает API геолокации, можно показать расстояние до места. Добавьте анимацию и переходы, чтобы лучше передать направление.
Навигация сайта – еще один дискретный компонент, который хорошо поддается скользящей шкале улучшений. Основная функциональность навигации заключается в предоставлении ссылок на ресурсы. Самая простая и до сих пор лучшая технология для этого – скромная гиперссылка. Список ссылок – это то, что нужно. Теперь, когда все готово, вы можете усовершенствовать навигацию, сделав ее по-настоящему привлекательной. Навигация вне холста, прогрессивное раскрытие, скольжение, пролистывание, угасание, расширение… пределы неба безграничны.
Поскольку улучшения могут быть добавлены в соответствии с возможностями каждого браузера, быстро становится ясно, что этот подход не сводится к тому, чтобы иметь две версии всего (базовую версию и улучшенную версию). Вместо этого сервис, URL-адреса и компоненты, которые вы разрабатываете, могут быть восприняты любым количеством способов. И это нормально.
Веб-сайты не обязательно должны выглядеть одинаково в каждом браузере.
Рекомендации
Designing With Progressive Enhancement by Filament Group
Глава 7: Проблемы
Четвертая ежегодная конференция по
гипертексту состоялась в Сан-Антонио, штат Техас, в декабре 1991 года. Проект Тима Бернерса-Ли "World Wide Web" тогда только начинал формироваться. Полагая, что организаторы и участники конференции оценят проект, он подал предложение на Hypertext '91. Предложение было отклонено.
Гипертекстовое сообщество считало проект World Wide Web слишком упрощенным. Почти каждая другая гипертекстовая система включала концепцию двусторонней связи. Если ресурс перемещается, любые ссылки, указывающие на этот ресурс, автоматически обновляются. Сеть не давала таких гарантий. Его система ссылок была намного проще – вы просто ссылаетесь на что-то, и все. Организаторам «Гипертекста-91» это казалось безнадежно наивным. Они не понимали, что простота Интернета на самом деле была его силой. Поскольку связывание было таким простым, любой мог это сделать. Это окажется решающим фактором в принятии и успехе Всемирной паутины.
Слишком велик соблазн быстро заявить, что тот или иной подход наивен, чрезмерно упрощен и нереалистичен. Идея о том, что веб-сайт может одновременно обеспечивать универсальный доступ для всех и одновременно предоставлять богатый опыт погружения для более мощных устройств… тоже кажется безнадежно наивной.
Это решение выносилось много раз за всю историю существования сети.
"Это слишком просто"
Когда проект Web Standards Project начал кампанию, призывающую дизайнеров перейти с таблиц для верстки на CSS, она встретила сопротивление. Их снова и снова критиковали за наивность. "Конечно, макет на основе CSS может подойти для простого персонального сайта, но он никак не может подойти для большого сложного проекта".
Затем Даг Боуман возглавил CSS-редизайн сайта Wired.com, а Майк Дэвидсон – CSS-редизайн сайта ESPN.com. После этого открылись шлюзы.
Когда Итан Маркотте продемонстрировал возможности отзывчивого дизайна, это встретило сопротивление. "Конечно, отзывчивый дизайн может подойти для простого персонального сайта, но он никак не может быть масштабирован для большого сложного проекта".
Затем газета Boston Globe запустила свой отзывчивый сайт. Microsoft сделала свою домашнюю страницу отзывчивой. Снова открылись шлюзы.
Сегодня похожая история. "Конечно, прогрессивное улучшение может сработать для простого персонального сайта, но оно никак не может подойти для большого сложного проекта".
Шлюзы готовы к открытию. Нам просто нужно, чтобы вы создали постер для устойчивого веб-дизайна.