Путь к отказоустойчивому веб-дизайну
Опубликовано: 2022-03-10Дизайн добавляет ясности. Используя цвет, типографику, иерархию, контраст и все другие инструменты, находящиеся в их распоряжении, дизайнеры могут взять неупорядоченную массу информации и превратить ее во что-то, что легко использовать и приятно смотреть. Как и сама жизнь, дизайн может одержать маленькую победу над энтропией вселенной, создавая очаги порядка из сырья хаоса.
Дополнительная литература на SmashingMag: ссылка
- Наследование CSS, каскад и глобальная область видимости: ваши новые старые худшие друзья
- Улучшайте свои навыки дизайна пользовательского интерфейса с помощью копирования
- Преследование семантической ценности
Келлская книга — прекрасно иллюстрированная рукопись, созданная более 1200 лет назад. Заманчиво назвать это произведением искусства, но это произведение дизайна. Цель книги — передать сообщение; евангелия христианской религии. Благодаря использованию иллюстраций и каллиграфии это сообщение передается в привлекательном контексте, что делает его приятным для глаз.
Дизайн работает в рамках ограничений. Колумбийские монахи, создавшие Келлскую книгу, работали четырьмя чернилами на пергаменте, материале из телячьей кожи. Материалы были простыми, но четко определенными. Дизайнеры-жители знали оттенки чернил, вес пергамента и, что особенно важно, они знали размеры каждой страницы.
Принты и революция
Материалы и процессы изменились и эволюционировали за последнее тысячелетие или около того. Изобретение Гутенбергом подвижного литерного шрифта стало революцией в производстве. В то время как создание второго экземпляра Келлской книги заняло бы столько же времени, сколько и создание первого, несколько копий Библии Гутенберга можно было бы изготовить с гораздо меньшими затратами труда. Тем не менее, многие шаблоны дизайна, такие как буквицы и столбцы, были перенесены из иллюминированных рукописей. Фундаментальный процесс проектирования остался прежним: зная ширину и высоту страницы, дизайнеры создавали приятное расположение элементов.
Техники гравюры достигли своего апогея в 20 веке с появлением швейцарского стиля. Его структурированный макет и четкая типографика иллюстрируются работами таких дизайнеров, как Йозеф Мюллер-Брокманн и Ян Чихольд. Они сформулировали системы сетки и типографские шкалы на основе дизайна предыдущих веков.
Зная соотношение размеров страницы, дизайнеры могли расположить элементы с максимальным эффектом. Страница — это ограничение, а система сетки — способ упорядочить ее.
Перенесите свой талант в Интернет
Когда в 1990-х годах Интернет начал завоевывать мир, дизайнеры начали переходить с бумаги на пиксели. Книга Дэвида Сигела « Создание сайтов-убийц» появилась как раз в нужное время. Его умные хаки TABLE и GIF позволили дизайнерам воспроизвести те же макеты, которые они ранее создали для печатной страницы.
Эти макеты TABLE позже стали макетами CSS , но основная мысль осталась прежней: окно браузера — как и предыдущая страница — рассматривалось как известное ограничение, которое дизайнеры упорядочивали.
С этим подходом есть проблема. В то время как лист бумаги или пергамент имеет фиксированное соотношение сторон, окно браузера может быть любого размера. У веб-дизайнера нет возможности заранее узнать, какого размера будет окно браузера того или иного человека.
Дизайнеры привыкли знать размеры прямоугольников, внутри которых они проектировали. Сеть сняла это ограничение.
Если это не исправлено, не ломайте его
Нет ничего более пугающего, чем неизвестность. Эти слова бывшего министра обороны США Дональда Рамсфелда должны быть поистине ужасающими (хотя по общему мнению в то время они звучали как чепуха):
Есть известные известные. Есть вещи, которые мы знаем, что знаем. Мы также знаем, что есть известные неизвестные, то есть мы знаем, что есть некоторые вещи, которых мы не знаем. Но есть и неизвестные неизвестные — те, о которых мы не знаем, что мы не знаем.
Соотношение окна браузера — лишь один пример известного неизвестного в сети. Самый простой способ справиться с этой ситуацией — использовать гибкие единицы для макета: проценты, а не пиксели. Вместо этого дизайнеры предпочли сделать вид, что размеры браузера известны заранее. Они создали макеты с фиксированной шириной для одного определенного размера окна.
На заре Интернета ширина большинства мониторов составляла 640 пикселей. Веб-дизайнеры создали макеты шириной 640 пикселей. Поскольку все больше и больше людей начали использовать мониторы шириной 800 пикселей, все больше и больше дизайнеров начали создавать макеты шириной 800 пикселей. Несколько лет спустя это стало 1024 пикселя. В какой-то момент веб-дизайнеры остановились на магическом числе 960 пикселей как на идеальной ширине.
Это было так, как если бы сообщество веб-дизайнеров участвовало в общей галлюцинации согласия. Вместо того, чтобы признать гибкую природу окна браузера, они решили остановиться на одной заданной ширине в качестве идеальной… даже если это означало менять идеал каждые несколько лет.
Не все согласились с этой веб-памяткой.
Дао или Дао Не
В 2000 году интернет-журнал A List Apart опубликовал статью под названием «Дао веб-дизайна» . Он замечательно выдержал испытание временем.
В статье Джон Оллсопп указывает, что новые медиумы часто начинают с того, что перенимают образы предыдущих медиумов. Скотт МакКлауд делает то же самое в своей книге « Понимание комиксов» :
Каждое новое средство начинает свою жизнь с подражания своим предшественникам. Многие ранние фильмы были похожи на отснятые пьесы; во многом раннее телевидение было похоже на радио с картинками или уменьшенными фильмами.
Имея это в виду, неудивительно, что веб-дизайн начался с попыток воссоздать виды макетов, с которыми дизайнеры были знакомы из мира печати. Как выразился Джон:
«Убийственные веб-сайты» — это обычно те, которые укрощают дикость Интернета, ограничивая страницы, как если бы они были сделаны из бумаги — Desktop Publishing для Интернета.
Веб-дизайн может извлечь выгоду из многовекового обучения, которое повлияло на полиграфический дизайн. Массимо Виньелли, чьи работы олицетворяют собой швейцарский стиль, начинает свой знаменитый канон со списка нематериальных ценностей, включая дисциплину, уместность, вневременность, ответственность и многое другое. Все в этом списке может быть применено к веб-дизайну. Канон Виньелли также включает в себя список материальных ценностей. Этот список начинается с размеров бумаги.
Сеть не печатная. Известных ограничений бумаги — ее ширины и высоты — просто не существует. Сеть не ограничена предустановленными размерами. Книга Джона Оллсоппа « Дао веб-дизайна» призвала практиков признать это:
Контроль, который дизайнеры знают в печатной среде и часто желают использовать в веб-среде, является просто функцией ограничения печатной страницы. Мы должны принять тот факт, что в Интернете нет таких ограничений, и разработать дизайн с учетом этой гибкости.
Этот призыв к оружию остался без внимания. Дизайнеры остались в своей Матричной галлюцинации согласия, когда у всех браузеры были одинаковой ширины. Это понятно. Верить в обнадеживающую выдумку — большое утешение, особенно когда она создает иллюзию контроля.
Есть еще одна причина, по которой веб-дизайнеры цеплялись за удобство своих макетов с фиксированной шириной. Торговые инструменты поощряли бумажный подход к дизайну для Интернета.
Корабль инструментов
Плохой ремесленник, который всегда винит во всем свои инструменты. И все же на каждого мастера влияет выбор инструментов. Как выразился коллега Маршалла Маклюэна Джон Калкин, «мы формируем наши инструменты, а затем наши инструменты формируют нас».
Когда зарождалась дисциплина веб-дизайна, не было программного обеспечения, созданного специально для визуализации макетов в Интернете. Вместо этого дизайнеры использовали существующие инструменты.
Adobe Photoshop изначально предназначался для обработки изображений; подкрашивание фотографий, применение фильтров, компоновка слоев и т. д. К середине девяностых он стал незаменимым инструментом для графических дизайнеров. Когда те же самые дизайнеры начали разрабатывать для Интернета, они продолжали использовать уже знакомое им программное обеспечение.
Если вы когда-либо использовали Photoshop, то знаете, что происходит, когда вы выбираете «Создать» в меню «Файл»: вас попросят ввести фиксированные размеры холста, с которым вы собираетесь работать. Перед добавлением одного пикселя было принято фундаментальное дизайнерское решение, которое усиливает условную галлюцинацию негибкой паутины.
Photoshop сам по себе не может взять на себя вину за мышление с фиксированной шириной. В конце концов, он никогда не предназначался для разработки веб-страниц. В конце концов, программное обеспечение было выпущено с конкретной целью создания веб-страниц. Dreamweaver от Macromedia был ранним примером инструмента для веб-дизайна. К сожалению, он работал в соответствии с идеей WYSIWYG : что видишь, то и получаешь.
Хотя при проектировании с Dreamweaver верно то, что вы видите, это то, что вы получаете, в Интернете нет гарантии, что то, что вы видите, это то, что получат все остальные. В очередной раз веб-дизайнерам было предложено принять иллюзию контроля, а не сталкиваться с присущей их среде неопределенностью.
Можно преодолеть встроенные предубеждения таких инструментов, как Photoshop и Dreamweaver, но это непросто. Нам может нравиться думать, что мы контролируем наши инструменты, что мы подчиняем их своей воле, но правда в том, что все программное обеспечение является самоуверенным программным обеспечением. Как выразился футурист Ямайс Касио, «программное обеспечение, как и все технологии, по своей сути политическое»:
Код неизбежно отражает выбор, предубеждения и желания его создателей.
Поэтому неудивительно, что дизайнеры, работающие с зерном своих инструментов, создали веб-сайты, которые отражали предположения, заложенные в эти инструменты — предположения о способности контролировать и приручать известные неизвестные Всемирной паутины.
Реальность кусается
К середине первого десятилетия двадцать первого века область веб-дизайна опиралась на несколько предположений:
- что каждый просматривал страницы на экране, достаточно большом для просмотра макета шириной 960 пикселей;
- чтобы у всех был широкополосный доступ в Интернет, что избавляло от необходимости оптимизировать количество и размер файлов изображений на веб-страницах;
- что все используют современный веб-браузер с установленными последними подключаемыми модулями.
Меньшая часть веб-дизайнеров все еще ратовала за плавные макеты. Я причислил себя к их числу. Нас терпели почти так же, как пророка гибели на углу улицы с доской для сэндвичей с надписью «Конец близок» — неудобное, но безвредное отвлечение.
Были даже дизайнеры, которые предполагали, что Photoshop может быть не лучшим инструментом для Интернета, и что мы могли бы рассмотреть возможность проектирования непосредственно в браузере с использованием CSS и HTML . Такой подход подвергся критике как слишком ограничивающий. Как мы видели, у Photoshop есть свои ограничения, но они были усвоены дизайнерами, настолько комфортно использующими этот инструмент, что они больше не замечали его недостатков.
Этот спор о достоинствах создания композиций в Photoshop и дизайна в браузере остался бы в значительной степени академическим, если бы не событие, которое навсегда потрясло мир веб-дизайна.
Застрял внутри мобильного
iPod. Телефон. И интернет-коммуникатор. iPod. Телефон… понял? Это не три отдельных устройства. Это одно устройство. И мы называем это: iPhone.
С этими словами в 2007 году Стив Джобс представил мобильное устройство, которое можно было использовать для просмотра всемирной паутины.
Мобильные устройства с веб-поддержкой существовали до iPhone, но они в основном ограничивались отображением специализированного формата файлов для мобильных устройств, называемого WML . Очень немногие устройства могут отображать HTML . С появлением iPhone и его конкурентов портативные устройства поставлялись с современными веб-браузерами, способными быть первоклассными пользователями в Интернете. Это вызвало смятение в области веб-дизайна.
Предположения, которые легли в основу целой отрасли, теперь подвергались сомнению:
- Как мы узнаем, используют ли люди широкие экраны настольных компьютеров или узкие экраны портативных компьютеров?
- Как мы узнаем, используют ли люди дома быстрое широкополосное соединение или медленную мобильную сеть?
- Как мы узнаем, поддерживает ли устройство определенную технологию или плагин?
Развитие мобильных устройств заставило веб-дизайнеров столкнуться с истинной природой Интернета как гибкой среды, наполненной неизвестными.
Первоначальная реакция на эту недавно открытую реальность включала сегментацию. Вместо переосмысления существующего веб-сайта, оптимизированного для настольных компьютеров, что, если мобильные устройства можно было бы выделить в отдельный бункер? Это мобильное гетто часто располагалось на отдельном поддомене от «настоящего» сайта: m.example.com или mobile.example.com.
Этот сегментированный подход был подкреплен использованием термина «мобильный Интернет» вместо более точного термина «Интернет, как он воспринимается на мобильных устройствах». По традиции своих более ранних галлюцинаций согласия, веб-дизайнеры думали о мобильных устройствах и настольных компьютерах не только как об отдельных классах устройств, но и как о совершенно отдельных веб-сайтах.
Чтобы определить, какие устройства были отправлены в какой поддомен, требовалось сверить строку пользовательского агента браузера с постоянно расширяющимся списком известных браузеров. Это была гонка Красной Королевы, чтобы быть в курсе событий. Помимо того, что он был подвержен ошибкам, он также был довольно произвольным. Хотя когда-то было легко классифицировать, скажем, iPhone как мобильное устройство, со временем это различие стало труднее. С появлением таких планшетов, как iPad, стало неясно, какие устройства следует перенаправлять на мобильный URL . Возможно, потребовался новый поддомен — t.example.com или table.example.com — вместе с новым термином, например, «сеть для планшетов». Но как насчет « телевизионной сети» или «холодильной сети с доступом в Интернет»?
Мы едины
Практика создания разных сайтов для разных устройств просто не масштабировалась. Это также противоречило давнему идеалу под названием One Web:
Единая сеть означает предоставление, насколько это целесообразно, одной и той же информации и услуг пользователям независимо от того, какое устройство они используют.
Но это не означает, что устройствам с маленькими экранами следует обслуживать макеты страниц, разработанные для больших размеров:
Однако это не означает, что одна и та же информация доступна в одном и том же представлении на всех устройствах.
Если веб-дизайнеры хотели оставаться верными духу One Web, им нужно было предоставить один и тот же основной контент по одному и тому же URL -адресу всем, независимо от их устройства. В то же время им нужно было иметь возможность создавать различные макеты в зависимости от доступного пространства экрана.
Общая иллюзия универсального подхода к веб-дизайну начала испаряться. Его постепенно заменило принятие постоянно меняющейся текучей природы паутины.
Положительный ответ
В апреле 2010 года Итан Маркотт стоял на сцене в An Event Apart в Сиэтле, собрании людей, которые делают веб-сайты. Он рассказал об интересном направлении мысли в мире архитектуры: адаптивном дизайне, идее о том, что здания могут изменяться и адаптироваться в соответствии с потребностями людей, использующих здание. Он объяснил, что это может быть подходом к созданию веб-сайтов.
Месяц спустя он расширил эту идею в статье под названием « Отзывчивый веб-дизайн» . Он был опубликован на A List Apart, том же веб-сайте, на котором десятью годами ранее была опубликована книга Джона Оллсоппа « Дао веб-дизайна» . Статья Итана разделяла тот же дух, что и более ранний боевой клич Джона. На самом деле Итан начинает свою статью со ссылки на «Дао веб-дизайна» .
Обе статьи призывали веб-дизайнеров принять идею One Web. Но в то время как «Дао веб-дизайна» был в значительной степени отвергнут дизайнерами, привыкшими к своим инструментам WYSIWYG , адаптивный веб-дизайн нашел аудиторию дизайнеров, отчаянно пытающихся решить головоломку для мобильных устройств.
Соседний возможный
Писатель Стивен Джонсон задокументировал историю изобретений и инноваций. В своей книге « Откуда берутся хорошие идеи» он исследует идею, называемую «соседним возможным»:
В каждый момент на временной шкале расширяющейся биосферы есть двери, которые пока нельзя открыть. В человеческой культуре нам нравится думать о прорывных идеях как о внезапных ускорениях на временной шкале, когда гений прыгает вперед на пятьдесят лет и изобретает то, что нормальный ум, застрявший в настоящем моменте, не смог бы придумать. Но правда в том, что технологический (и научный) прогресс редко вырывается за рамки возможного; история культурного прогресса, почти без исключения, — это история одной двери, ведущей к другой двери, исследования дворца по одной комнате за раз.
Вот почему микроволновая печь не могла быть изобретена в средневековой Франции; требуется слишком много предварительных шагов — производство, энергия, теория — чтобы совершить такой скачок. Facebook не мог бы существовать без Всемирной паутины, которая не могла бы существовать без Интернета, которая не могла бы существовать без компьютеров и так далее. Каждый шаг зависит от накопленных слоев ниже.
К тому времени, когда Итан придумал термин «отзывчивый веб-дизайн», ряд технологических достижений встал на свои места. Как я написал в предисловии к последующей книге Итана по этой теме:
Технологии уже существовали: гибкие сетки, гибкие изображения и медиа-запросы. Но Итан объединил эти методы под одним знаменем и тем самым изменил наше представление о веб-дизайне.
- Жидкие сетки. Возможность использовать проценты вместо пикселей была с нами со времен макетов
TABLE. - Гибкие изображения. Исследование, проведенное Ричардом Раттером, показало, что браузеры все лучше справляются с изменением размера изображений. Внутренние размеры изображения не обязательно должны быть ограничивающим фактором.
- Медиа запросы. Благодаря модели обработки ошибок CSS браузеры со временем добавляли функцию за функцией. Одной из таких функций были медиа-запросы CSS — возможность определять стили в соответствии с определенными параметрами, такими как размеры окна браузера.
Слои были на месте. Стремление к переменам, вызванное неустанным ростом мобильных технологий, также имело место. Нужен был лозунг, под которым их можно было бы объединить. Это то, что Итан дал нам с адаптивным веб-дизайном.
Изменение мышления
Первые эксперименты с адаптивным дизайном включали модернизацию существующих веб-сайтов, ориентированных на настольные компьютеры: преобразование пикселей в проценты и добавление медиа-запросов для удаления макета сетки на небольших экранах. Но этот реактивный подход не обеспечил прочной основы для дальнейшего развития. К счастью, другой лозунг смог воплотить в себе более устойчивый подход.
Люк Вроблевски ввел термин Mobile First в ответ на господство мобильных устройств:
Потеря 80% экрана заставляет вас сосредоточиться. Вы должны убедиться, что то, что остается на экране, является наиболее важным набором функций для ваших клиентов и вашего бизнеса. Просто нет места для любого мусора интерфейса или контента сомнительной ценности. Вы должны знать, что важнее всего.
Если вы сможете расставить приоритеты для своего контента и заставить его работать в ограниченном пространстве маленького экрана, то вы создадите надежный, устойчивый дизайн, который вы сможете использовать для экранов большего размера.
Стефани и Брайан Ригер воплотили подход к адаптивному дизайну, ориентированному на мобильные устройства:
Отсутствие медиа-запроса — это ваш первый медиа-запрос.
В этом контексте Mobile First меньше касается мобильных устройств как таковых, а вместо этого фокусируется на приоритизации контента и задач независимо от устройства. Это обескураживает предположения. В прошлом веб-дизайнеры ошибались в необоснованных предположениях о настольных устройствах. Теперь было не менее важно избегать предположений о мобильных устройствах.
Веб-дизайнеры больше не могли делать предположения о размерах экрана, пропускной способности или возможностях браузера. Им остался один аспект веб-сайта, который действительно находился под их контролем: контент.
Вторя Дао веб-дизайна , дизайнер Марк Боултон поместил этот новый подход в исторический контекст:
Примите текучесть сети. Разрабатывайте макеты и системы, способные справиться с любой средой, в которой они могут оказаться. Но единственный способ сделать это — избавиться от способов мышления, которые были оковами на нашей шее. Они сдерживают нас. Начните проектирование с содержимого, а не с холста внутрь.
Этот способ мышления, основанный на содержании, фундаментально отличается от подхода на основе холста, восходящего к Келлской книге. Он просит веб-дизайнеров отказаться от иллюзии контроля и создать материально-честную дисциплину для Всемирной паутины.
Отказ от контроля не означает отказ от качества. Наоборот. Признавая множество неизвестных, связанных с проектированием для Интернета, дизайнеры могут создавать устойчивый и гибкий способ, соответствующий среде.
Техасский веб-дизайнер Трент Уолтон изначально опасался адаптивного дизайна, но вскоре понял, что это более честный и аутентичный подход, чем создание макетов фиксированной ширины в Photoshop:
Моя любовь к отзывчивости основана на идее, что мой веб-сайт встретит вас, где бы вы ни находились — от мобильного до полноценного рабочего стола и где угодно между ними.
В течение многих лет веб-дизайн диктовался дизайнером. У пользователя не было другого выбора, кроме как удовлетворить спрос сайта на экран определенного размера или сетевое соединение с определенной скоростью. Теперь веб-дизайн может быть разговором между дизайнером и пользователем. Теперь веб-дизайн может отражать основные принципы самой сети.
В двадцатую годовщину Всемирной паутины Тим Бернерс-Ли написал статью для Scientific American, в которой повторил эти основополагающие принципы:
Основным принципом проектирования, лежащим в основе полезности и роста Интернета, является универсальность. Интернет должен быть доступен для использования людьми с ограниченными возможностями. Он должен работать с любой формой информации, будь то документ или точка данных, и информацией любого качества — от глупого твита до научной статьи. И он должен быть доступен с любого оборудования, которое может подключаться к Интернету: стационарного или мобильного, с маленьким или большим экраном.
использованная литература
- Дао веб-дизайна Джона Аллсоппа
- Канон Виньелли Массимо Виньелли
- Открытость и сингулярность метавселенной Джамайса Кашио
- Одна паутина Джо Рабин и Чарльз МакКэти Невил
- Отзывчивый веб-дизайн Итана Маркотта
- Более богатый холст Марка Боултона
- Подгонка под масштаб Трента Уолтона
- Да здравствует Интернет: призыв к сохранению открытых стандартов и нейтралитета Тим Бернерс-Ли