Отзывчивый веб-дизайн - Итан Маркотт

Рис. 1.4. …а также на самом нашем бизнесе и отношении клиентов. («Что скрывается за буквами Reg?» – спросите вы. А это просто обрезанная ссылка на страницу регистрации.)

А теперь пристегните ремни

Более десяти лет назад Джон Олсопп написал статью A Dao of Web Design («Дао веб-дизайна») (http://bkaprt.com/rwd/3/), и если вы не читали ее раньше, то просто обязаны прочитать сейчас (серьезно, я готов подождать). Это мое любимое эссе о веб-дизайне, и оно столь же актуально сейчас, как и тогда, когда его написали.

Джон считает, что:

Контроль, которым обладает дизайнер, когда работает с печатным носителем, и о котором мечтает, когда работает в вебе, есть попросту функция ограничений, навязываемая печатной страницей. Нам следует радоваться тому, что Сеть не имеет подобных ограничений, и создавать дизайн с расчетом на гибкость. Но вначале мы должны в полной мере «оценить плюсы и минусы такого положения вещей.

Конечно, Джон писал это во времена становления Сети, когда дизайнеры переносили принципы печатного дизайна в новую молодую среду. Но бо́льшая часть сказанного актуальна и сегодня. Ведь в наши дни Сеть стала еще более гибкой.

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

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

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

http://www.bbc.co.uk/news/mobile/science-environment-13095307

Видите директорию /mobile/? Владельцы сайта использовали для доступа к статье с мобильных устройств отдельный адрес, установив для него ширину страницы в 320 пикселей. Посетители сайта, получившие ссылку на него через Twitter, Facebook или по почте, могут просматривать его только в таком, предназначенном для маленьких экранов виде (независимо от того, на каком устройстве они изучают материал). Для меня читать эту статью на стационарном компьютере было сплошным мучением.

Это вовсе не значит, что мобильные сайты никому не нужны или что для их создания нет никаких коммерческих оснований. Но я искренне считаю, что представление контента в зависимости от устройства – подход если не проигрышный, то, во всяком случае, нежизнеспособный. За последние несколько лет мы уже поняли, что не в состоянии угнаться за темпами развития технологий. Мы что, действительно собираемся подстраиваться под каждый новый браузер или устройство?

Нет? Тогда какие у нас есть еще варианты?

Отзывчивая архитектура

Я всю жизнь увлекался архитектурой. Для меня как веб-дизайнера особую притягательность имеет именно то обилие ограничений, которыми, как мне кажется, наслаждаются архитекторы: каждый этап архитектурного процесса – от эскиза до плана, от фундамента до фасада – неуклонно становится все более жестким и все менее изменчивымым. Английский архитектор Кристофер Рен однажды написал, что архитектура устремлена в вечность, и в этих словах заключена великая истина, ведь творческие решения архитектора останутся неизменными на десятилетия, если не на века.

Проведя лишь день наедине с 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.

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

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

Во всех научно-фантастических фильмах, хороших или плохих, есть любимый авторами данного жанра сюжетный прием: тайный робот. Вы наверняка видели хоть один из подобных фильмов. Они всегда начинаются с того, как группа мужественных авантюристов во главе с честным героем, вооруженным содержательными остротами и/или непреклонной решимостью, отправляется на битву с неким злом. Но в их ряды затесался… тайный робот (звучит зловещая музыка). Это хитрое, дьявольски бездушное существо, сделанное из холодной стали и еще более холодных расчетов, но похожее на человека, и имеет оно одну четкую и подлую цель: подорвать нашу героическую группу изнутри.

Разоблачение робота – это кульминация всего фильма. Ясное дело, вы с самого начала знаете, кто герой, а кто робот-шпион. Что касается остальных персонажей, то приходится терзаться в догадках: кто же из них человек, а кто – тоже робот?

Лично для меня это никогда не было проблемой. Я, конечно, не говорю о Джонни 5 и C-3PO[1], на которых стоило только взглянуть, чтобы понять, что они явно не люди. Я имею в виду тех, кто скрывает свою сущность под синтетической кожей. Итак, я взял дело в свои руки: чтобы хоть как-то помочь решить эту проблему и научиться отличать друзей из крови и плоти от железных врагов, я спроектировал небольшой сайт под названием Robot or Not («Робот или нет») (рис. 1.7).