Пошаговое руководство по созданию адаптивного дизайна

"Все аспекты самостоятельного создания и продвижения сайтов
от практика с многолетним опытом." — блог Рудь Сергея
info@site-on.net

12.02.2014

Раздел: Создание сайта / HTML + CSS

Здравствуйте! Мир не стоит на месте, а вместе с ним не должны отставать и мы. Процент посетителей с портативных устройств растет в геометрической прогрессии, в связи с этой тенденцией и будет написана эта статья.

Вступление

До этого дня многие посетители жаловались как в комментариях, так и мне лично на то, что данный блог попросту не влезает в их узкие экраны (появляется горизонтальная прокрутка, а фон справа не прогружается). Я знал об этом недостатке, но люблю экономить время на подобных вещах: свои сайты я верстаю для IE9 и выше, не создаю мобильных версий и тд. (экономия личного времени и кода). Однако я и сам часто использую смартфон в качестве настольной книги по своей профессии: читаю стоя в общественном транспорте, на диване (ноутбука у меня нет) и тд. В общем, я постепенно пришёл к выводу, что такую важную деталь, как удобство чтения на различных устройствах больше нельзя игнорировать ни на одном из сайтов.

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

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

Чтобы нам не приходилось классифицировать устройства на типы и создавать отдельный сайт для смартфонов (m.site-on.net, mobile.site-on.net или site-on.net/mobile/), отдельный сайт для планшетов, отдельный сайт для мультиварки с выходом в Интернет и тд. - был придуман адаптивный дизайн (синонимы: адаптивная вёрстка, макет).

Смысл адаптивного макета в том, что сайт динамически (в режиме реального времени) подстраивается под размер вашего устройства, и если размер дисплея вдруг расширится / сузится (как при ресайзе браузера или смене ориентации планшета), то и сайт на это отреагирует незамедлительно, без перезагрузок и задержек.

В итоге мы получаем одну единственную версию сайта (site-on.net), которая великолепно отображается на любых устройствах и экранах, учитывая их особенности.

На создание адаптивного макета этого блога (из фиксированного) у меня ушла вся прошлая суббота: с 9:00 утра до полуночи с перерывами на отдых.

Это занятие показалось мне слегка нудным, но желание насладиться конечным результатом не давало угаснуть энтузиазму.

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

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

Когда я начинал интересоваться адаптивной вёрсткой, я не смог найти хорошей инструкции к действию в Сети. По какой-то причине все статьи на эту тему не внушали мне доверия, поэтому единственным выходом для меня было прочесть всё из первоисточника – из книги Итана Маркотта «Отзывчивый веб-дизайн», оригинал книги находится по адресу:http://www.abookapart.com/products/responsive-web-design

Кстати, прочитав русскоязычный вариант книги, для себя я сделал вывод, что «адаптивный» и «отзывчивый» – это не 2 разных понятия, а просто трудности перевода, несмотря на это в Сети вы найдёте много споров на данную тему.

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

Сравните вид на планшетах, как было (разрешение 1280*800):

Как стало:

На смартфоне, как было (разрешение 320*480):

Как стало:

Ещё раз подчёркиваю, что разница видна не только на портативных устройствах, но и на любых других устройствах с относительно узким разрешением дисплея. Например, у меня в зале стоит второй стационарный компьютер с трубчатым монитором и разрешением 1024 на 768 пикселей, так вот если раньше мой блог не помещался в него по ширине и смотрелся ужасно, то теперь складывается впечатление, будто блог создавали специально под этот старый монитор.

Начнём

Адаптивный дизайн состоит из трёх главных принципов:

Резиновый макет
Резиновые изображения
Медиазапросы

1. Гибкий макет

Для создания гибкого макета мы должны использовать только относительные единицы измерения:em для размера шрифтов и % для размеров элементов. В редком использовании px тоже нет ничего плохого, но лучше свести их использование к минимуму.

