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

Стивен Джонсон

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

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

Флюидные (гибкие) сетки. Возможность использовать проценты вместо пикселей появилась у нас еще во времена макетов TABLE.

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

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

Медиазапросы. Благодаря модели обработки ошибок CSS, браузеры со временем добавляли все новые и новые функции. Одной из таких функций были медиазапросы CSS – возможность определять стили в соответствии с определенными параметрами, такими как размеры окна браузера.

Слои были на месте. Желание перемен, вызванное неуклонным ростом мобильной связи, также имелось. Нужен был лозунг, под которым их можно было бы объединить. Это то, что дал нам Итан с помощью Responsive Web Design.

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

Люк Вроблевски придумал термин Mobile First в ответ на рост популярности мобильных устройств:

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

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

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

«Отсутствие медиазапроса – это ваш первый медиазапрос.»

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

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

В книге "A Dao Of Web Design" дизайнер Марк Боултон вписал этот новый подход в исторический контекст:

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

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