Отзывчивый веб-дизайн
Шрифт:
Проведя лишь день наедине с Internet Explorer, начинаешь думать, что такое постоянство действительно прекрасно.
Однако в последние годы возникла относительно новая дисциплина, которая получила название «отзывчивая архитектура» и которая бросила вызов незыблемости, лежащей в основе архитектуры как таковой. Это очень молодая дисциплина, но как более интерактивная форма она уже громко заявила о себе в нескольких направлениях.
К примеру, проводятся эксперименты с поверхностями, которые реагируют на голос , и с жилыми пространствами, которые могут трансформироваться, подстраиваясь под пользователей . Не так давно придумана технология «умного» стекла, которое по желанию клиента, решившего отгородиться от внешних раздражителей, становится
Рис. 1.5. То видно, то не видно: «умное» стекло может автоматически становиться матовым
А одна немецкая дизайнерская компания, используя автоматические системы и эластичные материалы, создала «стену», способную изгибаться, расширяться и менять форму, когда к ней приближается человек (рис. 1.6).
Рис. 1.6. Это не просто привлекательная художественная инсталляция. Стена действительно может чувствовать присутствие человека и реагировать на его приближение
Вместо того чтобы создавать пространства, которые влияют на поведение находящихся в них людей, приверженцы нового подхода предлагают пространства, взаимодействующие с человеком.
Путь вперед
Меня восхищает то, что архитекторы пытаются преодолеть ограничения, изначально присущие их деятельности. Веб-дизайнеры же, сталкиваясь с многообразием новых устройств и окружений, вынуждены преодолевать ограничения, которые мы сами и наложили на свойственную Сети гибкость.
Мы должны пойти другим путем.
Вместо того чтобы создавать отдельный дизайн для каждого вновь появляющегося устройства или браузера, мы должны относиться к ним как к разным проявлениям одного и того же дизайна. Другими словами, мы должны создавать сайты, которые будут не только более гибкими, но и лучше адаптируемыми к устройствам отображения.
Короче говоря, нам следует практиковать отзывчивый веб-дизайн. Мы можем воспользоваться присущей Сети гибкостью, не отказываясь при этом от необходимого нам контроля. Все, что нам для этого нужно, – внедрить в нашу работу технологии, основанные на стандартах, и несколько изменить собственное отношение к веб-дизайну.
Ингредиенты
Итак, что же нужно для создания отзывчивого дизайна? Если мы говорим о разработке макета страницы, нам потребуются три основных компонента:
1. Гибкий макет на основе сетки (flexible, grid-based layout).
2. Гибкие изображения (flexible images).
3. Медиазапросы (media queries), модуль спецификации CSS3.
В следующих трех главах мы последовательно рассмотрим эти элементы, которые и сделают наш подход к веб-дизайну более отзывчивым. В процессе изучения мы создадим дизайн, способный адаптироваться к ограничениям окна браузера или устройства, на котором он будет просматриваться, то есть дизайн, практически полностью отвечающий потребностям пользователя.
Но прежде чем мы нырнем в эти глубины, я должен вас предупредить: я фанат научной фантастики. Обожаю лазерные пистолеты, андроидов и летающие авто, а также фильмы и сериалы, в которых всего этого в изобилии. Причем, если честно, качество этих фильмов меня не сильно заботит. Неважно, снял ли фильм Кубрик или его бюджет не превысил суммы, которую я обычно трачу на обед, но если там есть хоть один космический корабль – я счастлив.
Во всех научно-фантастических
Разоблачение робота – это кульминация всего фильма. Ясное дело, вы с самого начала знаете, кто герой, а кто робот-шпион. Что касается остальных персонажей, то приходится терзаться в догадках: кто же из них человек, а кто – тоже робот?
Лично для меня это никогда не было проблемой. Я, конечно, не говорю о Джонни 5 и C-3PO [1] , на которых стоило только взглянуть, чтобы понять, что они явно не люди. Я имею в виду тех, кто скрывает свою сущность под синтетической кожей. Итак, я взял дело в свои руки: чтобы хоть как-то помочь решить эту проблему и научиться отличать друзей из крови и плоти от железных врагов, я спроектировал небольшой сайт под названием Robot or Not («Робот или нет») (рис. 1.7).
1
Роботы, герои фильма «Короткое замыкание» и саги о «Звездных войнах» соответственно. Здесь и далее прим. пер.
Рис. 1.7. Дизайн сайта Robot or Not во всей красе
Согласен, может, этот вопрос никого, кроме меня, не волнует.
Но это на самом деле и неважно. На этом примере я просто покажу вам, как именно делается отзывчивый сайт. На протяжении следующих нескольких глав мы с вами будем разрабатывать сайт Robot or Not вместе, используя гибкие сетки, гибкие изображения и медиазапросы.
Возможно, вас не сильно увлекло мое повествование.
А может быть, вы уже устали от моей болтовни и хотите увидеть готовый продукт. Если так, тогда просто введите в адресной строкеи попробуйте его, как говорится, на ощупь.
Вы все еще здесь? Чудесно. Тогда начинаем.
2. Гибкая сетка
Один мой преподаватель в колледже как-то сказал, что любое художественное действие – музыкальное, литературное или изобразительное – можно считать ответом на действие, ему предшествующее. Режиссеры шестидесятых сняли фильмы «Бонни и Клайд» и «Выпускник» в ответ на старые голливудские картины, такие как, например, «Звуки музыки». В «Потерянном рае» Джон Мильтон фактически помещает своих литературных предшественников в декорации ада – и это вряд ли можно считать тонкой насмешкой над их поэтическими идеалами. И если бы не музыка Дюка Эллингтона и Бенни Гудмена, Чарли Паркер, возможно, никогда бы и не затевал своих безумных экспериментов с бибопом.
Люди искусства всегда спорили друг с другом. Это в первую очередь касается художников-модернистов середины ХХ века. Модернисты смотрели на творческое наследие предшественников – романтиков конца XIX века – с некоторым, мягко говоря, презрением. Для них искусство романтиков было перегружено всей этой чепухой – бесполезным украшательством, которое сводило на нет художественную ценность произведения и не позволяло должным образом донести до зрителя его смысл (рис. 2.1).
<