Добро пожаловать в "Дизайн-кладовку"!
Это наш третий выпуск и сегодня мы будем говорить о том, как сделать сайт адаптивным и отзывчивым: в чем разница между двумя этими понятиями, что такое медиа-запросы, как с минимальными знаниями html и css сделать свою первую адаптивную страничку.
Как вы поняли, существуют два понятия - адаптивность и отзывчивость. В среде разработчиков эти понятия называются на английском - adaptive и responsive.
Adaptive (адаптивность)
Что же такое адаптивность?
Это комплекс мер по созданию идеального опыта взаимодействия с сайтом при использовании любых устройств или гаджетов. Я вывел это определение и считаю его лаконичным, а также простым. Ключевым здесь является «опыт взаимодействия», поскольку адаптивность - это не какое-то локальное решение, а полный комплекс мер.
Что входит в понятие адаптивности?
1. Кодинг. Верстальщик или фронтенд-разработчик делают ту самую магию в коде, которая позволяет нам просматривать различные состояния одной и той же страницы на мобильных устройствах и на десктопах.
2. Дизайн. Обязательно нужен дизайнер, создающий визуальные решения, которые в силу ограниченности творческого подхода недоступны верстальщику.
3. Постоянное улучшение. Адаптивный веб-дизайн находится в постоянном развитии, в поиске новых решений.
Ранее адаптивность реализовывалась с помощью поддоменов. Если у нас был домен sitename.ru для десктопной версии мы заходили на него с мобильного и автоматически перенаправлялись на поддомен m.sitename.ru. Именно на этом поддомене располагалась, так называемая, легкая версия сайта, без графики или с минимальной графикой, так как ранее мобильные операторы предоставляли очень низкую скорость подключения, следовательно, не было возможности показывать большие картинки.
Responsive (отзывчивость)
Что же такое отзывчивость?
Это составляющая адаптивного веб-дизайна. Она обеспечивает преобразование контента под различные устройства без смены домена, мгновенно. Это современный тренд, современный подход к созданию адаптивных версий сайта.
Как это выглядит на примере? Мы с вами заходим через десктоп на sitename.ru и видим обычную картину обычного сайта.
Если мы введем тот же самый адрес с нашего планшетного устройства, то мы увидим страницу, которая будет преобразована под его размеры, но при этом мы никуда не будем перенаправляться. Собственно, в этом и суть отзывчивого веб-дизайна. Это дизайн, который является отзывчивым к размерам устройства, с которого его просматривают.
Если мы введем тот же самый адрес с мобильного устройства, то увидим уже адаптированную под мобильные гаджеты версию этого сайта.
Как реализуется отзывчивость на практике?
Единственный способ сделать HTML-страницу "отзывчивой" - использовать медиа-запросы (media-querlies) в CSS.
Что это такое?
Давайте представим обычную ситуацию. Описан обычный код CSS. Это блок с классом «block», с длиной 500 px, высотой 300 px и сплошной границей 1 px серого цвета. Вот он на изображении справа:
А что если мы в тот же самый код CSS добавим еще одно правило?
Мы добавляем контейнер media screen and (max-width: 1024px), в котором находится тот же самый код для элемента «block», но с небольшими изменениями: я поменял высоту и толщину границы. Это и есть медиа-запрос. И теперь наш блок будет преобразован только тогда, когда человек зашел на наш сайт с устройства, у которого разрешение меньше, чем 1024px. Для всех остальных случаев будет использоваться первый кусочек кода.
Давайте представим второй пример, где уже три элемента. Код, который находится слева, реализует объект, находящийся справа.
Добавим в наш CSS-файл вот такой участок кода:
Здесь те же самые свойства, но немного переопределены отдельные элементы. Все это заключено в контейнер media screen and (max- width: 480px), что означает, если у пользователя будет разрешение мобильного устройства до 480px, он увидит следующую картину - те же самые блоки, но преобразованные.
Это позволяет управлять нашими элементами в зависимости от устройств.
Таким образом, наш CSS-файл будет выглядеть так: первая часть кода, затем вторая, определяющая поведение наших элементов на втором диапазоне устройств и третья часть, которая показывает положение вещей для третьего диапазона.
Первая часть нужна для того, чтобы показать нам десктопную версию. Затем, когда пользователь заходит с планшетного устройства, мы показываем ему несколько переопределенные CSS-свойства (вторая часть), которые будут подгоняться под размеры планшетов. Мобильные устройства добавляют еще одну часть кода в CSS – третью.
Вы видите, что первая часть отвечает за диапазон от 961px и выше. Если у пользователя будет экран с разрешением от 769px до 960px, то он увидит то, что было прописано во второй части кода. Если же устройство будет иметь диапазон от 0 до 768px, пользователь увидит совершенно иную картину.
Таким образом, в одном CSS-файле мы показываем все состояния и все поведения элементов для различных устройств.
Предлагаю рассмотреть пример на странице моего бесплатного курса по веб-дизайну. Когда вы перейдете по ссылке, то увидите вот такую десктопную версию:
Нажимаем клавишу F12, чтобы получить Dev Tools в Chrome - мы видим html и CSS коды. По прошлому выпуску "Дизайн-кладовки" вы уже знакомы с этими понятиями.
Находим контейнер с классом left-side и если посмотрим на макет с разрешением 1024px, то увидим, что длина left-side показана в CSS 50%, т.е. контейнер равен половине разрешения нашего монитора.
Если же посмотреть на макет с разрешением 768px, CSS нам показывает, что длина у контейнера left-side 100%. Раньше она была 50%, а теперь переопределена новым участком кода.
Медиа-запрос в данном случае выглядит вот так: media screen and (max- width: 998px)
Почему именно 998px? Потому что для большого проекта, как правило, берется немного больше диапазонов, чтобы более детально и четко контролировать поведение отдельных элементов на различных диапазонах.
В заключение
Надеюсь, что этот урок поможет разобраться с тем, что такое отзывчивость и адаптивность. Обязательно рекомендую посмотреть мой бесплатный мастер-класс на "День верстальщика", с помощью которого вы без знания HTML и CSS, либо с минимальной базой, сможете создать свою первую настоящую профессиональную веб-страницу.
До встречи в новых выпусках "Дизайн-кладовки".
Впереди еще много крутых тем для веб-дизайнеров, разработчиков, верстальщиков, фрилансеров и просто свободных людей!