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

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

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

Вступление

До этого дня многие посетители жаловались как в комментариях, так и мне лично на то, что данный блог попросту не влезает в их узкие экраны (появляется горизонтальная прокрутка, а фон справа не прогружается). Я знал об этом недостатке, но люблю экономить время на подобных вещах: свои сайты я верстаю для 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 страниц.

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

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

Ваш email:
Вы можете помочь развитию проекта, сделав всего 1 клик:
Спасибо!
Пожалуйста, прокомментируйте, как Вам моя статья?
Имя:
Комментарий:

Если Вы хотите вставить код, пожалуйста, заключайте его в [code][/code]

Подписаться на новые комментарии:

E-mail:


Защита от спама: у треугольника три...
Ответ:
Подписаться на новые комментарии без комментирования - Email:
Защита от спама: у треугольника три...
Ответ:

14.05.2014 05:41:30 Юрий Йосифович:
Спасибо за книгу, уже скачал, почитаю.
На счет адаптивного дизайна - у Вас на сайте ошибка. Читаю в масштабе 200%.
Появилась заметка о том, что адаптивная версия сайта активирована.
Основной навигацией по сайту использую строку после кнопки старт (навожу курсор на создание сайта, далее выбираю допустим CSS чтобы перейти в раздел и выбрать публикацию для чтения) - так вот в масштабе 200% (я так понимаю что в адаптивной версии сайта) меню ведет себя не корректно - при наведении курсора появляется второй уровень, но не задерживается, невозможно успеть нажать на необходимый пункт меню.

Для улучшения навигации по сайту в плавающий блок "Подписка" было бы полезно включить меню с расширенной навигацией (возможностью выбора хотя бы необходимого раздела статей, не говоря уже о конкретной публикации). Кстати блок этот плавающий блок также пропадает в масштабе 200%, при этом текст статьи не раздвигается на все пространство. Хорошо бы чтобы либо текст раздвигался по всей ширине, либо чтобы в пустом месте был блок (навигации или подписки), чтобы пустое место не раздражало...

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

Кстати, стрелка вверх также пропадает при масштабе, хотя должна находиться (мне так кажется) всегда в любом масштабе...
14.05.2014 05:42:55 Юрий Йосифович отвечает:
При масштабе 200% при попытке отправить комментарий перебросило на пустую белую страничку... Хорошо что при кнопке назад текст не пропал из поля, а то повторно набирать этот же комментарий было бы не совсем удобно...
14.05.2014 09:12:07 Сергей отвечает:
Добрый день. Масштаб не влияет на отправку комментариев, так как это серверная часть сайта. Видимо, произошла какая-то непридвиденная ошибка.
Стрелочку убрал специально, в большинстве современных браузеров для портативных устройств она встроена, только место будет занимать.

Меню исправил, спасибо.
14.05.2014 22:05:33 Юрий Йосифович отвечает:
Здравствуйте.
Осилил я сегодня книгу по адаптивному дизайну. Оказывается в книге больше воды, чем сути - возможно прочитав её Вы выбрали суть и она уместилась в Вашей публикации. Это значит, что вполне достаточно прочитать эту статью и не заморачиваться прочтением книги. Хотя, основные принципы понятны что адаптивный дизайн нужная вещь, и что делать его нужно - так как это шаг в будущее. Этим я и буду заниматься, когда пойму каким образом все вместить в Virtuemart шаблон - ведь нужно начинать с мобильной версии, которой по умолчанию там нет... Сложно все это, при чем без примера ещё и разбираться придется.

Что касается самой книги - написана она грамотно, при этом пытался повторить весь код, но увы, работоспособной версии адаптивного дизайна не получилось - автор решил убрать большущую часть создания дизайна и перейти именно к рассмотрению адаптивной версии. При этом все остальные примеры уже невозможно было повторить за неимением исходника. А ведь изучение заключается именно в повторении и получении результата... Либо может я просто не достаточно внимательно читал - очень уж хотелось её сегодня осилить и не откладывать в долгий ящик.

По поводу конкретно вашего дизайна - масштаб +200%, пишу этот комментарий, и вставляю почту для подписки. Ввожу "сел" справа налево - и... кнопка отправить скрылась из вида... Убрал галку о подписке (можно было уменьшить масштаб) чтобы иметь возможность отправить комментарий. По сути, наверное нужно чуть подшаманить и с этой кнопкой.

