Уроки адаптивной верстки

Теория адаптивной верстки

Адаптивная верстка сайта

Теоретическая часть

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

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

Термин адаптивный веб-дизайн был придуман Итаном Маркоттом. Итан объеденил три существующие методики (макет гибкой сетки, гибкие изображения и медиазапросы) в единый подход и назвал его адаптивным веб-дизайном.

Результат адаптивного дизайна – адаптивные сайты, которыми удобно пользоваться независимо от того, на каком устройстве они просматриваются. Сегодня эта концепция – не прихоть, а важный тренд развития Сети. И речь идет не просто о «тянущемся» сайте, а о его «умном» приспособлении к любому устройству. Пользователю, который использует большой монитор, необходимо несколько колонок текста. Тому же, кто зашел на сайт с мобильного телефона – лишь тот контент, который нужен ему в дороге.

Рисунок 2 – Внешний вид сайта web-grafika.pro на экранах с разным разрешением

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

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

Также не стоит упускать тот факт, что мобильные пользователи намного активнее своих «стационарных» коллег: они больше времени проводят онлайн и готовы вступать в живую коммуникацию с сайтами. Странно не замечать очевидного – будущее за мобильными устройствами. Для электронных коммерсантов игнорировать этот тренд, по меньшей мере, беспечно.

Приемы адаптивной верстки

Гибкий «резиновый» макет

Для создания адаптивного веб-дизайна необходимы три составляющие: гибкий макет, гибкие изображения и медиазапросы.

Окно браузера может принимать любые форму и размеры в соответствии с прихотями пользователя или размерами устройств. Содержимое страниц должно быть гибким, поэтому необходим «резиновый» макет.

Для того чтобы было проще сделать «резиновый» макет, необходимо пиксельные показатели фиксированной ширины преобразовать в пропорциональные процентные значения. Ширина элемента в пикселах делится на ширину главного контейнера.

Пример: 940px/960px=0.9791666=97.91666%

Ширину главного контейнера тоже необходимо перевести в проценты, обычно это 100%.

В коде ниже показаны процентные значения главного контейнера, шапки и основного блока.

#conteiner {
margin-right: auto;
margin-left: auto;
width: 100%; /*удерживание самого дальнего элемента div*/
max-width: 1200px; /*макс. ширина в пикс.*/
min-width: 280px; /*мин. ширина в пикс.*/
}

header {
width: 100%; /*Ширина в % */
height: 100%;/*Высота в %*/
}

aside {
width: 29.16666%; /*Основной блок имеет ширину 350px/1200*/
}

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

Все настольные современные браузеры используют 16px в качестве размера шрифта по умолчанию (если только другое значение не будет задано явным образом). Следовательно, изначальное применение любого из приведенных далее правил к тегу <body> обеспечит одинаковый результат:

font-size: 100%;
font-size: 16px;
font-size: 1em;

Например:

font-size: 3em; /*48px/16*/
font-size: 0.75em; /*12px/16*/

1em=16px, em определяет соотношение ширины/высоты конкретной буквы и размера конкретного шрифта в пунктах.

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

Заставить изображения масштабироваться пропорционально «резиновому» дизайну для современных браузеров не составляет особого труда. Для этого нужно лишь объявить в CSS следующее:

img {max-width: 100%;}

В результате все изображения будут масштабироваться вплоть до 100% ширины их элемента-контейнера.

Пример:

img {max-width: 45%;}

Более того, аналогичный атрибут и свойство могут быть применены к другим мультимедиа. Например:

img.object.video.embed {max-width: 100%;}

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

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

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

В CSS-коде ниже показано как меняется цвет фона страницы при различных размерах окна браузера.

body {background-color: grey;} /*Основной фон страницы серый*/

@media screen and (max-width: 960px) {
body { background-color: red;}
}/*При максимальной ширине 960px цвет меняется на красный*/

@media screen and (max-width: 768px) {
body { background-color: orange;}
}/*При ширине 768px цвет меняется на оранжевый*/

@media screen and (max-width: 550px) {
body { background-color: yellow;}
}/*При ширине 550px цвет меняется на желтый*/

@media screen and (max-width: 320px) {
body { background-color: green;}
}/*При ширине 320px цвет меняется на зеленый*/

Можно задавать тип устройства в атрибуте media тега <link>. Для этого необходимо указать ссылку в тегах <head> в HTML-коде:

В данном коде используется устройство с экраном (screen).

Можно задать ориентацию экрана устройства:

В данном коде выражение медиазапроса сначала спрашивает о типе устройства (с экраном), а затем – о характеристике (в книжной ориентации). Таблица стилей portrait-screen.css станет загружаться, если речь будет идти о любом устройстве с экраном в книжной ориентации.

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

В данном коде мы указали значение initial-scale 1.0, в результате чего мобильный браузер будет обрабатывать страницу, придавая ей размер равной 100% от величины своей области просмотра.

В медиазапросы включают стили, которые изменяются при определенных размерах экрана. Те стили, которые не изменяются не указывают:

@media screen and (max-width: 320px) {
body { background-color: green;}
aside {font-size: 0.8em;
font-family: Verdana, Helvetica, "Lucida Grande", sans-serif;}
}

Использование фреймворков

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

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

На сегодняшний день существует множество таких фреймворков:

Bootstrap
Skeleton
Foundation
Semantic UI
и другие.

Для освоения адаптивной верстки мы будем знакомиться с фреймворком Bootstrap (http://getbootstrap.ru)

Перейти к уроку 1 по изучению сетки Bootstrap