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

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

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

Страница из Библии Гуттенберга.

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

Рамка для средневековых рукописей Яна Чихольда.

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

Перенесите свой талант в Интерне

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

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

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

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

Если не починил, не ломай.

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

«…Как мы знаем, есть известные нам известные; есть вещи, которые мы знаем, что мы знаем. Мы знаем также, что есть известные неизвестные: то есть мы знаем, что есть вещи, которых мы не знаем. Но есть и неизвестные неизвестные – те вещи, о которых мы не знаем, что мы их не знаем»

Дональд Рамсфельд

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

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

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

Не все согласились с этой памяткой, распространяемой по сети.

Дао или не дао

В 2000 году онлайн-журнал A List Apart опубликовал статью под названием A Dao Of Web Design ("Дао веб-дизайна"). Она прекрасно выдержала испытание временем.

В статье Джон Оллсопп указывает на то, что новые медиа часто начинают с того, что берут на вооружение тропы предыдущих медиа. Скотт Макклауд говорит о том же в своей книге "Понимание комиксов":

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

Скотт Маклауд

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

«Сайты-убийцы" – это обычно те, которые укрощают необузданность Интернета, ограничивая страницы, как если бы они были сделаны из бумаги – Настольная публикация для Интернета.»

Джон Оллсопп

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

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

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

Джон Оллсопп

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

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

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

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

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

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

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

Photoshop сам по себе не может взять на себя вину за мышление с фиксированной шириной. В конце концов, он никогда не предназначался для разработки веб-страниц. В конце концов, было выпущено программное обеспечение, предназначенное именно для создания веб-страниц. Dreamweaver от Macromedia был ранним примером инструмента для веб-дизайна. К сожалению, он работал в соответствии с идеей WYSIWYG: "Что видишь, то и получаешь".

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

Можно преодолеть встроенные предубеждения таких инструментов, как Photoshop и Dreamweaver, но это нелегко. Нам хотелось бы думать, что мы контролируем наши инструменты, что мы подчиняем их своей воле, но правда в том, что все программное обеспечение – это программное обеспечение, основанное на мнениях. Как сказал футурист Джамайс Касио, "программное обеспечение, как и все технологии, по своей сути является политическим":

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

«Код неизбежно отражает выбор, предубеждения и желания его создателей.»

Джамайс Касио

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

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

К середине первого десятилетия двадцать первого века область веб-дизайна опиралась на множество предположений:

что все просматривали веб-страницы с экраном, достаточно большим для просмотра макета шириной 960 пикселей;

что все имели широкополосный доступ в Интернет, что уменьшало необходимость оптимизации количества и размера файлов изображений на веб-страницах;

все пользовались современным веб-браузером с установленными последними плагинами.

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

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

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

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

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

iPhone.

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

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

Как узнать, используют ли люди широкие экраны настольных компьютеров или узкие экраны телефонов?

Как узнать, пользуются ли люди дома быстрым широкополосным соединением или медленной мобильной сетью?

Как узнать, поддерживает ли устройство ту или иную технологию или плагин?

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

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

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

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