Раньше ширина этого блога была фиксированной и равнялась 1080px, вместо этого нам нужно взять какое-то более гибкое значение, например 90% окна браузера. При этом я решил, что сайт все равно не должен быть слишком широким, и поэтому сразу же ограничил его ширину до моих любимых 1080px, в итоге было:

h1,#logo,#width,#slogan,#h ul{width:1080px;margin-left:auto;margin-right:auto}

Стало:

h1,#logo,#width,#slogan,#h ul{width:90%;max-width:1080px;margin-left:auto;margin-right:auto}

Почему именно 90%? Просто мне так захотелось, я решил, что отступы по 5% справа и слева будут самое то. Можно было поставить 99% или 80%, всё зависит от вашей задумки.

Идём далее, у меня есть 2 колонки: основная колонка (та, где вы сейчас находитесь глазами) и правая колонка. Их ширина равнялась 780px и 280 px, но теперь мы должны пересчитать её в процентах, и вот вам формула на все случаи жизни:

target / context = result

или если говорить упрощенно и по-русски, то:

Ширину (размер шрифта) нужного элемента в px разделить на ширину (размер шрифта) родительского элемента в px = искомый результат в % (или em).

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

Итак, основная колонка в фиксированном варианте равна 780 px, её контекст (родитель) в фиксированном варианте имеет ширину 1080px, в итоге:

780 / 1080 = 0.72222222222

Так как нам нужны проценты, а не em, то результат нужно умножить на 100, в итоге получаем:

72.222222222%

Вы, наверное, надеялись, что я округлю это число? Но нет, в книге этого категорически не рекомендуют. Поэтому смотрите по ситуации, насколько важна в вашем случае точность. В случае двух колонок такая точность совершенно не важна, поэтому я со спокойной душой решил округлять всё до 4 знаков после точки. В итоге вот мой CSS для основной колонки:

#c{float:left;width:72.2222%;} /* 780 / 1080 */

Обратите внимание, рекомендуется оставлять комментарии с расчётами, иначе вы забудете и запутаетесь что на что делить в дальнейшем. Лично я люблю оставлять в комментариях только первое число - делитель.

Проделываем тоже самое с правой колонкой:

#r{float:right;width:25.9259%;color:#000} /* 280/1080 */

Надеюсь, суть ясна, теперь перейдём к размерам шрифта, который рассчитывается точно также.

По умолчанию десктопные браузеры выставляют размер шрифта 16px, но нам пиксели не желательны, поэтому если вы хотите оставить это же значение нужно:

16 (нужное значение) / 16(значение по умолчанию) = 1 em

Но я считаю шрифт в 16 пикселей слишком мелким, я предпочитаю 18, поэтому:

18 / 16 = 1.125 em

Пишем в CSS:

body{font-family:"Times New Roman";font-size:1.125em;}

Размер шрифта моего логотипа «Site on!» в фиксированном макете составляет 40px, переведём его в em:

40/18=2.2222em

Вы обратили внимание? Теперь мы делим не на 16px, а на 18px, так как у родителя (у тега body) моего логотипа размер 18px, в итоге CSS:

body{font-family:"Times New Roman";font-size:1.125em;} /* 18px */
#logo a{text-decoration:none;font-size:2.2222em;color:#000} /* 40px */

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

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

Буду краток: если вы не указываете размеры изображений в атрибутах тега img, то добавляем в ваш CSS:

img{max-width:100%;}

А если указываете размеры изображений в атрибутах (я указываю и вам советую):

img{max-width:100%;height:auto;}

Готово!

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

Очень интересная, простая и вместе с этим чрезвычайно полезная вещь - @media. Но давайте сразу о кроссбраузерности… Хорошая новость заключается в том, что большинство современных браузеров поддерживают медиазапросы: среди них Opera 9.5+, Firefox 3.5+, браузеры на базе WebKit, такие как Safari 3+ и Chrome, а также IE 9+.