По поводу современных браузеров - у меня хром, устройство компьютер с расширением 1680*1050. Кнопка была бы очень кстати. Для разграничения области просмотра автор указанной Вами книги рекомендует разграничивать width и device-width чтобы определить нужно ли отображать елемент или не нужно. В данном случае, если расширение экрана девайса менее 768 (например) то не показывать кнопку, если больше - показывать. Имеется ввиду именно device-width а не просто width.

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

Это говорит еще и о том, что шрифт на моем 1680*1050 выглядит достаточно маленьким, а значит можно просто подключить @media для этого расширения увеличив шрифты хотя бы на 50% - более удобно будет пользоваться Вашим сайтом.

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

Приятного дня Сергей!
15.05.2014 09:06:00 Сергей отвечает:
Добрый день. Спасибо за комментарий.

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

У меня, кстати, тоже 1680*1050, отличная нестандартная пропорция :)

Шрифт на сайте крупнее других блогов, 18px, обычно все используют 16 или 14. Кстати если вы включите на Windows "Крупный шрифт", то на моём блоге шрифт тоже увеличится.

Делать адаптивный дизайн для VirtueMart, для этого блога или для любого другого сайта - никакой разницы нет. То есть отличий от этой статьи с VirtueMart никаких. Это же просто вёрстка, она не зависит от CMS.

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

Ответить на комментарий


17.05.2014 17:44:15 Malashac:
Спасибо большое за полезную информацию!

Ответить на комментарий


19.05.2014 21:28:51 Вадим:
Статья хорошая, все понятно... но есть вопрос, ответ на который нигде (в том числе и в этой статье) не могу найти: как быть с адаптацией сайта для мобильных устройств с блюшим и очень большим разрешением экрана? Например Sony Xperia Z с её 1080x1920, причем на ноутбуке я даже и приблизительно не могу сообразить как оно выглядит сейчас и что надо изменить, чтобы выглядело хорошо! Ответьте, пожалуйста, очень надо... Заранее благодарен!
20.05.2014 09:40:41 Сергей отвечает:
Здравствуйте. Конкретно с такой задачей не сталкивался. А что плохого, что у Sony Xperia Z разрешение 1080x1920? Адаптивный дизайн под любую ширину подстраивается (если это сделано), а высота роли не играет...

Если честно, не понял проблему.
17.12.2014 11:39:14 Артем отвечает:
Я так понимаю вопрос в том, как будет выглядеть сайт на разных устройствах, если:

а) разрешение на iPhone6 1334x750. При этом размер самого экрана 4,7"

б) в то же время на нетбуке разрешение 1366x768, а размер экрана 10,1".

На айфоне в landscape Ваш сайт располагается в одну колонку, а на нетбуке в две (скорее всего так). Хотя разрешения экранов практически одинаковые. Почему так происходит?
17.12.2014 16:12:52 Артем отвечает:
Ответ мой же вопрос:
Мобильные браузеры специально уменьшают разрешение. Браузерное разрешение еще называется CSS-разрешением и оно ниже где-то 1000 px.

https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/set-the-viewport?hl=ru
04.09.2015 15:46:53 Дмитрий отвечает:
Для того, чтобы видеть как будет выглядеть страница на разных устройствах можно воспользоваться режимом разработчика. В Google Chrome например нажав F12 и кликнув на маленький значок мобильного телефона. И там можно выбирать конкретные модели устройств и глядеть, как сайт на них отображается.

Ответить на комментарий


26.08.2014 12:22:49 Роман:
Мне понравилось, спасибо!

Ответить на комментарий


20.10.2014 10:54:55 Дмитрий:
Спасибо большое за статью, помогла разобраться с основами :)

Ответить на комментарий


10.11.2014 03:52:59 Андрей:
Отличная статья! спасибо!

Ответить на комментарий


22.11.2014 13:24:10 Стасоныч:
Отличная статья, спасибо.

Ответить на комментарий


10.12.2014 12:22:16 Аноним:
Сергей, добрый день! Подскажите, как Вы решили проблемы с адаптивными изображениями? Я имею ввиду то, что когда пользователи заходят с мобильных устройств, браузер все равно скачивает оригинальный размер картинки, хотя по факту, конечно, у них на экране изображение будет маленькое (адаптируется под дисплей).
Эта проблема очень актуальная в нынешних реалиях и способов ее решения довольно много, но все о которых я читал - не понравились. Склоняюсь пока что к буржуйскму скрипту adaptive image, но устанавливать пока что боюсь - не знаю, чую где-то подвох.
Что об этом думаете Вы?

