Гибкий веб-дизайн

Глава 3: Видения

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

Келлская книга — искусно иллюстрированный манускрипт, созданный более 1200 лет назад. Хочется назвать его произведением искусства, но это произведение дизайна. Цель книги — донести конкретное сообщение, а именно текст христианского Евангелия. С помощью иллюстраций и каллиграфии сообщение передается в столь располагающей манере, что им хочется любоваться.

A page from an illuminated manuscript.
Инципит Евангелия от Матфея в Келлской книге.

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

Печать и революция

Материалы и технологии сильно изменились примерно за последнее тысячелетие. Изобретение Гутенбергом наборного шрифта стало революцией в производстве. Если создание второй копии Келлской книги заняло бы столько же времени, сколько и первой, то тираж Библии Гутенберга мог быть произведен с куда меньшими трудозатратами. Несмотря на это, многие дизайнерские приемы, такие как буквицы и колонки, были позаимствованы у священных рукописей. Главные приемы оформления оставались теми же: зная высоту и ширину страницы, художники комбинировали элементы наилучшим образом.

Old style text in two columns.
Страница из Библии Гутенберга.

Техника оформления печатной продукции достигла зенита в двадцатом веке с распространением швейцарского стиля. Его структурированная верстка и четкая типографика отлично отражена в работах таких дизайнеров как Йозеф Мюллер-Брокманн и Ян Чихольд. Они сформулировали систему сетки и типографские форматы, основываясь на предшествующих столетиях дизайна.

A diagram demonstrating proportions.
Модульная сетка Яна Чихольда для средневекового манускрипта.

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

Несем свой талант в веб

Когда веб начал завоевывать мир в 90-х, дизайнеры начали переход от бумаги к пикселям. «Создавая убийственные сайты» Дэвида Сигела вышла в очень правильное время. Его приемы с TABLE и GIF давали возможность повторять ту же верстку, которую они создавали для печатных страниц.

Табличная верстка вскоре стала CSS-версткой, но основа мышления оставалась неизменной: окно браузера, как и страница книги до этого, рассматривалось ограниченным пространством, к которому дизайнеры применяли определенные правила.

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

Дизайнеры привыкли работать прямоугольниками фиксированных размеров. Веб снял это ограничение.

Не доламывайте то, что не починено

Ничто так не пугает, как неизвестность. Эти слова бывшего Министра обороны США Дональда Рамсфельда звучат действительно устрашающе (хотя точка зрения большинства сходилась на том, что в них нет смысла):

Есть известные известные. Вещи, о которых мы знаем, что мы знаем. Также существуют известные неизвестные. Вещи, о которых мы знаем, что не знаем. Но также есть неизвестные неизвестные — нечто, о чем мы не знаем, что не знаем.

Размеры окна браузера — лишь один пример «известной неизвестной» в вебе. Самым простым решением является применение гибких элементов для верстки: с указанием процентного соотношения, а не количества пикселей. Но дизайнеры продолжают делать вид, что размеры браузера — «известное известное». Они создают фиксированную по ширине верстку под размеры конкретного окна.

На заре веба большинство мониторов были 640 пикселей по ширине. И веб-дизайнеры создавали верстку 640 пикселей по ширине. Чем больше людей начинали пользоваться мониторами с шириной в 800 пикселей, тем больше появлялось соответствующей верстки. Годами позже она доходила до 1024 пикселей. По какой-то причине веб-дизайнеры остановились на магическом значении в 960 пикселей, как на идеальном.

Это выглядело словно сообщество разработчиков переживало коллективную галлюцинацию. Вместо того, чтобы принять гибкую природу окна браузера, они решили признать одну величину за стандарт… даже если им приходилось менять его каждые несколько лет.

Но не все приняли это негласное соглашение.

Дао или не дао

В 2000 году онлайн-издание A List Apart опубликовало статью с заголовком Дао веб-дизайна. Она уверенно прошла проверку временем.

В публикации Джон Эллсопп отмечает, что новые средства передачи информации часто начинают с повторения избитых приемов, характерных для более старых средств. Об этом же пишет в своей книге «Понимание комикса» Скотт МакКлауд :

Каждая новая технология начинает жить, имитируя предшественников. Большинство ранних фильмов были поставлены как театральные пьесы, а телевидение поначалу напоминало радио с картинками или недоделанные кинофильмы.

Учитывая это, совсем неудивительно, что дизайнеры начали с попыток воссоздать знакомую им верстку из мира печати. Джон формулирует это так:

«Убийственные веб-сайты» — это те, что осаждают необузданность веба, ограничивая страницы, будто они разработаны для бумаги. Своего рода настольная издательская система для веба.

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

Веб — это не печать. Известные нам ограничения бумаги — ширина и высота — здесь просто не существуют. Веб не связан заранее установленными размерами. И Дао веб-дизайна призывает всех практикующих в индустрии осознать это:

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

