Краткий курс — «Адаптивный сайт за неделю»: типографика и сетка (часть II)

Маркетинг2 Создание сайтов2 Контекстная реклама3 Комплекс услуг2 SEO3 Дизайн2 Программирование2 Менеджмент SMM1 Digital1 Мобильная разработка Интернет-маркетинг Использование сервиса1 Юзабилити Брендинг E-commerce

ДизайнСтатья

Адаптивный дизайнСоветыТипографикаСетка

Во второй части своего практического пособия по адаптивному веб-дизайну, Поль Роберт Ллойд расскажет нам, как преобразовать статичные дизайн-макеты сайта в адаптивные. Итак, скажем — нет пикселям, да — пропорциям! А если вы еще видели первую - настоятельно рекомендуем с ней ознакомиться.

Paul Robert Lloyd

10 сентября 2012

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

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

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

Максим Степанов
Руководитель группы разработчиков AGIMA

Ежечасно появляется все больше и больше абсолютно новых устройств с различными размерами экранов. Особенно это касается последних тенденций к увеличению количества отображаемых dpi (Retina от Apple, а также другие производители), поэтому подход актуален как никогда.

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

Принцип «Mobile First»

Как я отметил в первой статье, создавайте сначала базовую версию, перед тем как улучшать ее для устройств с большим количеством возможностей. Этот подход тесно связан с принципом «Mobile First», который придумал Люк Вроблевски.

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

Имея это в виду, мы создадим базовый CSS для мобильной версии, а для каждой последующей адаптации, мы добавим дополнительные стили, используя media queries.

Адаптивная типографика

Типографика — фундамент нашего дизайна, именно она станет основой для нашего CSS файла. Желательно, чтобы дизайн был основан на четкой иерархии: всегда лучше иметь 3 конкретных стиля заголовка, чем 10 неопределенных.

Хорошо выделять типографику в отдельный этап. Это делается путем создания шаблона документа, содержащего все основные элементы HTML, прежде чем разрабатывать таблицу стилей, которая сбрасывает исходные стили браузера и заменяет их на стили, предусмотренные нашим дизайном. Это дает гарантию, что я все предусмотрел — от заголовков и параграфов до таблиц и форм.

Максим Степанов
Руководитель группы разработчиков AGIMA

К сбросу стилей стоит подходить осторожно. Большинство сайтов работает под какой-либо CMS, в которой используется визуальный редактор для правки HTML-контента, и, если стили сброшены, то визуальный редактор перестает в полной мере решать свои задачи. Списки отображаются без маркеров, таблицы без рамок (даже при явном указании бордера).

Начнем с элемента <body>:

body {
color: #333;
font: 100%/1.5 Cambria, Georgia, serif;
background: #ece6d6 url(_assets/bg-light.png) repeat;
margin: 0 auto;
padding: 1em 20%; /* temporary */
}

Мы используем базовый размер шрифта в 100%, что соответствует 16px в большинстве браузеров, и как ни странно, соответствует размеру текста в нашем дизайн-макете — это кажется подозрительно хорошо спланировано! Мы также установим стили фона и добавим несколько временных отступов. Таким образом, мы оградим наш контент от смещения за рамки окна браузера, пока мы применяем эти стили.

А теперь давайте посмотрим на другой элемент. Анализируя наш дизайн, мы можем применить следующий CSS к заголовкам первого уровня:

h1 {
color: #2c1c16;
font-family: 'Proxima Nova Bold',sans-serif;
font-weight: bold;
font-size: 28px;
}

Больше не нужно искать и обзванивать каждое диджитал-агентство
Создайте конкурс на workspace.ru – получите предложения от участников CMS Magazine по цене и срокам. Это бесплатно и займет 5 минут. В каталоге 15 617 диджитал-агентств, готовых вам помочь – выберите и сэкономьте до 30%.
Создать конкурс →

Адаптивные единицы

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

К счастью, у нас есть выбор:

Em: единица em пришла к нам из печати и по ширине соответствует букве ’M’ в каждом типе шрифта. Важно, что эта величина относится к размеру шрифта заданного в браузере по умолчанию. Например, если размер вашего шрифта 16px, дочерний элемент с размером шрифта 2em составит 32px.
%: для других свойств, особенно тех, которые влияют на расположение, подходит измерение в процентах. Опять же, это значение связано с содержимым элемента. Например, если <div> с шириной 50% содержит дочерний элемент также с шириной 50%, следовательно, суммарная ширина для этого дочернего элемента составит 25% от общей ширины документа.

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

Максим Степанов
Руководитель группы разработчиков AGIMA

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

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

планируемая величина/контекст = результат

Привыкайте к этой формуле, мы будем часто использовать ее в дальнейшем!

В случае нашего заголовка, контекстом является родительский элемент <body>. Это размер шрифта 100% (что соответствует 16px), в то время как планируемая величина нашего заголовка 28px:

h1 {
color: #2c1c16;
font-family: 'Proxima Nova Bold',sans-serif;
font-weight: bold;
font-size: 1.75em; /* 28px */
}

28 / 16 = 1.75

Применяем эту формулу к стилю нашего заголовка и получаем следующее:

(Полученную ширину в пикселях я привык отображать в комментариях, чтобы иметь возможность обратиться к ней позже).

Мы также хотим определить параметр line-height. Если заголовок длиной в несколько строк — это спасет его от наложения строк друг на друга. 32px вполне подойдут.

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

планируемая величина/контекст = результат

