Страница:
Итан Маркотт
Отзывчивый веб-дизайн
http://bkaprt.com/rwd/1/), что цифровой век, в который мы живем, диктует свои условия, и мы должны пересмотреть само понятие «книга».
Конечно, веб-дизайнеры уже в течение некоторого времени пытаются разобраться с этим. По сути, в нашей профессии собственных «артефактов» еще не было. Ведь то, что мы производим, нельзя потрогать, сохранить, передать своим детям. Но, несмотря на бесплотный характер нашей работы, посмотрите, какими терминами мы постоянно пользуемся: «шапка», «пробел», «просвет». Все эти слова пришли непосредственно из мира полиграфии: мы достали их с дальней полки, стряхнули пыль и успешно используем в нашем новом цифровом мире.
Некоторые из результатов такой «вторичной переработки» были совершенно оправданными. Что ни говори, привычка – вторая натура: переезжая в другой город или устраиваясь на новую работу, мы, конечно же, прихватываем с собой старый опыт и накладываем его на новые обстоятельства, чтобы ориентироваться в новой действительности. А поскольку веб-дизайн – довольно-таки молодая сфера деятельности, для него вполне естественно заимствовать некоторые термины из знакомого мира. История графического дизайна охватывает несколько столетий, и было бы нелепо не использовать его язык для формирования нашей отрасли.
Но мы обязаны миру полиграфии намного большим, нежели слова и термины. Не все помнят об этом, но мы позаимствовали из него понятие «холст» (рис. 1.1). Любая работа в сфере художественного творчества начинается с выбора холста: художник использует лист бумаги или кусок ткани, скульптор выбирает каменную глыбу. Независимо от того, что намерен сделать художник, его первый творческий акт – выбор холста. Еще до первого мазка кисти или удара зубила холст задает произведению искусства параметры и форму, ширину и высоту будущей работы, определяет ее границы.
Рис. 1.1. Холст, даже пустой, создает ограничения для работы художника
Веб-дизайнеры стараются подражать этому процессу. Мы даже используем то же слово: в нашем любимом редакторе мы создаем «холст» – чистый документ с определенной шириной, высотой, параметрами и формой. Однако у веб-дизайнеров имеется существенная проблема: мы находимся на удалении от пользователя и его окна браузера со всеми свойственными только ему несоответствиями и недостатками (рис. 1.2). Давайте посмотрим правде в глаза: как только проект становится доступным онлайн, все начинает зависеть от человека, который его просматривает, – от выбранного им шрифта, цветопередачи монитора, формы и размера окна браузера.
Рис. 1.2. Наш холст – окно браузера
Сталкиваясь с такой неопределенностью и гибкостью, мы начинаем устанавливать ограничения: задаем размеры шрифтов в пикселях или создаем макеты с фиксированной шириной, с учетом минимального разрешения экрана. Установка таких ограничений немного напоминает выбор того самого холста – они определяют параметры будущей работы и придают стабильность, которая защищает от изменчивости, изначально присущей Сети.
Но самое хорошее (и в то же время самое плохое) в Сети то, что она игнорирует какие-либо ограничения. Если бы у меня сегодня было дурное настроение, я бы даже сказал, что она упивается своей способностью обходить все ограничения, в которые мы пытаемся ее загнать. Это касается и параметров, которые мы задаем в наших проектах: их легко нарушить. Если ширина браузера посетителя сайта хоть чуть-чуть меньше ожидаемой минимальной ширины (рис. 1.3), то он столкнется с тем, что часть содержимого сайта будет обрезана, или будет вынужден пользоваться для просмотра горизонтальной прокруткой. Проблемы возникают и у нас, и у наших клиентов (рис. 1.4), и потому минимальное разрешение экрана заставляет крайне внимательно относиться к размещению важных ссылок или элементов: они могут просто-напросто уйти из области просмотра, зависящей не от наших предпочтений, а от предпочтений пользователя.
Рис. 1.3. Даже небольшое отклонение от «идеальных» параметров может негативно сказаться на впечатлении пользователя…
Рис. 1.4. …а также на самом нашем бизнесе и отношении клиентов. («Что скрывается за буквами Reg?» – спросите вы. А это просто обрезанная ссылка на страницу регистрации.)




