Как сделать сайт адаптивным: полезные советы - "TemplateMonster"

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

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

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

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

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

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

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

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

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

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

Каждая 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 году, он является на сегодняшний день широко используемым

форматом сжатия изображений без потери качества. Это означает, что детали картинки не

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

PNG также обладает замечательной способностью быть прозрачным, потому он отлично подходит

для иконок и всего, что требует прозрачности.

GIF

GIF формат существует с 1987 года. Если вам нужна простая анимация, GIF поможет. Формат

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

простых изображений и в JPG - для сложных.

Медиа-запросы

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

должны применяться свои правила.

Медиа-запросы - это команды CSS, влияющие на другие CSS селекторы, которые вступают в силу

при определенных условиях. Простыми словами - мультимедийный запрос говорит браузеру

применить 1-10 правила при ширине экрана до 700 пикселей, а другой запрос указывает браузеру

обратить внимание на правила 11-20, когда экран имеет ширину 701 пиксель и больше.

Медиа-запросы всегда начинаются с “@media”, браузеры умеют читать правила, которые

перечислены между фигурными скобками {}. Наиболее популярные условия, отображаемые медиа-

запросами - максимальная и минимальная ширина, однако можно использовать и другие свойства.

Изучение Медиа-запросов требует отдельной книги, ниже несколько ссылок по тематике:

CSS - Медиа запросы (media queries)

Стандартные @media для всех пользовательских устройств

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

адаптивный веб-дизайн: mediaqueri.es