Но этот призыв так и не был услышан. Дизайнеры оставались в своей консенсусной галлюцинации как в Матрице, где браузер каждого был одинаковой ширины. И их легко понять. В этом следовании успокаивающей выдумке есть свой комфорт, особенно когда оно дает ощущение контроля.

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

Набор инструментов

Жаль мастера, сетующего на свои инструменты. И все же каждый мастер ограничен выбором этих инструментов. Как сказал коллега Маршалла Маклюэна, Джон Калкин, «Мы создаем свои инструменты, а инструменты, в свою очередь, формируют нас».

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

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

Если вам приходилось использовать Photoshop, то вы знаете, как проходит создание нового файла: вам предлагается задать фиксированные размеры холста, внутри которого придется работать. Перед тем, как добавить хоть один пиксель, дизайнером принимается фундаментальное решение, которое укрепляет консенсусную галлюцинацию негибкого веба.

Но вина за мышление в рамках фиксированной ширины не лежит на одном лишь Photoshop. В общем-то он и не создавался для работы над веб-страницами. По прошествии времени для этого все же появилось специальное программное обеспечение. Macromedia Dreamweaver стал одним из первых примеров инструмента для веб-дизайна. К сожалению он работал в рамках идеи WYSIWYG: What You See Is What You Get (с англ. «что видишь, то и получаешь»).

Работая с Dreamweaver, действительно, получаешь то, что видишь, но нет гарантии, что все остальные в вебе получат то же самое, что видишь ты. И снова дизайнеры воодушевленно поддерживали иллюзию контроля, вместо того, чтобы принять присущую вебу неопределенность.

Преодолеть заложенные в таких инструментах, как Photoshop и Dreamweaver, искажения можно, но это непросто. Мы можем думать, что контролируем свои инструменты и подчиняем их своей воле, но на самом деле все программы навязывают нам свой образ мыслей. Как заметил футурист Жаме Саскио, «программы, как и все технологии, идеологичны по определению».

Код неминуемо отражает выборы, заблуждения и желания своих создателей.

Неудивительно, что дизайнеры, работавшие с такими инструментами, создавали сайты, отражавшие заложенные в эти инструменты подходы к контролю «известных неизвестных» Всемирной паутины.

Реальность кусается

К середине первого десятилетия 21 века поле веб-дизайна получило опору в виде нескольких предположений:

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

Но все же были дизайнеры, считавшие Photoshop не лучшим инструментом для веба и выступавшие за работу прямо в браузере, используя CSS и HTML. Такой подход критиковали, как слишком ограничивающий. Как мы уже убедились, Photoshop и сам имел ограничения, но они были приняты и все с комфортом пользовались инструментом, перестав замечать недостатки.

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

Застряли в мобильном устройстве

iPod. Телефон. Интернет-коммуникатор. iPod. Телефон. ...понимаете? Это не три отдельных девайса, а один. И мы называем его iPhone.

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

A web page on the screen of a mobile phone.
iPhone.

Работающие с вебом мобильные устройства существовали и до iPhone, но в большинстве своем они были ограничены демонстрацией специальных адаптированных файлов формата WML. Немногие могли считывать HTML. С появлением iPhone и его конкурентов карманные устройства стали оснащаться современными браузерами, позволяющими стать пассажирами первого класса в мире веба.

Предположения, которые сформировали базис индустрии, сегодня ставятся под сомнения:

Распространение мобильных устройств противостояло дизайнерам, являя истинную природу веба как пластичной среды, состоящей из неизвестных.

Первая реакция на эту новоявленную реальность повлекла сегментацию. Зачем переосмыслять существующие веб-сайты для персонального компьютера, если можно сделать ответвление для мобильных устройств в отдельном отстойнике? Это мобильное гетто обычно размещалось на специальном поддомене отдельно от «настоящего» веб-сайта: на m.example.com или mobile.example.com.

Этому сегментированному подходу способствовало использование понятия «мобильный веб», хотя более подходящим было бы «веб, используемый на мобильной устройстве». В рамках существующей традиции массовой галлюцинации дизайнеры не только мыслили о мобильном устройстве и персональном компьютере, как о разных видах устройств, но и о сайтах для них, как о совершенно отдельных ресурсах.

Определение того, на какой поддомен должно быть направлено конкретное устройство, требовало сопоставления значения свойства user‐agent с бесконечно пополняемым списком известных браузеров. Ситуация напоминала гонку Красной Королевы — приходилось бежать со всех ног, чтобы только оставаться на месте. Это было и чревато ошибками, и плохо поддавалось контролю. В какой-то момент было легко классифицировать, скажем, iPhone как мобильное устройство, но со временем проводить это разграничение становилось сложнее. С появлением таких планшетов, как iPad, стало непонятно, какие устройства перенаправлять на мобильный URL. Возможно требовался новый поддомен — t.example.com или tablet.example.com — вместе с понятием «планшетный веб». И что, тогда бы появился «телевизионный веб» и «веб для холодильника»?

