8

Вот несколько моментов, которые вы должны понять:

• Типографика основывается на структуре и общем представлении контента. Вы должны

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

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

• Высота, размер текста должны корректироваться относительно пропорций экрана. Здесь

полезно использовать относительные единицы измерения (ems и rems).

• Если ваш текст соотносится с размером экрана, вы получите естественный и аутентичный

дизайн. Адаптивная типографика, как правило, подкрепляет эту аутентичность.

Используйте адаптивную типографику, проведите тщательный анализ поведения пользователей.

Спросите у тебя, какой сайт вы хотите. Как должен быть размещен контент. Ответы на эти вопросы

определят контрольные точки и размер текстов. Используйте rems для определения размера

текста по отношению к области просмотра.

Раньше мы рассматривали типографику как набор фиксированных решений,

однако теперь мы понимаем ее как составляющую часть пропорциональной логики.

Несколько хороших туториалов по адаптивной типографике:

Основы адаптивной веб-типографики

Подробное руководство по основам типографики

Хинтинг шрифтов. Что это такое и с чем его едят

Гибкие изображения

Когда дело доходит до использования изображений в веб-дизайне, мы должны помнить о

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

Каждая JPEG или GIF картинка, как правило, является довольно объемным файлом. Кроме того, вам стоить помнить о скорости загрузки, которая не должна превышать 5 секунд.

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

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

начальном этапе.

9

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

Существует несколько решений:

1. max-width: 100%;

2. srcset

3. <picture>

4. Adaptive images от Мэтта Вилкокса

max-width: 100%;

Вышеприведенный код CSS адаптивного изображения работает на IE7 и IE9, но не работает на IE8.

Дополнительно можно применить CSS специально под IE8 или использовать IE-хак ниже: srcset

Атрибут srcset позволяет добавлять другие версии изображения, устанавливать ширину, что

позволит картинкам корректно отображаться на пользовательских экранах.

<img src=”/img_articles/22532/whatever-small.jpg” srcset=”whatever-medium.jpg 1000w, whatever-large.jpg 2000w” alt=”whatever”>

10

<picture>

<picture> - это полноценный элемент со своим собственным тегом и всем остальным.

Читать больше:

Адаптивные изображения в CSS