Отзывчивый веб-дизайн. Итан Маркотт
Читать онлайн книгу.
с Internet Explorer, начинаешь думать, что такое постоянство действительно прекрасно.
Однако в последние годы возникла относительно новая дисциплина, которая получила название «отзывчивая архитектура» и которая бросила вызов незыблемости, лежащей в основе архитектуры как таковой. Это очень молодая дисциплина, но как более интерактивная форма она уже громко заявила о себе в нескольких направлениях.
К примеру, проводятся эксперименты с поверхностями, которые реагируют на голос (http://bkaprt.com/rwd/5/), и с жилыми пространствами, которые могут трансформироваться, подстраиваясь под пользователей (http://bkaprt.com/rwd/6/). Не так давно придумана технология «умного» стекла, которое по желанию клиента, решившего отгородиться от внешних раздражителей, становится матовым (рис. 1.5).
Рис. 1.5. То видно, то не видно: «умное» стекло может автоматически становиться матовым
А одна немецкая дизайнерская компания, используя автоматические системы и эластичные материалы, создала «стену», способную изгибаться, расширяться и менять форму, когда к ней приближается человек (рис. 1.6).
Рис. 1.6. Это не просто привлекательная художественная инсталляция. Стена действительно может чувствовать присутствие человека и реагировать на его приближение
Вместо того чтобы создавать пространства, которые влияют на поведение находящихся в них людей, приверженцы нового подхода предлагают пространства, взаимодействующие с человеком.
Путь вперед
Меня восхищает то, что архитекторы пытаются преодолеть ограничения, изначально присущие их деятельности. Веб-дизайнеры же, сталкиваясь с многообразием новых устройств и окружений, вынуждены преодолевать ограничения, которые мы сами и наложили на свойственную Сети гибкость.
Мы должны пойти другим путем.
Вместо того чтобы создавать отдельный дизайн для каждого вновь появляющегося устройства или браузера, мы должны относиться к ним как к разным проявлениям одного и того же дизайна. Другими словами, мы должны создавать сайты, которые будут не только более гибкими, но и лучше адаптируемыми к устройствам отображения.
Короче говоря, нам следует практиковать отзывчивый веб-дизайн. Мы можем воспользоваться присущей Сети гибкостью, не отказываясь при этом от необходимого нам контроля. Все, что нам для этого нужно, – внедрить в нашу работу технологии, основанные на стандартах, и несколько изменить собственное отношение к веб-дизайну.
Ингредиенты
Итак, что же нужно для создания отзывчивого дизайна? Если мы говорим о разработке макета страницы, нам потребуются три основных компонента:
1. Гибкий макет на основе сетки (flexible, grid-based layout).
2. Гибкие изображения (flexible images).
3. Медиазапросы (media queries), модуль спецификации CSS3.
В следующих трех главах мы последовательно рассмотрим эти элементы, которые и сделают наш подход к веб-дизайну более отзывчивым. В процессе