Устойчивый веб-дизайн - Jeremy Keith
Мы одно целое
Практика создания разных сайтов для разных устройств просто не подходит. Это также противоречило давнему идеалу под названием "Единый веб":
«Единый веб означает предоставление, насколько это разумно, одинаковой информации и услуг пользователям независимо от используемого ими устройства.
Но это не означает, что небольшие экранные устройства должны обслуживаться макетами страниц, которые были разработаны для больших размеров:
Если веб-дизайнеры хотели остаться верными духу Единого Веба, им нужно было предоставить одинаковый основной контент по одному и тому же URL-адресу для всех, независимо от устройства. В то же время они должны иметь возможность создавать различные макеты в зависимости от доступной площади экрана.
«Однако это не означает, что одна и та же информация доступна в абсолютно одинаковом виде на всех устройствах.»
Общая иллюзия единого размера, подходящего под любой подход к веб-дизайну, начала испаряться. Постепенно она была заменена принятием постоянно меняющейся флюидной природы сети.
Положительная реакция
В апреле 2010 года Итан Маркотт выступил на сцене An Event Apart в Сиэтле, где собирались люди, создающие веб-сайты. Он говорил об интересной школе мысли в мире архитектуры: отзывчивый дизайн, идея о том, что здания могут меняться и адаптироваться в зависимости от потребностей людей, использующих здание. Это, как он объяснил, может стать способом подхода к созданию веб-сайтов.
Месяц спустя он развил эту идею в статье под названием Responsive Web Design ("Отзывчивый веб-дизайн"). Он был опубликован на А List Apart, том же веб-сайте, который опубликовал John Allsopp's A Dao Of Web Design десять лет назад. Статья Итана разделяла тот же дух, что и предыдущий громкий крик Джона. На самом деле, Итан начинает свою статью со ссылки на А Dao Of Web Design ("Дао веб-дизайна").
Обе статьи призывали веб-дизайнеров принять идею Единого Веба. Но если Dao Of Web Design ("Дао веб-дизайна") был в основном отвергнут дизайнерами, которым было удобно работать с инструментами WYSIWYG, то Responsive Web Design ("Отзывчивый веб-дизайн") нашел свою аудиторию среди дизайнеров, отчаянно пытающихся решить проблему мобильных устройств.
Смежные возможности
Писатель Стивен Джонсон задокументировал историю изобретений и инноваций. В своей книге Where Good Ideas Come From ("Откуда берутся хорошие идеи") он исследует идею под названием "смежные возможности":
«В каждый момент времени расширяющейся биосферы есть двери, которые пока не могут быть открыты. В человеческой культуре, мы любим думать о прорывных идеях как о внезапных ускорениях во времени, где гений прыгает на 50 лет вперед и изобретает что-то, что обычные умы, запертые в настоящем моменте, не могли бы придумать. Но истина заключается в том, что технологические (и научные) достижения редко появляются из соседних возможных; история культурного прогресса почти без исключения – это история одной двери, ведущей к другой, исследуя дворец в одной комнате за другой.»
Стивен Джонсон
Именно поэтому микроволновая печь не могла быть изобретена в средневековой Франции; для такого скачка требуется слишком много предшествующих шагов – производство, энергия, теория. Facebook не мог существовать без Всемирной паутины, которая не могла существовать без Интернета, который не мог существовать без компьютеров, и так далее. Каждый шаг зависит от накопленных ниже уровней.
К тому времени, когда Итан ввел термин "отзывчивый веб-дизайн", ряд технологических достижений уже был на месте. Как я написал в предисловии к последующей книге Итана на эту тему:
Флюидные (гибкие) сетки. Возможность использовать проценты вместо пикселей появилась у нас еще во времена макетов TABLE.
«Технологии уже существовали: флюидные (гибкие) сетки, гибкие изображения и медиа-запросы. Но Итан объединил эти технологии под одним знаменем и тем самым изменил наше представление о веб-дизайне.»
Гибкие изображения. Исследование, проведенное Ричардом Раттером, показало, что браузеры становятся все более искусными в изменении размеров изображений. Внутренние размеры изображения не должны быть ограничивающим фактором.
Медиазапросы. Благодаря модели обработки ошибок CSS, браузеры со временем добавляли все новые и новые функции. Одной из таких функций были медиазапросы CSS – возможность определять стили в соответствии с определенными параметрами, такими как размеры окна браузера.
Слои были на месте. Желание перемен, вызванное неуклонным ростом мобильной связи, также имелось. Нужен был лозунг, под которым их можно было бы объединить. Это то, что дал нам Итан с помощью Responsive Web Design.
Изменение мышления
Первые эксперименты в области гибкого дизайна включали модернизацию существующих настольных веб-сайтов: преобразование пикселей в процентные доли и добавление медиа-запросов для удаления сетки на меньших экранах. Но этот реактивный подход не обеспечил прочной основы для дальнейшего развития. К счастью, другой лозунг смог воплотить в себе более гибкий подход.
Люк Вроблевски придумал термин Mobile First в ответ на рост популярности мобильных устройств:
«Потеря 80% экранного пространства заставляет вас сосредоточиться. Вы должны быть уверены, что на экране останется только самый важный набор функций для ваших клиентов и вашего бизнеса. Здесь просто нет места для всякого мусора интерфейса или контента сомнительной ценности. Вы должны знать, что имеет наибольшее значение.»
Если вы сможете расставить приоритеты и заставить контент работать в ограниченном пространстве маленького экрана, то вы создадите надежный, устойчивый дизайн, который можно будет использовать для экранов большего размера.
Стефани и Брайан Ригер воплотили в жизнь подход к разработке отзывчивого дизайна, ориентированного на мобильные устройства:
«Отсутствие медиазапроса – это ваш первый медиазапрос.»
В этом контексте "Mobile First" в меньшей степени относится к мобильным устройствам как таковым, а вместо этого фокусируется на приоритетности контента и задач независимо от устройства. Отказ от предположений. В прошлом веб-дизайнеры не раз попадали впросак из-за необоснованных предположений о настольных устройствах. Теперь не менее важно не делать предположений относительно мобильных устройств.
Веб-дизайнеры больше не могли делать предположения о размерах экрана, пропускной способности или возможностях браузера. Они остались с одним аспектом веб-сайта, который действительно находился под их контролем: содержание.
В книге "A Dao Of Web Design" дизайнер Марк Боултон вписал этот новый подход в исторический контекст:
«Примите гибкость Интернета. Создавайте макеты и системы, которые могут справиться с любой средой, в которой они могут оказаться. Но единственный способ сделать все это – избавиться от образа мышления, который был кандалами на нашей шее. Они удерживают нас. Начните проектировать с контента, а не с холста..»
Этот способ мышления "контент-аут" в корне отличается от подхода "холст-ин", который восходит к Книге Келлса.
