- Адаптивная или мультимедийная верстка
Адаптивная верстка — подход, предполагающий изменение дизайна в зависимости от поведения пользователя, размера экрана, платформы и ориентации девайса. Другими словами, страница должна автоматически подстраиваться под разрешение, изменять размер картинок и т.д. Это позволит устранить нужду в разработке дизайна для каждого нового устройства, появляющегося в продаже.
Регулировка разрешения экрана
Можно разбить устройства на разные категории и верстать для каждой из них отдельно, но это займет слишком много времени, и кто знает, какие стандарты будут через пять лет? Тем более, согласно статистике, основанной на 400 проданных с 2005 по 2008 год устройствах (а сейчас 2016), мы имеем целых спектр разнообразных устройств:
Очевидно,что мы не сможем продолжать верстать для каждого устройства отдельно. Но что тогда делать?
Частичное решение: делаем всё гибким
Конечно, это не идеальное решение, но оно решает большую часть проблем.
В своей статье Итан Маркотт (Ethan Marcotte) создал простой шаблон, демонстрирующий использование гибкой вёрстки:
Весь дизайн — микс адаптивных слоев, картинок и в некоторых местах умной разметки. Создание адаптивных слоев — частая практика, что нельзя сказать об адаптивных картинках. Поэтому ниже представлены техники для реализации гибких картинок:
· Hiding and Revealing Portions of Images;
· Creating Sliding Composite Images;
· Foreground Images That Scale With the Layout.
Для более детальной информации рекомендуем ознакомиться с книгой Зои Микли Гилленуотер (Zoe Mickley Gillenwater) «Flexible Web Design: Creating Liquid Layouts with CSS» и загрузить главу «Creating Flexible Images».
С первого взгляда может показаться, что все легко, но это не так. Взгляните на логотип:
Если сделать разрешение слишком маленьким, может показаться, что четкость картинки упала, но это необходимо для того, чтобы сохранить пропорции названия. Поэтому картинка поделена на две части: первая часть (иллюстрация) используется как фон, вторая (логотип) изменяет свои размеры пропорционально.
1 2 3 |
<h1 id="logo"> <a href="#"><img src="site/logo.png" alt="The Baker Street Inquirer"/></a> </h1> |
Элемент h1
содержит изображение в качестве фона, и картинка выровнена согласно фону контейнера (заголовка).
Гибкие изображения
Одна из самых главных проблем, которая нуждается в решении при работе с адаптивным дизайном — это работа с картинками. Существует много способов изменять размер изображений, и большинство из них реализуется очень просто. Одним из таких примеров является использование max-width в CSS:
1 |
img {max-width: 100%;} |
Максимальная ширина изображения равняется 100% от ширины экрана или окна браузера, и, когда ширина уменьшается, то же делает и картинка. Заметьте, что max-width
не поддерживается в IE, поэтому используйте width: 100%
.
Представленный способ является отличным началом в создании адаптивных изображений, но разрешение и время загрузки должны оставаться приоритетными.
Ещё один способ: отзывчивые изображения
Техника, представленная Filament Group, не только изменяет размер изображений в соответствии с пропорциями, но и сжимает разрешение картинок на маленьких экранах, чтобы на больших они не занимали дополнительного места.
Для использования данной техники требуется несколько файлов, все они доступны на Github. Сначала берём JavaScript-файл (rwd-images.js), файл .htaccess и rwd.gif (файл изображения). Потом используем немного HTML, чтобы связать большие и маленькие разрешения: сначала маленькое изображение с префиксом .r (для обозначения того, что картинка должна быть адаптивной), потом отсылка к большему изображению, используя data-fullsrc
:
1 |
<img src="smallRes.jpg" data-fullsrc="largeRes.jpg"> |
Для любого экрана шире 480 пикселей загрузится изображение с большим разрешением (largeRes.jpg); маленьким экранам не понадобится загружать большое изображение, загрузится маленькое (smallRes.jpg).
Интересная фича для iPhone
Есть одна интересная вещь, касающаяся iPhone и iPod. Дизайн, созданный для больших экранов, просто сожмется для маленького браузера, без необходимости добавления скролла или дополнительной мобильной верстки. Однако изображений и текста не будет видно:
Для решения данной проблемы воспользуемся тегом meta
:
1 |
<meta name="viewport" content="width=device-width; initial-scale=1.0"> |
Если initial-scale
равно единице, ширина картинок становится равной ширине экрана.