Несколько хороших туториалов по адаптивной типографике:
Основы адаптивной веб-типографики
Подробное руководство по основам типографики
Хинтинг шрифтов. Что это такое и с чем его едят
Гибкие изображения
Когда дело доходит до использования изображений в веб-дизайне, мы должны помнить о
пользователях, которые используют для посещения интернет-страниц мобильные устройства.
Каждая 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
5 трюков CSS для адаптивных шаблонов
Выбор правильного формата
Существует несколько форматов, которые вы можете использовать. Однако даже опытные веб-
дизайнеры чаще всего затрудняются ответить, какой из форматов изображений лучше всего
подходит для работы JPG, SVG, GIF или PNG.
JPG или JPEG
Формат JPEG был придуман в начале 90-х г.г. Тогда это был идеальный формат, однако на
сегодняшний день можно сказать о том, что JPG использует сжатие с потерями и качество
изображения значительно ухудшается.
Однако сжатие JPG считается идеальным для фотографий. Этому есть две причины. Во-первых, на
сложных изображениях сжатие выглядит естественно. Во-вторых, детализированные фото, но без
резких переходов цвета и яркости выглядят при сжатии довольно качественно.
SVG
Формат SVG был придуман в 2001 году как стандарт W3C. Это формат векторного изображения
на основе XML, который поддерживает интерактивность и анимацию. SVG картинки прекрасно
индексируются и сжимаются. В качестве файлов XML SVG изображения можно создавать и
редактировать в графических редакторах.
Векторный формат SVG лучше всего использовать для иконок, логотипов и иллюстраций.
Несколько хороших руководств по SVG:
SVG в вебе. Практическое руководство
Что дизайнеру нужно знать о SVG: за и против
11
PNG
PNG как стандарт появился в 2004 году, он является на сегодняшний день широко используемым
форматом сжатия изображений без потери качества. Это означает, что детали картинки не
искажаются и выглядят привлекательно при неизменном размере самого файла. В свою очередь, это говорит о том, что таким изображениям необходимо больше времени на загрузку. Но при этом