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

Итак, что же нужно для создания отзывчивого дизайна? Если мы говорим о разработке макета страницы, нам потребуются три основных компонента:

1. Гибкий макет на основе сетки (flexible, grid-based layout).

2. Гибкие изображения (flexible images).

3. Медиазапросы (media queries), модуль спецификации CSS3.

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

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

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

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

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

^{Рис. 1.7. Дизайн сайта Robot or Not во всей красе}

Согласен, может, этот вопрос никого, кроме меня, не волнует.

Но это на самом деле и неважно. На этом примере я просто покажу вам, как именно делается отзывчивый сайт. На протяжении следующих нескольких глав мы с вами будем разрабатывать сайт Robot or Not вместе, используя гибкие сетки, гибкие изображения и медиазапросы.

Возможно, вас не сильно увлекло мое повествование.

А может быть, вы уже устали от моей болтовни и хотите увидеть готовый продукт. Если так, тогда просто введите в адресной строке http://responsivewebdesign.com/robot/ и попробуйте его, как говорится, на ощупь.

Вы все еще здесь? Чудесно. Тогда начинаем.

Один мой преподаватель в колледже как-то сказал, что любое художественное действие – музыкальное, литературное или изобразительное – можно считать ответом на действие, ему предшествующее. Режиссеры шестидесятых сняли фильмы «Бонни и Клайд» и «Выпускник» в ответ на старые голливудские картины, такие как, например, «Звуки музыки». В «Потерянном рае» Джон Мильтон фактически помещает своих литературных предшественников в декорации ада – и это вряд ли можно считать тонкой насмешкой над их поэтическими идеалами. И если бы не музыка Дюка Эллингтона и Бенни Гудмена, Чарли Паркер, возможно, никогда бы и не затевал своих безумных экспериментов с бибопом.

Люди искусства всегда спорили друг с другом. Это в первую очередь касается художников-модернистов середины ХХ века. Модернисты смотрели на творческое наследие предшественников – романтиков конца XIX века – с некоторым, мягко говоря, презрением. Для них искусство романтиков было перегружено всей этой чепухой – бесполезным украшательством, которое сводило на нет художественную ценность произведения и не позволяло должным образом донести до зрителя его смысл (рис. 2.1).

^{Рис. 2.1. Модернисты провозглашали отрыв от чрезмерно разукрашенного реализма Уильяма Блейка и Эжена Делакруа и переход к более рациональному подходу Ханса Хофманна и Йозефа Мюллер-Брокманна}

Реакция модернистов проявлялась различными способами и охватывала практически все виды искусства. Так, в живописи это означало сведение картин до экспериментов с линиями, формой и цветом. Графические дизайнеры того времени, такие как Ян Чихольд, Эмиль Рудер и Йозеф Мюллер-Брокманн, популяризировали понятие типографской, или модульной, сетки – рациональной системы колонок и рядов, в которые можно было поместить модули с контентом (рис. 2.2). А благодаря дизайнерам Хою Виню и Марку Болтону нам удалось адаптировать эту старую концепцию к потребностям современного веб-дизайна.

^{Рис. 2.2. Типографская сетка, использующаяся для размещения содержимого и определения размеров страницы, – это мощный инструмент, помогающий и дизайнеру, и читателю}

В книге Grid Systems in Graphic Design («Системы сеток в графическом дизайне») Мюллер-Брокманн назвал этот процесс «созданием типографского пространства на странице», то есть разметкой сетки пропорционально размеру чистого листа бумаги.

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

Обычно первый слой нашего макета выглядит следующим образом:

То есть мы создали элемент в разметке, задали его фиксированную ширину в CSS и расположили на странице по центру. Если же мы решили создать гибкую сетку, мы должны перевести дизайн, созданный в Photoshop (рис. 2.3), во что-то более «резиновое», более пропорциональное.

С чего же начать?

^{Рис. 2.3. Созданный в Photoshop макет выглядит достаточно привлекательным, в отличие от сетки. Как можно сделать ее более гибкой?}

Чтобы ответить на этот вопрос, давайте сыграем в одну ролевую игру. Нет-нет, можете убрать реквизит, я говорю о чем-то более практичном, не имеющем отношения к игрищам «толкиенистов».