Ответить на комментарий


26.12.2014 14:34:19 Дмитрий:
Добрый день.
Подскажите, а можно ли сделать адаптивными таблицы?
И второй вопрос, вытекающий частично из первого - можно ли сделать адаптивными изображения внутри таблиц? (изначально на сайте изображения настроены адаптивно, как у Вас в примере, но в таблицах их адаптивность пропадает, вероятно из-за того, что таблица не адаптивна.
Спасибо.
26.12.2014 22:24:25 Сергей отвечает:
Добрый вечер. Что вы подразумеваете под адаптивной таблицей? Таблица сама по себе имеет резиновые свойства, а по поводу изображений, то не было такой нужды, поэтому подсказать, к сожалению, не могу.

Ответить на комментарий


09.02.2015 15:58:03 Сергей:
Спасибо за статью! Очень вовремя :)

Ответить на комментарий


18.04.2015 17:54:20 Елена:
Спасибо за полезную инфу, буду пробовать. Гугл письма шлет, что сайт не адаптирован под мобильные устройства. Надо разбираться.
18.04.2015 17:57:01 Сергей отвечает:
Да, благодаря этой статье, мой сайт проходит все правила Гугл на этот счёт. Проверять можно здесь: https://www.google.com/webmasters/tools/mobile-friendly/?hl=ru

Ответить на комментарий


23.06.2015 13:55:03 Павел:
Спасибо за полезную информацию, никогда не делал, так что буду пробовать)
23.06.2015 18:38:47 Сергей отвечает:
Мне следует дополнить, что сейчас все использует фреймворк, который делают всю работу по созданию адаптивной верстки за вас - Bootstrap 3.

Поэтому способ указанный в статье на этой странице можно считать устаревшим, тем не менее полностью рабочим. Из минусов использования bootstrap могу сказать, что, возможно, его будет сложно кастомизировать.
20.08.2015 10:02:35 Андрей отвечает:
Нет ни чего проще, чем кастомизировать бутстрап. Назначаешь любому элементу свой класс class="my-menu col-md-12" и прописываешь ему любые стили, они перекроют бутстраповские.

Ответить на комментарий


13.05.2016 15:48:15 Антон:
Статья фактически более краткое изложение книги Маркотта, у меня есть вопрос по адаптации изображений.
Я практически везде изображения задаю через CSS background-image, соответственно у меня под них просто пустые дивы в разметке.
К чему в этом случае применять max-width:100%?
и еще вопрос не по теме, но ответа не нашел, в стандартных атрибутах тега img есть title и alt. Как их можно реализовать, если я все еще ставлю изображения свойством бекграунд?
заранее спасибо
13.05.2016 16:29:17 Антон отвечает:
со вторым вопросом разобрался, где нужно использовать img, а где background. я новичок, многого не знаю.))

Ответить на комментарий


27.06.2016 17:54:25 Валерий:
Спасибо за работу. всё доходчиво и ясно. Удачи вам!

Ответить на комментарий


15.07.2016 10:31:58 Петр:
Здравствуйте! Спасибо за доступную подачу материала!Появилась задача сделать шаблон сайта резиновым. В шаблоне присутствует левый сайдбар. Основная область страницы реализована таким образом:
<table>
<tr>
<td>
<div class="sidebar">
</td>
<td>
<div class="content">
</td>
</tr>
</table>
Вопрос: как мне перенести сайдбар ниже области контента при уменьшении экрана? Понимаю, как убрать его с помощью медиазапроса @media (max-width:ХХХ){div.sidebar {display:none;}}. Но как сделать так, чтобы пользователь мог его видеть после контента?
17.07.2016 15:55:11 Сергей отвечает:
У Вас польностью не правильная верстка. Тегов table, tr, td - вообще быть не должно в каркасе сайта, таблицы используются только если вам реально нужна таблица (например, со статистикой) уже внутри основного контента.

Когда исправите верстку, сайдбар должен быть в коде ниже основного контента, а затем для обеих колонок ставите .sidebar,.content{float:none;display:block;}
18.07.2016 13:00:37 Петр отвечает:
Да понял, уже переверстываю. Сайт давно делался какой-то вэб-студией. Думал, что можно как-то обойтись без переверстки.