32 / 28 = 1.1428571429

Да, слишком много знаков после запятой, но цифра абсолютно точная. Можно отбросить лишние знаки, но я бы не убирал больше четырех. Мы также хотим добавить верхний отступ в 24px. И снова мы можем использовать формулу:

24 / 28 = 0.8571428571

Подставляем эти значения, и получаем окончательный стиль заголовка:

h1 {
color: #2c1c16;
font-family: 'Proxima Nova Bold',sans-serif;
font-weight: bold;
font-size: 1.75em; /* 28px */
line-height: 1.1428 /* 32px */
margin-top: 0.8571em; /* 24px */
}

(Заметим, что вам не нужно назначать точное значение для параметра line-height).

Используя em, мы наделяем наш шрифт суперсилой — мы можем его сокращать, масштабировать и адаптировать его к любой среде. Но с большей силой, приходит большая... головная боль.

Так как значение em связано с родительским элементом, мы должны быть осторожны со стилем вложенного контента. В дальнейшем нам это пригодится, но обратите внимание на изменение контекста, когда вы применяете em в правилах CSS.

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

Максим Степанов
Руководитель группы разработчиков AGIMA

Очень полезное нововведение, однако, пока существуют проблемы при использовании в старых версиях браузеров.

После того как мы сделали то же самое для всех остальных наших базовых элементов, у нас должен получиться следующий документ:

Просмотреть руководство по стилю

Возвращаясь к нашему набору шаблонов разметки, мы видим, что она также начинает обретать форму:

Просмотреть папку шаблонов разметки

Очевидно, что нам нужно будет добавить дополнительные стили, когда мы углубимся в детали каждого шаблона, но и, определяя эти базовые стили, нестилизованные компоненты вернутся к дефолтным значениям.

Структура страницы

Теперь, когда мы разобрались с типографикой, давайте сосредоточимся на структуре страницы.

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

Хорошим примером является бета-версия мобильного сайта BBC, которая использует две колонки достаточно эффективно:

Прежде чем пытаться сделать что-то подобное, давайте установим отступы для основного контента. Обратимся к .document <div> и добавим его в нашу разметку:

<div role="document">
<h1>Arriving in Las Vegas</h1>
...
</div></!—/document—>

(Примечание: Я использую функции ARIA, чтобы структурировать свой документ соответствующими именами классов для стилизации хуков. Если бы я хотел проявить больше фантазии, я мог бы не использовать имена классов, а вместо этого использовать селектор атрибута div[role="document"]).

В более узких макетах отступ соответствует 16px (наша планируемая величина), в то время как общая ширина 320px (контекст). Опять же, мы можем использовать пиксели:

.document {
padding-left: 16px;
padding-right: 16px;
}

Но мы хотим создать макет с подвижной структурой. Давайте снова обратимся к нашей формуле:

16 / 320 = 0.05

Конечный результат мы хотим получить в процентах, поэтому умножим это число на 100, и получим 5. Это дает нам следующее:

.document {
padding-left: 5%;
padding-right: 5%;
}

Это достаточно просто. Теперь давайте попробуем что-то более сложное.

Один из дизайн-макетов представляет собой упорядоченный список картинок для предпросмотра. Они выводятся в две строки, по два элемента в каждой с расстоянием между колонками и отступом под каждым элементом:

HTML код для этого макета следующий:

<ol>
<li>
<a href="#">
<img src="http://dummyimage.com/240×160/ccc/eee.png" alt="" />
<h2>Title of media item</h2>
<time>10:04PM</time>
</a>
</li>
…
</ol>

Сначала сбросим стили нашего списка:

ol.media {
list-style: none;
margin: 0;
clear: both;
overflow: hidden; /* to clear floats */
}

Перед добавлением стилей для каждого пункта этого списка.

ol.media li.media-item {
background-color: #fff;
float: left;
}

Ширина каждого превью составляет 138рх, при ширине экрана 320pх. Стоп! Получается, что значение нашего контекста уже не 320px. С тех пор, как мы добавили отступ между превьюшками, ширина составила 288px. Это дает нам следующий расчет:

(288/138) * 100 = 47,91666666667%

Также мы можем рассчитать значение для правого и нижнего отступа (возьмем заданную в дизайн-макете величину в 12px):

(288/12) * 100 = 4,16666666667%

Таким образом, мы получаем адаптивные превью:

ol.media li.media-item {
background-color: #fff;
margin: 0 4.16666666667% 4.16666666667% 0;
width: 47.91666666667%;
float: left;
}
ol.media li.media-item:nth-child(2n) {
margin-right: 0;
}

Посмотрим папку шаблонов разметки с новыми адаптивными превьюшками

Но одну вещь вы заметите точно (возможно, при изменении размеров браузера), размер превью не реагирует на изменение ширины контейнеров.

В следующей статье: Мы обнаружим удивительно простое решение этой проблемы, и продолжим делать наши макеты еще более адаптивными.

Максим Степанов
Руководитель группы разработчиков AGIMA

Резюмируя, можно сказать, что статья будет полезна не только для тех, кто занимается адаптивным веб-дизайном, но и для тех, кто раньше «боялся» или не хотел использовать относительные единицы измерения в CSS. Настало время отказываться от абсолютных единиц измерения, о чем уже намекает компания Apple со своими продуктами c Retina-экранами.

Оригинал: http://www.netmagazine.com/tutorials/build-responsive-site-week-typography-and-grids-part-2