Мы едины

Но практика создания разных сайтов для разных устройств не решала проблему. Она также противоречила устоявшейся идее так называемого Единого веба:

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

Но это не значит, что на девайсах с небольшими экранами должна показываться верстка, созданная для больших форматов:

При этом одна и та же информация должна быть доступна в одном виде на всех устройствах.

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

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

Положительный отзыв

В апреле 2010 Итан Маркотт выступил на сцене An Event Apart в Сиэттле на съезде для создателей веб-сайтов. Он говорил об интересной школе мысли в мире архитектуры: адаптивный дизайн — идея, согласно которой здания могут меняться и адаптироваться под нужды людей, использующих эти здания. По его словам, такой же подход может применяться и к разработке сайтов.

Месяц спустя он развил эту идею в статье «Адаптивный веб-дизайн». Она была опубликована на A List Apart — том же веб-ресурсе, где появилась «Дао веб-дизайна» Джона Элсоппа десятью годами ранее. Работа Итана разделяла дух предшествующего боевого клича Джона. Более того, Итан начинает свою статью со ссылки на «Дао веб-дизайна».

Обе статьи призывали дизайнеров принять идею Единства веба. Однако если «Дао веб-дизайна» была отвергнута разработчиками, так как им было вполне комфортно и с инструментами WYSIWYG, то «Адаптивный веб-дизайн» застал аудиторию в полном отчаянии от невозможности решить «мобильный вопрос».

Прилегающие возможности

Писатель Стивен Джонсон задокументировал историю изобретений и инноваций. В своей книге «Откуда берутся хорошие идеи» он исследует идею «прилегающих возможностей»:

В любой момент истории расширяющейся биосферы всегда существуют пока что не открытые двери. В человеческой культуре принято говорить о прорывных идеях, как о неожиданных скачках по временной шкале, которые гении совершают, вырываясь вперед на 50 лет, и изобретают то, что ограниченным сегодняшним моментом умам даже и не снилось. Но дело в том, что технические (и научные) прорывы редко совершаются вне рамок прилегающих возможностей. История культурного прогресса — почти без исключения, история дверей, ведущих к следующим дверям, позволяющих исследовать новые комнаты только по очереди.

Поэтому микроволновая печь не могла быть изобретена в средневековой Франции — было необходимо сделать слишком много предшествующих шагов, чтобы совершить такой скачок: в производстве, энергетике и теории. Facebook бы не существовал без Всемирной паутины, которой бы не существовало без Интернета, которого бы не существовало без компьютеров и тд. Каждый шаг зависит от накопленного верхнего слоя.

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

Технологии уже существовали: гибкая разметка, гибкие изображения и медиа-запросы. Но Итан объединил их под одним знаменем, тем самым изменил то, как мы думаем о веб-дизайне.

  1. Резиновая верстка. Возможность задавать проценты вместо пикселей была у нас со времен TABLE-верстки.
  2. Адаптивные изображения. Исследование, представленное Ричардом Раттером показало, что браузеры становились крайне искусны в изменении размера изображений. Исходные размеры не являлись ограничивающим фактором.
  3. Медиа-запросы. Благодаря системе обработки ошибок CSS браузеры со временем стали добавлять инструмент за инструментом. Одним из них стали медиа-запросы CSS— возможность задавать стиль в соответствии с конкретными параметрами, например такими, как размеры окна браузера.

Появились предпосылки. Появилось и желание перемен, гонимое неумолимым распространением мобильных устройств. Чего не хватало, так это лозунга, под которым можно было все объединить. Именно его Итан нам и дал — отзывчивый веб-дизайн.

Смена образа мышления

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

Люк Вроблевский ввел понятие «Сначала мобильные» в ответ на господство мобильных устройств:

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

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

Стефани и Брайан Ригер сформировали подход отзывчивого дизайна в рамках «Сначала мобильные»:

Отсутствие медиа-запроса — это и есть ваш первый медиа-запрос.

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

Веб-дизайнеры больше не могли строить домыслы по поводу размеров экрана, пропускной способности и возможностей браузера. Единственный элемент сайта, который был полностью под их контролем — это содержание.

Поддерживая идею «Дао веб-дизайна», дизайнер Марк Боултон поместил свой новый подход в исторический контекст:

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

Подход с первоочередностью контента, отличается от подхода с первоочередностью холста, который применялся еще в Келлской книге. Он предлагает дизайнерам отказаться от иллюзии контроля и создавать материально целесообразную дисциплину для Веба.

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

Техасский веб-дизайнер Трент Уолтон изначально воспринял отзывчивый дизайн в штыки, но вскоре осознал, что это был более честный и аутентичный подход, чем создание фиксированных по ширине макетов в Photoshop:

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

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

На двадцатую годовщину Всемирной паутины Тим Бернерс-Ли написал статью для Scientific American, в которой напомнил эти принципы:

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

Ссылки:

Глава 4:Языки