Ответить на комментарий


21.12.2016 13:02:55 Храм Пути:
Спасибо. Очень занятная статья, уже 3 раза прочитал. Пытаюсь настроиться на переделку сайта в этом плане... Ещё пару раз прочитаю и начну :)

Ответить на комментарий


03.01.2017 19:56:33 Влад:
Понравился адаптивный дизайн Вашего сайта, понравился код. С моей точки зрения - очень продуманный подход к построению сайта. И спасибо за интересные статьи.
Также считаю хостинг Украина лучшим из тех, которыми пользовался (пробовал пару зарубежных - ни в какое сравнение не идут).
Удачи Вам в 2017, мира в родном крае (я тоже вынужден был перевезти семью оттуда) и успехов.
03.01.2017 20:18:06 Сергей отвечает:
Спасибо большое за Ваш комментарий. Вам тоже желаю успехов в Новом году!

По поводу зарубежных хостингов, я только AWS (https://aws.amazon.com/ru/) использую.

Ответить на комментарий


19.03.2017 08:53:00 Андрей:
Начинаю изучать веб программирование, спасибо за информацию.

Ответить на комментарий


10.07.2017 08:44:17 Анастасия:
То что нужно.
Коасс
21.08.2017 11:28:39 Владимир отвечает:
Сколько я в свое время сам пытался сделать адаптивную верстку. А все почему, ну думаю интернет есть, зачем кому то платить.Разберусь, почитаю и слеплю что-нибудь. В итоге потерял время, а время это деньги. С тех пор кое-что конечно делаю сам, а какие-то работы передаю делать компаниям. Вот и тут так получилось Заказал адаптивный дизайн здесь http://www.mobile-version.ru Нужно было, чтобы картинки на сайте, видео все было грамотно расставлено, а главное не заезжало за края. Чтобы посетитель не искал лупу для просмотра страниц. Особенно замучился я с шапкой, менял, менял размеры картинки, в итоге в качестве изображение теряло четкость. Снизу текст заползал на саму картинку, короче кошмар и ужас!! И видео не помещалось из-за этих вставок iframe. Что-то не так убрал, нарушил код. А здесь сделали быстро, всего то пару дней и вуаля. Удобно смотреть с мобильного, с планшета. Текст четкий, пункты меню удобно расположены. Не нужно отдельный элемент увеличивать или переходить на горизонтальный скролинг. Ценник более чем адекватный, я бы даже сказал ниже. Говорю по опыту, т.к. в других компаниях где делал продвижение предлагали только аудит сайт за космическую стоимость.

Ответить на комментарий


26.08.2017 13:48:44 Владимир:
Ваша статья устарела!

Ответить на комментарий


21.09.2017 22:26:51 Семен:
У меня это img{max-width:100%;height:auto;} с заполненными размеры изображений в атрибутах, показывает картинку полную 256х256, а не height="16".
Заменил на img{max-width:100%;}, как с не заполненными атрибутами, теперь нормально. У меня что-то всё на оборот.

Ответить на комментарий


11.07.2018 15:25:38 Ирина:
Спасибо!

Ответить на комментарий


06.07.2019 19:44:58 Степан:
Благодарю за статью, а особенно за первоисточник, видно что статья по книге написана) Книга отличнейшая) Буду браться за "Сначала мобильные")

Ответить на комментарий


22.11.2020 03:16:40 Вадим:
Спасибо за статью. Отличная статья Все просто и ясно. Ещё раз Огромное вам спасибо

Ответить на комментарий

Использую для работы
Мои расширения
Свежие статьи
Рекомендую
Горячо обсуждаемые
Подписка
  • Следовать в twitter:
  • Подписаться по RSS:
  • Подписаться по E-mail:
  • Следить ВКонтакте:
  • Следить на Facebook:
Пользовательское соглашение об условиях использования сайта и Политика конфиденциальности
Перепечатывание или копирование материалов сайта (текста, изображений и другого содержимого) для их публичного или коммерческого использования в сети Интернет, либо в печатных изданиях строго запрещены. При нарушении данного правила, с нашей стороны будут предприняты соответствующие меры, вплоть до судебной жалобы.
© site-on.net
Шрифт: +стандартно-