Да и с мобильными браузерами дела обстоят неплохо. Медиазапросы поддерживают такие браузеры на базе WebKit, как Mobile Safari, webOS производства HP и Android, а также Opera Mobile и Opera Mini. Что касается Windows Phone, с 2011 года на них устанавливается IE9+, который обеспечивает полную поддержку медиазапросов, что не может не радовать.

Старые версии браузеров, включая IE8 и ниже, тоже не проблема. Существуют специальные JavaScript библиотеки, призванные обеспечить 100% кроссбраузерность начиная с IE5, например, css3-mediaqueries.js или respond.js.

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

Вот основное применение медиазапросов в нашем адаптивном случае:

@media (max-width:1150px){
CSS код
}

Например:

@media (max-width:1150px){
img{max-width:100%;height:auto;}
#subs form{background:none;}
}

Это можно читать так: если размер экрана равен или меньше 1150px, то применить вложенные правила. Этот код вставляется в любое место обычного .css файла, как и любой другой CSS код.

Что происходит в примере выше? Если экран посетителя равен или меньше 1150px, то сделаем изображения гибкими и уберём фон с заданного элемента.

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

Благодаря таким медиазапросам, которые мне напоминают конструкцию if (условие) {выполнить}из PHP или других языков программирования, мы перестраиваем стили сайта в зависимости от размеров экрана как нам вздумается.

Вот как построены медиазапросы на данном блоге для обеспечения полной адаптивности:

@media (max-width:1170px){
    img{max-width:100%;height:auto;}
    #menu>li{font-size:22px;}
    #menu>li>a{background:none;padding-left:20px;}
    #subs form{background:none;}
}
@media (max-width:990px){
    #gwNotice{display:block;background:orange;border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;-webkit-border-radius:5px;padding:5px;}
    h1{margin:30px auto;font-size:30px;}
    #slogan{display:none;}
    #width{width:98%;}
    #up{display:none;}
    table.gsc-search-box{position:absolute;top:82px;left:0;height:30px;width:275px !important;}
    .gsc-input-box{width:200px;}
    #h ul{text-align:center;background:url(/images/footer.png);width:100%;}
}
@media (max-width:900px){
    #menu>li{font-size:20px;}
    #r{font-size:14px;}
}
@media (max-width:820px){
    #menu{text-align:center;padding-top:3px;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
    #menu>li:first-child{display:none;}
    #menu>li{display:block;margin-top:10px;}
    #menu>li>a{padding:0;display:block;}
    #hidden{display:none!important;}
}
@media (max-width:680px){
    #menu>li{display:block;}
    #c{width:100%;}
    #r{display:none;}
}
@media (max-width:506px){
    table.gsc-search-box{top:108px;}
}
@media (max-height:650px){
    #p{position:static !important;}
}

То есть в медиазапросах всё индивидуально, вы вписываете туда те изменения, которые нужны для конкретного сайта при определённом размере браузера. Для наглядности вы можете менять размер вашего дектопного браузера (ресайзить) и следить за постепенным применением стилей, описанных выше. Именно так и работают медиазапросы.

Заключение

Хочу отметить, что один из современных подходов к адаптивному дизайну заключается в том, чтобы сначала разрабатывать макет под самые мелкие дисплеи (концепция «Сначала мобильные»), а только потом, по мере увеличения размеров дисплея подгружать элементы на веб-страницу (прогрессивное улучшение) с помощью JavaScript. Смысл в том, чтобы не заставлять пользователей с телефонов загружать лишние данные, которые они всё равно не увидят, замедляя тем самым загрузку страниц.

Если материалов данной статьи вам недостаточно или что-то не понятно, то рекомендую к прочтению упомянутую в начале статьи книгу Итана Маркотта, в оригинале она насчитывает всего около 170 страниц.

Спасибо всем за внимание и успехов в создании адаптивных сайтов!