otzyvchivyyvebdizayn

Итан Маркотт Отзывчивый веб-дизайн Серия «Актуальные книги для тех, кто создает сайты», книга 1 Текст предоставлен издательством http://www.litres.ru/pages/biblio_book/?art=3744275Отзывчивый веб-дизайн: Манн, Иванов и Фербер; Москва; 2012 ISBN 978-5-91657-385-5 Аннотация Интернет вышел за границы мира стационарныхкомпьютеров, и сегодня можно с уверенностью сказать,что в течение нескольких лет лидирующей формойдоступа в Сеть станут устройства с маленькими экранами. Перед вами первое и единственное практическоеруководство, которое в пошаговой форме дает ответна вопрос, как сделать сайт максимально удобнымдля всех его посетителей, независимо от того,на каком устройстве они будут его просматривать.Оно содержит рекомендации, как избежать наиболеераспространенных ошибок и решить большинствопроблем, с которыми сталкиваются современныеинтернет-пользователи. Кроме того, в нем вы найдете

программные коды, которые позволят применить напрактике все предложенные разработки.

Содержание 8 10От научного редактора 12Предисловие 191. Наша отзывчивая сеть 22А теперь пристегните ремни 25Отзывчивая архитектура 26Путь вперед 31 37 Ингредиенты 422. Гибкая сетка 47Гибкие шрифты 48 57 Контекстное восстановление 63 От гибких шрифтов к гибкой сетке 64Создание гибкой сетки 75 От пикселей к процентам 81Гибкие поля и отступы 82 Не продохнуть… 83 Немного отрицательных значений 88 Гибко двигаемся дальше 933. Гибкие изображения 94Назад к разметке 97Гибкие изображенияЕсли бы все было так просто… Max-width в Internet Explorer …И здесь становится понятно, что Windows нас ненавидит

Да здравствует герой-победитель 102 AlphaImageLoader!Гибкие повторяющиеся фоновые 106изображения Полностью гибкие фоновые 114 изображения?Как научиться любить Overflow 116Проблемы с контентом 119Гибкие сетки и изображения как древо 122познания4. Медиазапросы 123Приступим к лечению 124 Расстановка акцентов 125 Маленькая сетка, большие проблемы 128 Широкоэкранные неприятности 133Насущные проблемы 136Навстречу отзывчивости 137 Знакомьтесь: медиатипы 138 Неправильное распределение типов 141 Знакомство с медиазапросами 143 Познакомьтесь с характеристиками 145 Знай свои характеристики 147Более отзывчивый робот 151 В компании с viewport 152Медиазапросы в действии 156 Все дело в деталях 162 Отворяй ворота! 178

Кое-что по поводу совместимости 182Зачем это нужно? 187 189 Ограничения по мере необходимости 1975. Как стать отзывчивым 198Все дело в контексте 203 206 Определение целей пользователей 208Знакомьтесь: «Сначала мобильные»Навстречу отзывчивому процессу 211разработки 213 221 Определяем разрешение 229 Итеративный совместный дизайн Интерактивный анализ дизайна 234Ответственный подход к отзывчивому 241дизайну 244 «Сначала мобильные» и медиазапросы 250Концепция прогрессивного улучшения 255 Работа с JavaScript 258 Загружаем контент не спеша, но с умом 260 Дальнейшие улучшения 263Вперед! Будь отзывчивым! 263Благодарности 264Приложение 265 Глава 1 266 Глава 2 268 Глава 3 Глава 4 Глава 5

Рекомендуемая литература 271Помощь онлайн 272Об авторе 274