http://bkaprt.com/rwd/3/), и если вы не читали ее раньше, то просто обязаны прочитать сейчас (серьезно, я готов подождать). Это мое любимое эссе о веб-дизайне, и оно столь же актуально сейчас, как и тогда, когда его написали.
Джон считает, что:
Контроль, которым обладает дизайнер, когда работает с печатным носителем, и о котором мечтает, когда работает в вебе, есть попросту функция ограничений, навязываемая печатной страницей. Нам следует радоваться тому, что Сеть не имеет подобных ограничений, и создавать дизайн с расчетом на гибкость. Но вначале мы должны в полной мере «оценить плюсы и минусы такого положения вещей.
Конечно, Джон писал это во времена становления Сети, когда дизайнеры переносили принципы печатного дизайна в новую молодую среду. Но бо́льшая часть сказанного актуальна и сегодня. Ведь в наши дни Сеть стала еще более гибкой.
Как бы там ни было, мы вступили в свой собственный переходный период. Разнообразие браузеров приобретает впечатляющие масштабы, а устройства становятся одновременно и миниатюрнее, и крупнее. По оценкам специалистов, в течение нескольких ближайших лет лидирующей формой доступа в Сеть станут устройства с маленькими экранами, при этом современные игровые консоли позволят работать в Сети на широкоформатных экранах. В последнее время все больше пользователей заходят в Интернет с планшетов, то есть у нас появилась еще одна форма доступа – не мобильная и не стационарная, а нечто среднее.
Короче говоря, сейчас нам приходится считаться с гораздо бо́льшим количеством устройств, типов входа и разрешений. Сеть вышла за пределы мира стационарных компьютеров, и назад дороги нет.
К сожалению, ранние попытки проектирования поразительно напоминали наши старые подходы, то есть мы по прежнему пытались установить ограничения, чтобы как-то компенсировать неопределенность работы в Сети. Несколько месяцев назад моя подруга прислала мне ссылку на статью, которую она только что прочитала с помощью своего телефона:
http://www.bbc.co.uk/news/mobile/science-environment-13095307
Видите директорию /mobile/? Владельцы сайта использовали для доступа к статье с мобильных устройств отдельный адрес, установив для него ширину страницы в 320 пикселей. Посетители сайта, получившие ссылку на него через Twitter, Facebook или по почте, могут просматривать его только в таком, предназначенном для маленьких экранов виде (независимо от того, на каком устройстве они изучают материал). Для меня читать эту статью на стационарном компьютере было сплошным мучением.
Это вовсе не значит, что мобильные сайты никому не нужны или что для их создания нет никаких коммерческих оснований. Но я искренне считаю, что представление контента в зависимости от устройства – подход если не проигрышный, то, во всяком случае, нежизнеспособный. За последние несколько лет мы уже поняли, что не в состоянии угнаться за темпами развития технологий. Мы что, действительно собираемся подстраиваться под каждый новый браузер или устройство?
Нет? Тогда какие у нас есть еще варианты?
http://bkaprt.com/rwd/5/), и с жилыми пространствами, которые могут трансформироваться, подстраиваясь под пользователей (http://bkaprt.com/rwd/6/). Не так давно придумана технология «умного» стекла, которое по желанию клиента, решившего отгородиться от внешних раздражителей, становится матовым (рис. 1.5).
Рис. 1.5. То видно, то не видно: «умное» стекло может автоматически становиться матовым
А одна немецкая дизайнерская компания, используя автоматические системы и эластичные материалы, создала «стену», способную изгибаться, расширяться и менять форму, когда к ней приближается человек (рис. 1.6).
Рис. 1.6. Это не просто привлекательная художественная инсталляция. Стена действительно может чувствовать присутствие человека и реагировать на его приближение
Вместо того чтобы создавать пространства, которые влияют на поведение находящихся в них людей, приверженцы нового подхода предлагают пространства, взаимодействующие с человеком.

