Уроки по созданию адаптивного дизайна


Заметка: активирована адаптивная версия сайта, которая автоматически подстраивается под небольшой размер Вашего браузера и скрывает некоторые детали сайта для удобства чтения. Приятного просмотра!

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 разных понятия, а просто трудности перевода, несмотря на это в Сети вы найдёте много споров на данную тему.

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

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

книжная ориентация планшета

альбомная ориентация планшета

Как стало:

книжная ориентация планшета

альбомная ориентация планшета

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

альбомная ориентация смартфона

книжная ориентация смартфона

Как стало:

альбомная ориентация смартфона

книжная ориентация смартфона

Ещё раз подчёркиваю, что разница видна не только на портативных устройствах, но и на любых других устройствах с относительно узким разрешением дисплея. Например, у меня в зале стоит второй стационарный компьютер с трубчатым монитором и разрешением 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 страниц.

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

С уважением, Сергей Рудь.

<< Предыдущая статья

Пожалуйста, оцените эту статью
Средняя оценка: 4.79 из 5 (проголосовало: 573)
Статья оказалась вам полезной? Подпишитесь, чтобы не пропустить новые!


Ваш email:

Вы можете помочь развитию проекта, сделав всего 1 клик:
Спасибо!
Источник: http://site-on.net/create/html/7-responsive



Рекомендуем посмотреть ещё:


Закрыть ... [X]

20 CSS-уроков для адаптивного веб-дизайна - Дежурка Что одеть в сирию


Уроки по созданию адаптивного дизайна Уроки по созданию адаптивного дизайна Уроки по созданию адаптивного дизайна Уроки по созданию адаптивного дизайна Уроки по созданию адаптивного дизайна Уроки по созданию адаптивного дизайна Уроки по созданию адаптивного дизайна