Итан Маркотт Отзывчивый веб-дизайн От научного редактора Когда вы в последний раз выходили в Интернет сосвоего планшетника, электронной читалки или теле-фона? Вчера? Сегодня утром, просматривая новостиза чашкой кофе? В любом случае вы наверняка заметили, что боль-шинство сайтов не оптимизированы под мобильныеустройства: выглядят так же, как и на экране ноутбука,только гораздо мельче, и потому просматривать их неслишком удобно. «Почему же Интернет такой неповоротливый?» –спросите вы. Но это не так: Сеть меняется каждыйдень. Дизайнеры уже давно научились делать сайты,которые отлично выглядят и на широкоформатном мо-ниторе, и на экране мобильного телефона. И вот чтоинтересно – нужно для этого не так уж много. Не стоитписать кучу кодов для каждого мобильного устройства,тратить ресурсы на доработку под постоянно расту-щий ассортимент (попробуй за ним угнаться, когда тогогляди мы будем заказывать домой продукты с экрана,

встроенного прямо в холодильник). Об этом говорит и автор «Отзывчивого веб-дизай-на». Он погружает вас в мир адаптивных веб-сайтов– сайтов, которыми удобно пользоваться независимоот того, какое устройство сейчас в вашем распоряже-нии. Сегодня эта концепция – не прихоть, а важныйтренд развития Сети. И речь идет не просто о «тяну-щемся» сайте, а о его «умном» приспособлении к лю-бому устройству. Пользователю, который удобно рас-положился за большим экраном, вы покажете сразунесколько колонок текста. Тому же, кто зашел на вашсайт с iPhone, – лишь тот контент, который нужен емув дороге. Адаптирован ли ваш сайт к мобильным устрой-ствам? Не теряете ли вы клиентов лишь оттого, что имнеудобно заходить на него с планшетника или читал-ки? Помогите посетителям вашего сайта – адаптируй-те его для них. О том, как это лучше всего сделать, выузнаете из книги Итана Маркотта. Александр Сарычев, улучшающий сайты, аналитик компании «ЛидМашина. ру»

Предисловие Язык способен творить чудеса. В английском языкеу слова glamour («гламур», «очарование») имеются идругие значения – «магия» или «чародейство», а про-исходит оно от слова grammar («грамматика»). Из всехчудес, творимых языком, самое волшебное и потряса-ющее – способность присваивать имена. История веб-дизайна, хоть и недолгая, уже про-демонстрировала нам преобразующую силу языка.Джеффри Зельдман подарил нам термин «веб-стан-дарты», а Джесси Джеймс Гарретт изменил природувзаимодействия в Сети, придумав технологию Ajax. Итан Маркотт, изобретя термин «отзывчивый веб-дизайн» (responsive web design), также сотворил сво-его рода волшебство. Такие технологии, как «резино-вые» сетки и изображения или медиазапросы, суще-ствовали и до него, но Итан объединил их и изменилсамо наше представление о веб-дизайне. Итан – прекрасный рассказчик. Он мог бы стать иде-альным автором книги об отзывчивом веб-дизайне. И,что самое замечательное, он ее уже написал! Если вы надеетесь найти здесь советы и рекоменда-ции, которые помогут вам придать своим сайтам внеш-ний лоск, тогда эта книга не для вас – этот маленький

шедевр куда глубже. Когда вы прочтете книгу (а это не займет у вас многовремени) и приступите к работе над своим следующимпроектом, обратите внимание на то, как изменится вашподход к нему. Потому что, возможно, вы и не замети-те, как содержащиеся в книге идеи, изложенные в лег-ком, занимательном, а иногда и откровенно юмористи-ческом тоне, повлияют на ход ваших мыслей, однако ягарантирую, что ваша работа определенно выиграет отмагических пассов, которые Итан над вами сотворит. Итан Маркотт – самый настоящий волшебник, поэто-му расслабьтесь и будьте готовы поддаться его чарам. Джереми Кит, дизайнер и веб-разработчик, автор книги «HTML5 для веб-дизайнеров»

