Как сделать HTML страницу адаптивной?

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

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

Вступление

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

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

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

Еще по теме:   Как создать гиперссылку в HTML?

target / context = result

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

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

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

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

780 / 1080 = 0.72222222222

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

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

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

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

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

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

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

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

18 / 16 = 1.125 em

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

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

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

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

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

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

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.

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

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

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

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

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

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

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

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

Заключение

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

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

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

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

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

Еще по теме:   Как вставить картинку в html по центру

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

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

Кстати, стрелка вверх также пропадает при масштабе, хотя должна находиться (мне так кажется) всегда в любом масштабе.

Добрый день. Масштаб не влияет на отправку комментариев, так как это серверная часть сайта. Видимо, произошла какая-то непридвиденная ошибка.
Стрелочку убрал специально, в большинстве современных браузеров для портативных устройств она встроена, только место будет занимать.

Меню исправил, спасибо.

Здравствуйте.
Осилил я сегодня книгу по адаптивному дизайну. Оказывается в книге больше воды, чем сути — возможно прочитав её Вы выбрали суть и она уместилась в Вашей публикации. Это значит, что вполне достаточно прочитать эту статью и не заморачиваться прочтением книги. Хотя, основные принципы понятны что адаптивный дизайн нужная вещь, и что делать его нужно — так как это шаг в будущее. Этим я и буду заниматься, когда пойму каким образом все вместить в Virtuemart шаблон — ведь нужно начинать с мобильной версии, которой по умолчанию там нет. Сложно все это, при чем без примера ещё и разбираться придется.

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

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

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

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

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

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

Приятного дня Сергей!

Добрый день. Спасибо за комментарий.

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

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

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

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

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

site-on.net

Как сделать сайт адаптивным: советы

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

Что это такое

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

Несколько лет назад специалистам в этой сфере приходилось создавать несколько версий веб-страниц, чтобы ресурс мог нормально отображаться на ‘ktrnhjyys[ гаджетах с разными характеристиками окон. Именно так работали верстальщики вплоть до 2010 года. Затем представление о том, как сделать сайт адаптивным кардинально поменялось. Тогда для выполнения этой функции использовался специальный язык программирования — JavaScript.

Еще по теме:   Bgcolor и Background

Как сделать сайт адаптивным на все экраны мобильных устройств сегодня? Сейчас верстка осуществляется посредством применения таблиц CCS3, а также специального языка HTML5.

Зачем необходим адаптивный сайт

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

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

Сравнение адаптивной верстки и мобильного приложения

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

  • Мобильное приложение должно обязательно соответствовать разновидности операционной системы. А для этого приходится потратить не только время, но и деньги.
  • Программа требует загрузки. Для использования приложения его, конечно же, следует установить. Разумеется, пользователь может это сделать, но только при условии, что оно ему нужно будет часто. Если же такой необходимости у него не будет, то, скорее всего, он от этой затеи откажется. В результате вы потеряете значительную часть своей аудитории.

Почему стоит отказаться от приложений

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

Как сделать адаптивный дизайн сайта

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

При необходимости уменьшаются информационные блоки, остаются лишь самые значимые элементы. Гайд для новичков обычно включает:

  • mobile first — проектирование для электронных гаджетов;
  • flexible images — использование гибких картинок;
  • grid-based layout — применение гибких макетов, основанных на сетке;
  • media queries — обработка медиа-запросов.

Как сделать сайт адаптивным? Для этого можно воспользоваться несколькими разновидностями макетов.

  • Резиновый. Такой вид легко реализовывать, он редко вызывает трудности даже у новичков. Основные блоки ресурса сдавливаются до тех пор, пока не подойдут для размеров мобильных экранов. Если же сжатие оказывается невозможным, то они размещаются в форме ленты.
  • Перемещение блоков. Такая методика безупречно подходит для ресурсов со множеством колонок. Размещение дополнительных блоков меняется с учетом габаритов экрана. Если дисплей уменьшается, сайдбары смещаются в нижнюю часть.
  • Переключение макетов. Это довольно-таки трудоемкая методика, которая подразумевает использование для каждого разрешения экрана специального созданного макета. Такой способ в разы облегчает изучение сайта, однако сложность работы делает его невостребованным.
  • Элементарная верстка. Методика, безупречно подходящая для простых ресурсов. Дизайнер попросту масштабирует картинки и типографику. Хотя такой способ нельзя назвать востребованным на фоне отсутствия гибкости.
  • Панели. Эта методика пришла из мобильных программ, в которых вспомогательное меню может появиться при любом положении дисплея. Сейчас этот способ тоже не сильно популярен, поскольку мобильная навигация на сайте не всегда понятна пользователям.

Ни один из описанных макетов нельзя назвать универсальным. Как сделать сайт адаптивным? В первую очередь необходимо подобрать подходящий макет, в зависимости от проекта. Он должен полностью соответствовать возможностям ресурса и удовлетворять все потребности.

Как сделать адаптивную верстку сайта

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

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

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

Итак, как сделать адаптивный дизайн сайта с html? Начать нужно с разработки простой картинки, которая затем растянется.

Таким образом создается оболочка для обработки изображения.

А как сделать сайт адаптивным с CSS? Задайте такие параметры:

Затем по ширине div задайте ширину картинки img.

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

labuda.blog

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

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

Ваш e-mail не будет опубликован. Все поля обязательны для заполнения.

Adblock
detector