1. Наша отзывчивая сеть «Есть что-то, что не любитограждений…»Роберт Фрост, «Починка стены» Когда я начал писать эту книгу, я вдруг понял, чтопонятия не имею, в каком именно виде вы будете еечитать. По крайней мере, гарантировать, что вы будетечитать ее, перелистывая бумажные страницы, я не мо-гу. Может, вы сидите за столом и читаете ее электрон-ную версию на мониторе компьютера. Может, едете наработу и читаете ее на экране телефона или планше-та. А может, даже и не читаете, а слушаете то, что вамзачитывает компьютер. Я вообще очень мало о вас знаю. Издательское дело переняло одну из главных осо-бенностей Сети – ее гибкость. Дизайнер и книгоиз-датель Крэйг Мод считает, что издательская деятель-ность быстро входит в фазу «постартефакта» (http://bkaprt.com/rwd/1/), что цифровой век, в который мы жи-вем, диктует свои условия, и мы должны пересмотретьсамо понятие «книга». Конечно, веб-дизайнеры уже в течение некоторо-го времени пытаются разобраться с этим. По сути, внашей профессии собственных «артефактов» еще не

было. Ведь то, что мы производим, нельзя потрогать,сохранить, передать своим детям. Но, несмотря набесплотный характер нашей работы, посмотрите, ка-кими терминами мы постоянно пользуемся: «шапка»,«пробел», «просвет». Все эти слова пришли непосред-ственно из мира полиграфии: мы достали их с дальнейполки, стряхнули пыль и успешно используем в нашемновом цифровом мире. Некоторые из результатов такой «вторичной пере-работки» были совершенно оправданными. Что ни го-вори, привычка – вторая натура: переезжая в другойгород или устраиваясь на новую работу, мы, конечноже, прихватываем с собой старый опыт и накладываемего на новые обстоятельства, чтобы ориентироватьсяв новой действительности. А поскольку веб-дизайн –довольно-таки молодая сфера деятельности, для не-го вполне естественно заимствовать некоторые терми-ны из знакомого мира. История графического дизайнаохватывает несколько столетий, и было бы нелепо неиспользовать его язык для формирования нашей отра-сли. Но мы обязаны миру полиграфии намного большим,нежели слова и термины. Не все помнят об этом, номы позаимствовали из него понятие «холст» (рис. 1.1).Любая работа в сфере художественного творчестваначинается с выбора холста: художник использует листбумаги или кусок ткани, скульптор выбирает каменную

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

бимом редакторе мы создаем «холст» – чистый доку-мент с определенной шириной, высотой, параметра-ми и формой. Однако у веб-дизайнеров имеется су-щественная проблема: мы находимся на удалении отпользователя и его окна браузера со всеми свойствен-ными только ему несоответствиями и недостатками(рис. 1.2). Давайте посмотрим правде в глаза: как толь-ко проект становится доступным онлайн, все начина-ет зависеть от человека, который его просматривает, –от выбранного им шрифта, цветопередачи монитора,формы и размера окна браузера. Рис. 1.2. Наш холст – окно браузера Сталкиваясь с такой неопределенностью и гибко-стью, мы начинаем устанавливать ограничения: зада-ем размеры шрифтов в пикселях или создаем макеты сфиксированной шириной, с учетом минимального раз-решения экрана. Установка таких ограничений немно-

го напоминает выбор того самого холста – они опреде-ляют параметры будущей работы и придают стабиль-ность, которая защищает от изменчивости, изначаль-но присущей Сети. Но самое хорошее (и в то же время самое плохое)в Сети то, что она игнорирует какие-либо ограничения.Если бы у меня сегодня было дурное настроение, я быдаже сказал, что она упивается своей способностьюобходить все ограничения, в которые мы пытаемся еезагнать. Это касается и параметров, которые мы зада-ем в наших проектах: их легко нарушить. Если ширинабраузера посетителя сайта хоть чуть-чуть меньше ожи-даемой минимальной ширины (рис. 1.3), то он столк-нется с тем, что часть содержимого сайта будет обре-зана, или будет вынужден пользоваться для просмо-тра горизонтальной прокруткой. Проблемы возникаюти у нас, и у наших клиентов (рис. 1.4), и потому мини-мальное разрешение экрана заставляет крайне внима-тельно относиться к размещению важных ссылок илиэлементов: они могут просто-напросто уйти из областипросмотра, зависящей не от наших предпочтений, а отпредпочтений пользователя.

Рис. 1.3. Даже небольшое отклонение от «идеальных» параметровможет негативно сказаться на впечатлении пользователя… Рис. 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-3PO1, на которыхстоило только взглянуть, чтобы понять, что они явно нелюди. Я имею в виду тех, кто скрывает свою сущность 1 Роботы, герои фильма «Короткое замыкание» и саги о «Звездных вой-нах» соответственно. Здесь и далее прим. пер.

под синтетической кожей. Итак, я взял дело в свои ру-ки: чтобы хоть как-то помочь решить эту проблему инаучиться отличать друзей из крови и плоти от желез-ных врагов, я спроектировал небольшой сайт под на-званием Robot or Not («Робот или нет») (рис. 1.7).



Рис. 1.7. Дизайн сайта Robot or Not во всей красе Согласен, может, этот вопрос никого, кроме меня, неволнует. Но это на самом деле и неважно. На этом примерея просто покажу вам, как именно делается отзывчивыйсайт. На протяжении следующих нескольких глав мы свами будем разрабатывать сайт Robot or Not вместе,используя гибкие сетки, гибкие изображения и медиа-запросы. Возможно, вас не сильно увлекло мое повествова-ние. А может быть, вы уже устали от моей болтов-ни и хотите увидеть готовый продукт. Если так,тогда просто введите в адресной строке http://responsivewebdesign.com/robot/ и попробуйте его, какговорится, на ощупь. Вы все еще здесь? Чудесно. Тогда начинаем.

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

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

Рис. 2.2. Типографская сетка, использующаяся для размещения со-держимого и определения размеров страницы, – это мощный инстру-мент, помогающий и дизайнеру, и читателю В книге Grid Systems in Graphic Design («Систе-мы сеток в графическом дизайне») Мюллер-Брокманнназвал этот процесс «созданием типографского про-странства на странице», то есть разметкой сетки про-порционально размеру чистого листа бумаги. Но графический дизайн отличается от веб-дизай-на одним ключевым моментом: размерами страницы.Наш же холст – окно браузера – может приниматьлюбую форму и размеры в соответствии с прихотями

читателя или размерами устройств, на которых этотхолст отображается. Обычно первый слой нашего макета выглядит сле-дующим образом: #page { width: 960px; margin: 0 auto; } То есть мы создали элемент в разметке, задалиего фиксированную ширину в CSS и расположили настранице по центру. Если же мы решили создать гиб-кую сетку, мы должны перевести дизайн, созданный вPhotoshop (рис. 2.3), во что-то более «резиновое», бо-лее пропорциональное. С чего же начать?



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

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

нив типы контента в макете, вы пишете следующийHTML-код: <h1>Achieve sentience with Skynet! <ahref=\"#\">Read More &raquo;</a></h1> Заголовок с включенной в него ссылкой – прекрас-ная основа для семантической разметки, не правдали? После обнуления стилей вы получаете в браузе-ре следующий результат ( рис. 2.5). По чуть-чуть про-двигаемся вперед. Теперь мы можем начать добавлятьсвой стиль оформления. Давайте впишем в элементbody некоторые базовые правила: body { background-color: #DCDBD9; color: #2C2C2C; font: normal 100 % Cambria, Georgia,serif; } Рис. 2.5. Разметка без стилей. Именно так создается мечта (и веб-

сайт) Ничего особенного: светло-серый фон (#DCDBD9)для всего документа и черный текст (#2C2C2C). И ко-нечно, характеристики шрифта – жирность (по умолча-нию обычная, normal) и семейство шрифтов с засеч-ками (Cambria, Georgia, serif). Вы, вероятно, заметили, что кегль (размер шрифта)был установлен 100 %. Поступив таким образом, мыпривели базовый кегль к величине, принятой в браузе-ре по-умолчанию, который в большинстве случаев со-ставляет 16 пикселей. Теперь мы всегда сможем изме-нить кегль по отношению к этой относительной базовойвеличине с помощью единиц измерения em. Но преждечем мы это сделаем, давайте посмотрим, что у нас ужеполучилось (рис. 2.6). Рис. 2.6. Применив одно простое правило CSS, мы можем придатьэскизу несколько другой вид

Удивлены, почему h1 не выглядит как нормальныйзаголовок? Мы используем обнуление стилей, нивели-рующее стили браузера по умолчанию для элементовHTML, чтобы обеспечить их соответствие в различныхбраузерах. Лично мне больше всего нравится способобнуления от Эрика Мейера (http://bkaprt.com/rwd/9/),но вы можете выбрать какой-нибудь другой, благо вы-бор сейчас достаточно большой. В любом случае наш h1 выглядит таким малень-ким именно по этой причине: он наследует стиль fontsize 100 %, который мы задали родительскому эле-менту body, а установленный в браузере по умолча-нию кегль – 16 пикселей. Теперь, если пиксели нас устраивают, мы можем пе-ревести значения из оригинал-макета непосредствен-но в CSS: h1 { font-size: 24px; font-style: italic; font-weight: normal; } h1 a { color: #747474; font: bold 11px Calibri, Optima, Arial,sans-serif; letter-spacing: 0.15em; text-transform: uppercase;

text-decoration: none; } Нет ничего плохого или неправильного в определе-нии размера текста с помощью пикселей. Но в целяхнашего эксперимента давайте начнем думать пропор-ционально и переведем значения кегля (font-size)из пикселей в относительные единицы, а вместо пик-селей и будем использовать знакомые нам em.

Контекстное восстановление Сейчас будет немного математики: берем целевоезначение кегля и делим на кегль (font size) его кон-тейнера, то есть контекста. В результате мы получаемжелаемый кегль, выраженный в относительных и до-статочно гибких единицах em. Другими словами, относительный кегль можно рас-считать по следующей формуле: target ÷ context = result (Отвлечемся на минутку. Лично у меня слово «мате-матика» вызывает немедленный и серьезный приступпаники. У вас тоже? Стойте, не убегайте с криками –все не так страшно. Это говорит вам человек, которыйзаменил курс математики в колледже курсом филосо-фии. Делайте, как я: просто посчитайте все на кальку-ляторе и скопируйте результат в CSS. Калькуляторы –просто спасение для таких, как мы, правда?) Итак, формула у нас есть, давайте вернемся к на-шему заголовку в 24px. Если предположить, что базо-вый кегль (font size) элемента body равен 16 пик-селям при 100 %, мы можем подставить эти значениянепосредственно в формулу. В результате получим от-ношение целевого кегля заголовка h1 (24 пикселя, 24px) и кегля его контекста (16 пиксе-

лей, 16px): 24: 16 = 1,5 Так как 24 пикселя в 1,5 раза больше 16 пикселей,это значит, что кегль равен 1,5 em. h1 { font-size: 1.5em; /* 24px / 16px */ font-style: italic; font-weight: normal; } Вуаля! Размер нашего заголовка прекрасно совпа-дает с размером, указанным в оригинал-макете, но приэтом выражен в относительных, масштабируемых еди-ницах (рис. 2.7). (Обычно я оставляю комментарий с расчетами справой стороны (/* 24px / 16px */). Вносить изме-нения становится намного проще.) С этим закончили, давайте вернемся к нашей одино-кой маленькой ссылке Read More (узнать больше). Хо-тя, если посмотреть на рис. 2.7, она не такая уж и ма-ленькая. И это проблема. Нам нужно уменьшить задан-ные 11 пикселей, и довольно существенно, посколькуразмер его шрифта принял значение 1,5 em от егоконтекста, h1.

Рис. 2.7. Размер нашего заголовка правильно выражен в гибких, мас-штабируемых единицах em. (Но что за ерунда творится со ссылкой?) И вот здесь требуется внимание. Поскольку текст за-головка установлен равным 1,5 em, любые элементывнутри этого заголовка должны быть выражены в ви-де доли этого значения. Другими словами, изменилсянаш контекст. Поэтому, чтобы установить кегль ссылки в единицахem, мы делим целевые 11 пикселей (11px) не на 16(значение, установленное в body), а на 24 – кегль за-головка, наш новый контекст: 11: 24 = 0,458333333333333 Мы получили какое-то совсем некрасивое число.Может быть, самое некрасивое, которые вы сегоднявидели. (Но подождите, эта глава еще не окончена.) Вам захочется округлить его до более-менее при-емлемого числа – скажем, 0,46 em. Даже не ду-майте! Может, ваши глаза и устанут смотреть на

0,458333333333333, но именно это число идеаль-но представляет желаемый кегль в пропорциональномотношении. К тому же браузеры мастерски владеют ис-кусством округления лишних десятичных знаков, когдапреобразовывают значения в пиксели. Поэтому нужнодать им больше, а не меньше, и в конце вас будет ожи-дать отличный результат. Теперь просто скопируйте это непритязательное чи-сло в CSS: h1 a { font: bold 0.458333333333333em Calibri,Optima, Arial, sans-serif; /* 11px / 24px */ color:#747474; letter-spacing: 0.15em; text-transform: uppercase; text-decoration: none; } Посмотрим на результат. Наша страничка законче-на, она полностью соответствует желаемому дизай-ну, а текст задан в масштабируемых единицах em(рис. 2.8).

Рис. 2.8. С помощью простой математики мы создали более красивыйдизайн – и без всяких пикселей

От гибких шрифтов к гибкой сетке Вы, наверное, сейчас зеваете со скуки. Здесь ведьдолжна была быть глава про гибкие макеты, а этот типИтан все талдычит про математику и размеры шриф-тов. Надоело! Но когда я впервые делал гибкую сетку, я понятия неимел, с чего начинать. Поэтому, столкнувшись с нераз-решимой проблемой, я сделал то, что у меня получа-ется лучше всего: полностью ее проигнорировал и на-чал работать над тем, что знаю. Когда я понял, как устанавливать размеры текста вединицах em, на меня снизошло прозрение: ведь мыможем применять тот же принцип пропорциональногомышления и в отношении самих макетов. Другими сло-вами, все элементы нашей сетки – строки, колонки инакладываемые на них модули – могут быть выраженыкак пропорция содержащихся в них элементов, а не внеизменных, жестких пикселях. И в этом нам снова поможет наша формула target÷ context = result. Идем дальше.

Создание гибкой сетки Представьте, что дизайнер настолько впечатлен ва-шей быстрой и качественной работой над заголовком,что прислал вам другой макет, и теперь вам нужно на-писать код для блога сайта Robot or Not (рис. 2.9).

Рис. 2.9. Новое задание – превращение эскиза в гибкий макет Плюс ко всему дизайнеру настолько понравиласьработа, что он прислал краткую схему содержаниястраницы (рис. 2.10), благодаря чему мы можем нетратить время на планирование. Нужно как-то его от-

благодарить. Рис. 2.10. Схема расположения элементов для нашего блога Мы можем быстро и ловко перевести его схему в ба-зовую структуру верстки: <div id=\"page\"> <div class=\"blog section\"> <h1 class=\"lede\">Recently in <ahref=\"#\">The Bot Blog</a></h1> <div class=\"main\"> … </div><!– /end.main – > <div class=\"other\"> …