Адаптивная вёрстка: что это и как использовать
Адаптивная вёрстка позволяет правильно отображать содержимое веб-сайта на любых устройствах. Рассказываем, как это сделать.
Адаптивная вёрстка меняет дизайн страницы в зависимости от поведения пользователя, платформы, размера экрана и ориентации девайса и является неотъемлемой частью современной веб-разработки. Она позволяет существенно экономить и не отрисовывать новый дизайн для каждого разрешения, а менять размеры и расположение отдельных элементов.
В этой статье будут рассмотрены основные элементы сайта и способы их адаптации.
Примечание Вы читаете улучшенную версию некогда выпущенной нами статьи.
- Регулировка разрешения экранаЧастичное решение: делаем всё гибкимГибкие изображенияЕще один способ: отзывчивые изображенияИнтересная фича для iPhoneНастраиваемая структура макета страницыАдаптивная вёрстка с помощью медиазапросов CSS3JavaScriptОпциональное отображение контента
Регулировка разрешения экрана
В принципе, можно разбить устройства на разные категории и верстать для каждой из них отдельно, но это займет слишком много времени, да и кто знает, какие стандарты будут через пять лет? Тем более, согласно статистике мы имеем целый спектр разнообразных разрешений:
Становится очевидно, что мы не сможем продолжать верстать для каждого устройства отдельно. Но что тогда делать?
Частичное решение: делаем всё гибким
Конечно, это не идеальный способ, но он устраняет большую часть проблем с адаптивной вёрсткой.
Итан Маркотт (Ethan Marcotte) создал простой шаблон, демонстрирующий использование гибкой вёрстки:
Весь дизайн — микс адаптивных слоев, картинок и, в некоторых местах, умной разметки. Создание адаптивных слоев — частая практика, чего нельзя сказать об адаптивных картинках. Однако если они вам нужны, обратите внимание на следующие техники:
- Hiding and Revealing Portions of Images;
- Creating Sliding Composite Images;
- Foreground Images That Scale With the Layout.
Для более детальной информации рекомендуем ознакомиться с книгой Зои Микли Джилленуотер (Zoe Mickley Gillenwater) «Flexible Web Design: Creating Liquid Layouts with CSS» и загрузить главу «Creating Flexible Images».
На первый взгляд может показаться, что все легко, но это не так. Взгляните на логотип:
Если уменьшить изображение целиком, надписи станут нечитаемыми. Поэтому, чтобы сохранить логотип, картинка поделена на две части: первая часть (иллюстрация) используется как фон, вторая (логотип) изменяет свои размеры пропорционально.
Элемент h1 содержит изображение в качестве фона, а картинка выровнена относительно фона контейнера (заголовка).
Гибкие изображения
Работа с картинками — одна из самых главных проблем при работе с адаптивной вёрсткой сайтов. Существует много способов для изменения размера изображений, и большинство из них довольно просто реализовать. Одно из решений — использование max-width в CSS:
Максимальная ширина изображения равняется 100% от ширины экрана или окна браузера, поэтому чем меньше ширина, тем меньше картинка. Обратите внимание, что max-width не поддерживается в IE, поэтому используйте width: 100% .
Представленный способ является неплохим вариантом создания адаптивных изображений, но, изменив только размер, мы оставим вес картинки прежним, из-за чего время загрузки на мобильных устройствах увеличится.
Ещё один способ: отзывчивые изображения
Вы можете использовать Picturefill для того чтобы сделать изображения чувствительными к изменениям размера экрана.
Для этого нужно скачать файл picturefill.js, а затем написать следующий код, внутри тега head:
Чтобы подгрузка этого файла не влияла на загрузку сайта, рекомендуем добавить в тег script атрибут async. Это позволит сайту загружаться не дожидаясь файла picturefill.js. Однако, для того чтобы старые браузеры распознавали элементы picture, вам нужно добавить строку, document.createElement( «picture» ); перед первым тегом script.
Теперь вы можете использовать следующий код, для того чтобы указать браузеру какие изображения нужно отображать, в зависимости от размера окна:
![…]()
Атрибут sizes используется для того, чтобы указать сколько места будет занимать изображение. Подробнее о значениях sizes и srcset здесь.
Для более явного контроля над изображениями существует элемент picture.
Интересная фича для iPhone
В iPhone и iPod touch есть особенность: дизайн, созданный для больших экранов, просто сожмется в браузере с маленьким разрешением без скролла или дополнительной мобильной вёрстки. Однако изображений и текста не будет видно:
Для решения данной проблемы используется тег meta :
Если initial-scale равно единице, ширина картинок становится равной ширине экрана.
Настраиваемая структура макета страницы
Для значительных изменений размера страницы может понадобиться изменить расположение элементов в целом. Это удобно делать через отдельный файл с адаптивной вёрсткой CSS или, что более эффективно, через CSS-медиазапрос. Проблем возникнуть не должно, т. к. большинство стилей останутся прежними, и изменятся только некоторые.
Например, у вас есть главный файл со стилями, который задает #wrapper , #content , #sidebar , #nav вместе с цветами, фоном и шрифтами. Если ваши главные стили делают макет слишком узким, коротким, широким или высоким, вы можете это определить и подключить новые стили.
/* Основные стили, которые будут унаследованы дочерней таблицей стилей */ html,body < background. font. color. >h1,h2,h3<> p, blockquote, pre, code, ol, ul<> /* Структурные элементы */ #wrapper < width: 80%; margin: 0 auto; background: #fff; padding: 20px; >#content < width: 54%; float: left; margin-right: 3%; >#sidebar-left < width: 20%; float: left; margin-right: 3%; >#sidebar-right
#wrapper < width: 90%; >#content < width: 100%; >#sidebar-left < width: 100%; clear: both; /* Дополнительные стили для нового дизайна */ border-top: 1px solid #ccc; margin-top: 20px; >#sidebar-right< width: 100%; clear: both; /* Additional styling for our new layout */ border-top: 1px solid #ccc; margin-top: 20px; >
На широком экране левая и правая боковые панели хорошо помещаются сбоку. На более узких экранах эти блоки расположены один под другим для большего удобства.
Адаптивная вёрстка с помощью медиазапросов CSS3
Рассмотрим, как можно использовать CSS3-медиазапросы для создания адаптивного дизайна. min-width задает минимальную ширину окна браузера или экрана, к которой будут применены определенные стили. Если какое-нибудь значение будет ниже min-width , то стили будут проигнорированы. max-width делает противоположное.
@media screen and (min-width: 600px) < .hereIsMyClass < width: 30%; float: right; >>
Медиазапрос заработает только когда min-width будет больше или равна 600 px.
@media screen and (max-width: 600px) < .aClassforSmallScreens < clear: both; font-size: 1.3em; >>
В этом случае класс (aClassforSmallscreens) будет работать при ширине экрана меньше или равной 600 px.
В то время как min-width и max-width могут быть применимы и к ширине экрана, и к ширине окна браузера, нам может понадобиться работать только с шириной устройства. Например, чтобы игнорировать браузеры, открытые в маленьком окне. Для этого можно использовать min-device-width и max-device-width :
@media screen and (max-device-width: 480px) < .classForiPhoneDisplay < font-size: 1.2em; >> @media screen and (min-device-width: 768px) < .minimumiPadWidth < clear: both; margin-bottom: 2px solid #ccc; >>
Специально для iPad у медиазапросов есть свойство orientation, значениями которого могут быть либо landscape (горизонтальный), либо portrait (вертикальный):
@media screen and (orientation: landscape) < .iPadLandscape < width: 30%; float: right; >> @media screen and (orientation: portrait) < .iPadPortrait < clear: both; >>
Также значения медиазапросов можно комбинировать:
@media screen and (min-width: 800px) and (max-width: 1200px) < .classForaMediumScreen < background: #cc0000; width: 30%; float: right; >>
Этот код будет выполнен только для экранов или окон браузеров шириной от 800 до 1200 px.
Загрузить определенный лист со стилями для разных значений медиазапросов можно так:
JavaScript
Если ваш браузер не поддерживает CSS3-медиазапросы, то замену стилей можно организовать с помощью jQuery:
Опциональное отображение контента
Возможность сжимать и менять местами элементы, чтобы они уместились на маленьких экранах, — это замечательно. Но это не лучший вариант. Для мобильных устройств обычно используется более широкий набор изменений: упрощенная навигация, более сфокусированный контент, списки или строки вместо колонок.
К счастью, CSS дает нам возможность показывать и прятать контент с неимоверной легкостью.
display: none;
display: none используется для объектов, которые нужно спрятать.
Вот наша разметка:
Left Sidebar Content | Right Sidebar Content
Main Content
A Left Sidebar
A Right Sidebar
В главном файле стилей мы меняем ссылки на колонки, т. к. у нас достаточно большой экран, чтобы отобразить весь контент.
#content < width: 54%; float: left; margin-right: 3%; >#sidebar-left < width: 20%; float: left; margin-right: 3%; >#sidebar-right < width: 20%; float: left; >.sidebar-nav
Теперь прячем колонки и показываем ссылки:
#content < width: 100%; >#sidebar-left < display: none; >#sidebar-right < display: none; >.sidebar-nav
Если размер экрана уменьшается, можно, например, использовать скрипт или альтернативный файл со стилями, чтобы увеличить белое пространство или заменить навигацию для большего удобства. Таким образом, имея возможность прятать и показывать элементы, изменять размеры картинок, элементов и многое другое, можно создавать адаптивную вёрстку под любые устройства и экраны.
О примерах использования адаптивной вёрстки сайтов вы можете почитать в лучших практиках по реализации адаптивного веб-дизайна.
Следите за новыми постами по любимым темам
Подпишитесь на интересующие вас теги, чтобы следить за новыми постами и быть в курсе событий.
Адаптивная верстка сайта
Адаптивная верстка — это верстка, при которой сайт одинаково хорошо отображается на всевозможных девайсах: компьютерах, планшетах, телефонах. Таких ресурсов с каждым годом становится все больше, ведь мобильный трафик растет, современные технологии не стоят на месте. Уже не целесообразно делать сайт, который будет удобно просматривать исключительно на компьютере. Да и сделать адаптивный дизайн очень просто.
- Основные техники реализации:
- Регулировка разрешения экранов
- Плавающая сетка
- Медиа-запросы
- Тестирование созданных сайтов
Основные техники реализации
Подстраивая сайт под мобильные устройства, применяют определенные инструменты. Рассмотрим основные элементы и способы их реализации, чтобы получилась верстка адаптивная.
Регулировка разрешения экранов
Верстать для каждого вида устройства отдельно нет смысла, ведь это займет слишком много времени. Да и все так быстро меняется, что никто не знает, что будет в тренде завтра.
Один из способов частично решить проблему — делать гибкие изображения. Весь дизайн создают из нескольких слоев с использованием в некоторых местах умной разметки. Изменить размер изображения можно различными способами, один из которых использование max-width и таблицы стилей. Можно также применять отзывчивые изображения, для чего потребуется скачать специальный файл.
Адаптивная верстка сайта позволяет сделать читаемым текст, независимо от того, с помощью какого устройства его будут просматривать. Это можно сделать, если увеличить размер шрифта либо высоту строки. Они настраиваются в рамках ширины макета согласно иерархии содержимого, которая задается при помощи CSS.
И хотя с изображениями дело обстоит немного сложнее, чем с текстом, они могут масштабироваться, обрезаться либо вовсе исчезать исходя из того, какой контент требуется для используемого устройства.
Плавающая сетка
Основополагающим звеном, при помощи которого создаются макеты, является сетка. При этом адаптивность верстки обеспечивается применением именно гибкой сетки. Вместе с ней между элементами постоянно будет интервал, а из-за своих пропорций они смогут подстраиваться под определенную ширину экрана.
Медиа-запросы
Такие запросы представляют собой код, отвечающий за гибкость макета. Они определяют тот код, который будет применяться в зависимости от размеров и ориентации девайса. Такие коды допускают наличие нескольких макетов дизайна с использованием одной и той же html-кодированной веб-страницы.
Тестирование созданных сайтов
Пользовательское тестирование просто необходимо, чтобы получить данные о том, как посетители взаимодействуют с ресурсом. Также создание адаптивной версии сайта предполагает удостовериться, что ваш дизайн и сама верстка совместимы с соответствующими браузерами.
При этом лучше всего проверить ресурс не только на мобильных, но и других устройствах. Чем больше девайсов вы используете, тем лучше.
Предварительно найдите другие адаптивные сайты, посмотрите, как разработчики обыгрывают их концепции. Это поможет выработать свой собственный дизайн.
Responsive верстка VS резиновая верстка и мобильная версия
Обычный сайт с так называемой «резиновой» версткой отображается на экране телефона в таком виде, в котором он есть на самом деле, меняясь при этом в зависимости от размера дисплея. И если в тексте есть какие-то мелкие детали, например, форма для регистрации, то заполнить ее можно только увеличив пальцами.
Мобильная версия является дополнением к основному проекту, в котором весь контент урезается для экономии трафика. Адаптивный же сайт дает возможность перестроить ресурс непосредственно под определенный гаджет. Таким образом, навигация и само содержание подстроятся под конкретную модель устройства.
Какие преимущества несет в себе верстка адаптивного сайта?
Если вы хотите, чтобы ваш ресурс удерживал первенство в поисковиках, к его разработке следует подойти серьезно. На данный момент далеко не все хотят переходить с привычной мобильной версии. Но если посмотреть со стороны СЕО продвижения, можно сказать, что адаптивные сайты имеют ряд важных преимуществ, а именно:
- гарантия того, что клиент хорошо будет видеть ваш контент на любом гаджете;
- повышение видимости ресурса в поисковых системах;
- один сайт — один адрес, из-за чего авторитет ресурса не приходится зарабатывать с нуля.
Исходя из вышеизложенного, разобравшись, что такое адаптивная верстка сайта, становится понятно, по какой причине ресурс может хорошо ранжироваться в поиске. Ведь когда ресурс плохо работает на телефоне либо планшете, обычно фиксируется высокий показатель отказов.
Минус мобильных версий в том, что их контент сильно урезан по сравнению с основным ресурсом. Поэтому их позиции в поисковике также нельзя назвать высокими. Большое количество отказов воспринимаются поисковиками как показатель того, что данный сайт не может предоставить пользователям нужную информацию. А это приводит к падению его позиций.
Адаптивная верстка для сайта: какая польза бизнесменам?
Если применять правила создания адаптивного дизайна, представители предпринимательства смогут заметить несколько положительных моментов:
- увеличение клиентской базы благодаря охвату пользователей планшетов и телефонов;
- наработка постоянной клиентуры, повышение объемов продаж и конверсии из-за регулярной работы с большой аудиторией;
- возможность собирать аналитические сведения и информацию с отчетов по версиям сайтов для десктопов и мобильных устройств в одном месте;
- снижение временных потерь, а также выгодная стоимость руководства контентом.
Как показывает статистика, подавляющее большинство (свыше 60 %) запросов в Google производится именно с мобильных устройств. Поэтому последний даже предлагает специальный тест, который предоставляет возможность вычислить, ваша верстка сайта адаптивная или нет. Для этого вы просто вводите URL страницы, и на экран выводится рассчитанная оценка.
Так, Google требует целый перечень оптимизированных элементов для более результативного взаимодействия с владельцами телефонов, используя адаптивный веб-дизайн:
- текст читаемого размера, без необходимости его специально увеличивать;
- все содержание помещается на экране без вертикальной прокрутки;
- все ссылки и кнопки для удобства работы расположены на достаточном расстоянии друг от друга;
- разумное время загрузки ресурса;
- отсутствие необходимости загружать Flash.
Все вышеупомянутые принципы очень важно соблюдать при разработке собственного дизайна. Чтобы не упустить ни одного нюанса и все сделать правильно, рекомендуем обратиться за помощью к профессионалам!
Разработка адаптивной верстки вместе с Веб-студией WebTune
Специалисты нашей компании помогут разработать верстку для лендинга, корпоративного, промо сайта или каталога. Мы вместе определим наиболее подходящее для вас меню, разработаем оригинальный дизайн, максимально подходящий именно для вашего проекта.
Мы гарантируем использование современных подходов, которые послужат конкурентным преимуществом для любой сферы бизнеса. Занимайте лидирующие позиции среди своих конкурентов. Цена наших услуг порадует своей доступностью, а адаптивная верстка сайтов покажет эффективный результат уже с первых дней ее использования.
Что такое адаптивная вёрстка страниц сайта: полный гайд, теория и практика
Адаптивная верстка сайта — это формирование структуры документа на базе HTML-разметки, предусматривающей автоматическое изменение страницы в зависимости от размера экрана пользователя. Простыми словами это макет страницы, автоматически подстраивающийся под размер экрана пользователя.
Присоединяйтесь к нашему Telegram-каналу!
- Теперь Вы можете читать последние новости из мира интернет-маркетинга в мессенджере Telegram на своём мобильном телефоне.
- Для этого вам необходимо подписаться на наш канал.
Помните советскую игру «Тетрис»? Там нужно было складывать падающие блоки конструктора, чтобы они подходили друг к другу по форме фигур.
Динамическая верстка весьма похожа на тетрис, где блоки и элементы документа складываются, взаимодействуя друг с другом. При этом страница остается удобной и хорошо читаемой на экранах любого размера.
Взгляните на макет страницы:
Адаптивная верстка позволяет просматривать контент без скролла страницы, а характерная для десктопа полоса прокрутки в правой части страницы просто отсутствует.
Адаптивность — важнейшее требование, которое предъявляется к современному сайту, особенно в текущих условиях поисковой оптимизации. И вот почему:
- Удобство для пользователей . Такие сайты удобны для просмотра на любых устройствах: от смартфонов и планшетов до телевизоров. Если страница остается читаемой только на десктопе, а мобильному пользователю приходится прикладывать определенные усилия, чтобы тапнуть по элементу или даже просто ознакомиться с контентом, то количество отказов на сайте резко увеличится.
- Больше трафика. Без адаптивности сайт теряет огромный сегмент аудитории, который связан с мобильными устройствами. Соответственно, и трафик, который они могли бы привести.
- Более высокий коэффициент конверсий . Есть исследования, которые показывают — адаптивный веб-дизайн может привести к увеличению коэффициента конверсии посетителей в покупателей на 10,9 %.
Критически важна адаптивность для коммерческих сайтов, где неудобство напрямую ведет к снижению конверсии и падению прибыли бизнеса.
Разница между адаптивной и мобильной версией сайта
Технически мобильная версия сайта на поддомене (чаще всего .m) — это отдельный, самостоятельный сайт. Адаптивный сайт — это мобильная и полная версия сайта в одном флаконе, при этом первая умеет подстраиваться к любому типу устройства пользователя.
Читайте также:
Мобильные версии сайтов 2023: интересные тенденции и неожиданные выводыСтоит отметить несколько достоинств и недостатков обоих подходов.
Достоинства отдельной мобильной версии на поддомене
- Загружается быстрее.
- Мобильный пользователь может выбирать, какая версия сайта ему нужна в данный момент.
- Проще создавать, так как функциональность сильно урезана.
- Лучшее юзабилити.
Недостатки мобильной версии на поддомене
- Сильно ограничено функциональное воплощение.
- Поисковые системы видят сразу несколько версий одной страницы.
- Нет возможности опубликовать весь контент, доступный в полной версии сайта.
- Возможные санкции поисковых систем: если вы дублируете уже опубликованный контент основной версии на мобильной версии сайта.
- Может страдать загрузка содержимого страницы, если используются перенаправления.
Еще одна проблема мобильной версии сайта на поддомене состоит в том, что придется заново прокачивать трастовость домена, ИКС и другие «пузомерки», ведь с точки зрения поисковых систем поддомен — это новый самостоятельный сайт.
Достоинства адаптивной верстки
- Не нужно генерировать дополнительные URL-адреса.
- Расшаривание содержимого страниц более удобное, так как контент находится в рамках одного домена.
- Легче оптимизировать сайт для SEO.
- Простая реализация.
- Не нужно задействовать перенаправления.
- Проще сканировать краулерам.
- Все ранее наработанные показатели остаются с вами и можно не бояться, что страницы неожиданно вылетят из индекса или вообще в него не попадут.
Недостатки адаптивной верстки
- Нельзя переключаться между полной и мобильной версией сайта.
- Возможны сложности, если на сайте используется нестандартный функционал.
- Скорость загрузки ниже, чем у мобильной версии сайта.
Читайте также:
Как составить грамотное ТЗ на создание сайта: примеры и частые ошибкиТеория. Устройство адаптивной верстки
Давайте смотреть, как это работает.
Медиазапросы стилей
Медиа-запросы — это правила-триггеры, применяемые к CSS, которые реагируют на тип устройства, тип экрана, отображаемый браузер или даже ориентацию устройства. Цель медиа-запроса — разделить использование различных макетов с задействием одних и тех же блоков контента, каждый из которых оптимизирован для размера или функций рассматриваемого устройства.
@media screen and ( max — width : 600 px ) <
Логический оператор and, который позволяет связывать вместе разные типы условий >
Медиа-запрос следует правилу, основанному на параметрах минимальной и/или максимальной ширины, наряду с другими факторами (например, разрешение, браузер и ориентация экрана). Подробнее о них мы расскажем ниже, в разделе «Параметры и правила».
Медиа-запросы используются для идентификации допустимых и недопустимых стилей на каждой конкретной странице документа. Свойства стиля регламентируют самые разнообразные параметры документа, например, плотность пикселей (разрешение пользовательского экрана), ширина / высота браузерного окна, ориентация страницы.
«Жидкие» сетки
Адаптивный веб-дизайн использует алгоритм для нормализации элементов пользовательского интерфейса к размеру экрана и пикселям. Делается это с помощью так называемого «жидкого макета», в котором каждый компонент учитывается в процентах, которые он занимает по ширине.
Блок содержимого, изображение и отступы между блоками и вокруг них складываются вместе, чтобы составить 100 % в ширине.
Гибкие изображения
Изображения должны быть созданы в относительных единицах. В адаптивной верстке они называются «эффективными пикселями» (epx). Эти единицы используются для выражения размеров макета и интервалов. Элементы должны быть разработаны с базовой единицей 4 epx, чтобы дизайн всегда масштабировался до целого числа при применении гибкой сетки.
Могут быть и другие варианты реализации гибких изображений:
Что такое адаптивная вёрстка сайта, виды вёрстки и как это работает
Адаптивная вёрстка сайта (от английского, responsive web design, иногда — adaptive web design) — это умная вёрстка, которая автоматически адаптируются под устройство пользователя, в частности под особенности его экрана. Независимо от диагонали экрана, нестандартного разрешения, текущей ориентации, сайт с адаптивной версткой всегда будет выглядеть красиво, а контент страниц всегда будет оставаться читаемым. Взаимодействие пользователя с элементами страницы также остается удобным на любом устройстве благодаря адаптивному дизайну. Этот вид вёрстки создаётся не на основе фиксированного шаблона, как в случае стандартной верстки, а на основе key points — контрольных точек. Именно они используются для ориентации и автоматической адаптации контента на странице.
Простыми словами, адаптивная вёрстка сайта — это умная вёрстка, которая подстраивается под экран конечного устройства.
Wikipedia использует адаптивную верстку страниц
Как работает адаптивная верстка и почему она важна в 2023 году
Если взглянуть на адаптивную вёрстку не со стороны пользователя, а с технического аспекта, то вот как выглядит процесс адаптации сайта к особенностям устройства пользователя:
- Пользователь открывает страницу сайта.
- Сервер посылает в браузер пользователя HTML-документ. Сам HTML-код будет одинаковым для любых устройств, с которых сайт открывают пользователи.
- На всех устройствах выполняется идентичный код.
- Размер страницы, расположение контента и всех элементов веб-страницы настраивается уже в браузере каждого пользователя индивидуально.
- Визуальный размер компонентов веб-страницы изменяется благодаря каскадным таблицам стилей (CSS).
- Смартфоны — разрешение экрана от 320 пикселов.
- Планшеты — разрешение экрана от 768 пикселов.
- Нетбуки — разрешение экрана от 1024 пикселов.
- Мониторы FULL-HD — разрешение экрана от 1920 пикселов.
В конце 2022 года наличие адаптивной вёрстки на сайте становится особенно важным фактором: не только для удобства пользователей, но и для поисковых систем — неудобные для просмотра на мобильных устройствах сайты могут понижаться в выдаче искусственно самими поисковиками.
В первом квартале 2021 года мобильные устройства обеспечили 54,8 % от всего объема глобального трафика
Какие виды вёрстки сайтов существуют в 2023 году
Прежде чем говорить о конкретных видах адаптивного содержимого, следует упомянуть и другие виды вёрстки. В частности, на старых сайтах до сих пор можно встретить фиксированную верстку. Но распространена также резиновая и отзывчивая виды верстки. Чем же они отличаются друг от друга?
Пример того, как различные элементы веб-страницы адаптируются к размеру экрана различных устройств
Парадокс, но «отзывчивая» и «адаптивная» верстка — это разные виды верстки. Давайте кратко разберем разницу между всеми четырьмя видами.
Адаптивная. Этот вид сочетает достоинства отзывчивого дизайна с плюсами адаптивных макетов. Медиа запросы предусматривают зафиксированное расположение контента для каждой контрольной точки. Самостоятельная разметка с якорем — главное отличие адаптивного дизайна.
Отзывчивая. Этот вид верстки использует процентные показатели, которые указываются в стилях сайта (CSS). Самостоятельной статической разметки с якорем здесь нет. Так что корректнее всего сказать, что отзывчивая верстка является частью адаптивного дизайна.
Фиксированная. Этот вид дизайна использовался на сайтах много лет назад. Такие сайты неудобно просматривать с мобильных устройств, так как макет страницы имеет фиксированный размер и никак не подстраивается под особенности экрана пользователя. Сайт с фиксированным размером макета — анахронизм. Его можно рекомендовать только в том случае, если сайт вам нужен чисто формально и реальные пользователи не будут им пользоваться.
Резиновая. Этот вид дизайна предусматривает определение максимальной и минимальной ширины страницы. Точное значение ширины не задается. При этом сайт с резиновым дизайном, всё ещё может быть удобным для просмотра с большинства устройств, даже в конце 2022 года.
Виды вывода адаптивного содержимого
Давайте посмотрим на конкретные инструменты и компоненты, которые используются в адаптивном дизайне. Безусловно, охватить и разобрать каждый из них полностью, в рамках нашей статьи, было бы невозможно. Поэтому мы сосредоточимся только на самых важных видах адаптивного содержимого страниц.
Медиа-запросы
Это специальные правила и условия в CSS-стилях для управления компонентами страницы. Медиа-запросы в CSS работают в зависимости от особенностей пользовательского устройства, например, текущей ориентации или разрешения экрана.
Главный маркер медиа-запроса — ключевое слово @media в начале строки.
Далее мы рассмотрим несколько самых важных для адаптивного дизайна типов медиа-запросов.
Относительность и размеры
Самое важное что нужно знать: в адаптивный верстке действует правило относительности. И затрагивает оно вообще всё, что связано с размерами, будь то какой-либо графический компонент на странице или форма отправки данных. Поэтому, многие параметры указываются в относительных значениях, например, вместо реального размера изображения будет указываться максимальная ширина или разрешение экрана.
Процент, высота шрифта, пиксель, высота символа — примеры относительных единиц измерения в адаптивной вёрстке.
Размеры экранов для адаптивной верстки
В 2023 году для устройств разного типа приняты традиционные значения размеров экранов. Вот эти значения.
Смешивание условий
Прежде чем говорить о конкретных медиа-запросах важно отметить, как именно смешиваются условия.
В медиа запросах можно использовать три логических оператора: «НЕ» (not), «И» (and), «ИЛИ» (условия для этого оператора просто разделяются при помощи знака запятой).
Чтобы не запутаться — посмотрим, как использовать логические операторы на одних и тех же условиях: портретная ориентация (orientation: landscape) и минимальная ширина вьюпорта (min-width: 800px).
Пример использования логического отрицания (not):
Как видим, этот логический оператор используется для тех условий, которые не должны выполняться. Неочевидность действия этого оператора может приводить к ошибкам у неопытных разработчиков, поэтому не используйте его, если не уверены.
Пример использования логического оператора И (and):
Обратите внимание, как отделяются два условия друг от друга. Этим логическим оператором мы указали, что свойства будут задействоваться только в том случае, если параметры устройства пользователя будут соответствовать сразу двум условиям.
Пример использования логического оператора ИЛИ:
Обратите внимание на запятые между параметрами ориентации и минимальной ширины. Таким образом мы указали, что свойства будет задействоваться в том случае, если у для пользовательского устройства будет справедливо любое из двух указанных условий (в нашем случае — это портретная ориентация или viewport минимум 600 пикселей).
Когда viewport растягивается по горизонтали, каждый столбец также расширяется
Ориентация экрана пользователя
Например, для портретной ориентации код может выглядеть следующим образом:
Таким образом мы указали, что условие должно выполняться исключительно для вертикальной ориентации, при этом неважно какой какой тип устройства использует пользователь — смартфон или планшет. Обратите внимание, что мы также задали фоновый цвет страницы (background: #000).
Других значений, кроме portrait and landscape, не предусмотрено. Ведь любое устройство будет иметь либо портретный, либо горизонтальный экран. Неважно, что это — кофемашина или холодильник.
Третьего — не дано
Шрифты
Если на сайте используется один-два шрифта, то проблем с адаптивной версткой не возникнет. Другое дело, что встречается такое очень редко. И большое количество разных типов шрифтов может стать настоящей головной болью для веб-разработчика.
В адаптивном дизайне для решения проблемы шрифтов можно использовать сразу несколько инструментов. Один из самых простых — задать гибкую базу для шрифта. Например, такую:
font-size:100%; /* по-умолчанию 16px */ > p < font-size: 1.25rem; /* 1,25rem относительно основы в 16px к body в результате даст размер шрифта в 16*1.25 = 20px */ >
Обратите внимание на единицу измерения rem — она задаёт размеры по отношению к шрифту в теге html. Это означает, что все дочерние блоки также изменят размер шрифта. Таким образом, для изменения типографики мелких экранов (через медиа-запросы) нам нужно будет просто отредактировать величину шрифта для тега body.
При изменении размера основного шрифта всё текстовое содержимое страницы будет изменяться автоматически. Например, вот так:
@media screen and (max-width: 700px) < body < font-size:80%; >> @media screen and (max-width: 900px)
Это лишь один способ решить проблему адаптивности шрифтов в адаптивной верстке из множества возможных.
Ещё один вариант — указать размерность шрифтов для каждого разрешения экрана отдельно. В этом случае шрифты будут корректно выводиться на всех устройствах и вы сможете оперативно поменять шрифт для любого разрешения, если возникнет такая необходимость. Например, вот так:
@media only screen and (min-width: 750px) < font-size:13px; >@media only screen and (min-width: 968px)
Гибкие сетки
Это один из самых важных элементов, ведь на нём держится вообще весь адаптивный дизайн. Гибкая сетка формируется заданием свойств ширины и максимальной ширины.
Сетка отзывчивого макета состоит из трех элементов: колонок (1), промежутков (2) и полей (3)
Контрольные точки (breakpoints)
Это еще один важнейший компонент адаптивной верстки, без которого сайт не сможет подстраиваться под разные разрешения экрана.
Контрольные точки формируются при помощи задания ширины или высоты вьюпорта.
Контрольные точки определяются условным значением разрешения экрана пользователя. Например, максимальная высота указывается стандартным CSS-условием max-height (а минимальная, соответственно, min-height).
Платформа Bootstrap по умолчанию предусматривает шесть контрольных точек, но каждую из них можно настроить вручную
Если главным для вас является удобство десктоп-пользователей, то стили нужно записывать от самых больших разрешений вверху, до минимальных — в самом низу.
- max-width: 1500px.
- max-width: 100px.
- max-width: 700px
Если главным для вас являются мобильные пользователи и вы действуете по концепции Mobile First, то стили указываются в обратном порядке: от самых маленьких разрешений вверху, до самых больших — внизу.
А теперь взгляните на эту таблицу. Обратите внимание: при автоматическом изменении размеров макета сетка также меняет ширину полей и даже количество колонок.
При масштабировании макета адаптивная сетка автоматически настраивает ширину полей (и заодно количество колонок)
Адаптивные изображения
Их также называют гибкими или responsive-изображениями. Адаптивные изображения реализуются при помощи элементов
, атрибутов srcset и sizes.
В случае стандартных изображений, обычно указывается только один путь к картинке. Делается это таким образом:
Но что делать, если вы хотите указать путь сразу к нескольким файлам, чтобы браузер пользователя автоматически загружал то изображение, которое больше подходит для его экрана? Смотрите как элегантно мы решили эту проблему:
Таким образом, браузер устройства автоматически проанализирует ширину экрана, затем идентифицирует наиболее релевантные условия из атрибута sizes, после оценит размеры слота к медиа-выражению и, наконец, загрузит наиболее подходящее изображение из srcset.
Фреймворки для адаптивного дизайна
Легкий, быстрый и качественный фреймворк для CSS может дать вам хороший толчок при разработке любого сайта. И особенно он поможет на этапе верстки.
Некоторые фреймворки (например, BootStrap) могут быть довольно тяжелыми и неповоротливыми, они несколько перегружены излишним кодом. Другие — более простые и не требуют сложного обучения (например, Spark и Bijou).
В идеале для создания адаптивной верстки вам нужен такой фреймворк, который поможет быстро начать работу, но при этом не будет перегружен большим количеством разнообразных функций, которыми вы в 95% случаев даже не воспользуетесь.
Весь смысл фреймворка заключается в том, чтобы оптимизировать работу веб-разработчика и дальнейшую верстку сайта. Если нужно загружать кучу разных скриптов, постоянно перебирать чужие стили, делать по кругу одну и ту же работу — это плохой фреймворк.
Вот 11 лучших вариантов фреймворков для создания адаптивного дизайна и оптимизации адаптивной верстки.
- Cute Grids. Лёгкая и простая 12-колоночная система отзывчивых сеток. Всё. Больше никаких дополнительных функций и наворотов здесь нет. Зато — удобно.
- FICTOAN. Этот фреймворк для тех, кто любит простые и понятные решения. Минимальный набор сеток, минимальный набор контейнеров.
- Typebase. Минимально кастомизируемый шаблон стилей для управления типографикой на сайте. Эффективно убирает типовые проблемы, например, неровности текста в длинных колонках.
- Beauter. 5 килобайт и у вас в кармане: отзывчивые сетки, неплохие контейнеры, моды и попапы.
- Spark. Отличный вариант для воплощения отзывчивого и адаптивного веб-дизайна. Отдельно отметим неплохие цветовые темы, которые есть внутри фреймворка.
- Vanilla Framework. Красивые контейнеры и другие графические элементы, которые великолепно выглядят уже из коробки. Конечно, их можно настроить.
- Bijou. Фреймворк весит менее 2 килобайта, стандартная десяти-колоночная сетка и большое количество кнопок, панелей, уведомлений и таблиц.
- Cirrus.CSS. Один из лучших вариантов для тех занимается, кто занимается прототипированием.
- Emerald. Отзывчивая сетка на блочных элементах. Больше ничего нет.
- Halfmoon. Отличный вариант фронтенд-фреймворка для любых целей.
- SCHEMA. Расширенный набор CSS-компонентов, включая: формы, кнопки и попап-окна. Отличный вариант для тех, кто не любит сложные фреймворки.
Мы могли бы перечислить ещё десяток лёгких и отзывчивых фреймворков для оптимизации адаптивной верстки, но в этом нет никакого смысла.
Достоинства фреймворка Beauter
Попробуйте хотя бы 3-4 варианта из нашего списка выше. Вы быстро найдёте наиболее удобный для вас вариант.
Тег viewport
Важнейший маркер адаптивного дизайна на странице — наличие тега viewport. Выглядит он так:
meta name="viewport"
Если вы видите этот тег в коде страницы, значит сайт является адаптивным.
Ширина каждого элемента в пикселях основывается на ширине области просмотра в 1000 пикселей
Чтобы браузер понял, что страница вашего сайта имеет адаптивный дизайн, необходимо вписать в ее заголовок следующий тег:
Найдя такой мета тег в заголовке документа, браузер понимает, что контент на странице должен быть масштабирован (исходя из ширины экрана пользователя).
Как создать отзывчивый веб-сайт: пошаговый алгоритм действий
В этом разделе мы подытожим все, что сказали выше и дадим вам пошаговую инструкцию по созданию адаптивного дизайна.
- Установите контрольные точки (breakpoints). Напомним, контрольная точка — это точка в которой содержимое веб-страницы и дизайн сайта адаптируются определенным образом, чтобы обеспечить наилучший пользовательский опыт. Доступ к каждому сайту осуществляется с помощью разных устройств — с разными размерами экрана и с разными разрешениями экрана. Контент не должен искажаться, вырезаться или опускаться, если экран пользователя нестандартный. Всё должно быть красиво. Именно для этой цели используются контрольные точки. Содержимое сайта реагирует на эти точки и подстраивается под размер экрана для отображения максимально подходящего макета.
Десктопный макет основан на трех элементах: Body, Navigation, App bars При наличии контрольных точек содержимое сайта будет соответствовать размеру экрана и отображаться таким образом, чтобы радовать глаз и облегчать визуальное восприятие. Используйте контрольные точки для наиболее распространенных разрешений, используемых на телефонах, десктопах и планшетах в 2023 году:- 1920×1080 (9.61 %)
- 1366×768 (7.87 %)
- 360×640 (4.36 %)
- 414×896 (4.34 %)
- 1536×864 (4.11 %)
- Внедрите Fluid Grid (гибкую сетку). Раньше элементы сайта и его страниц всегда строились на конкретных значениях, которые указывались в пикселях. Теперь же, в адаптивном дизайне, используется Fluid Grid. Такая сетка устанавливает компоненты на странице сайта пропорционально размеру экрана, на котором они отображаются. Вместо того, чтобы создавать элементы одного конкретного размера (заданного в пикселях),элементы во Fluid Grid автоматически изменяются, в зависимости от размера экрана пользовательского устройства. Задавать значение вручную не нужно.
«Контент как вода. Вы наливаете воду в чашку и она превращается в чашку. Вы наливаете воду в бутылку и она превращается в бутылку. Вы наливаете воду в чайник и она превращается в чайник» Fluid Grid делится на несколько колонок, при этом происходит масштабирование высоты / ширины. Пропорции текста и элементов зависят от размера экрана. Гибкая сетка поддерживает дизайн сайта и корректный вывод контента на любых устройствах. Кроме того, становится легче выравнивать любые компоненты.
С гибкой сеткой можно быстро менять всё, что связано с дизайном страницы или всего сайта.
img
- Свойство CSS max-width: картинка будет автоматически масштабироваться, в зависимости от ширины контейнера.
- Метатеги picture, source и img сгруппированы, чтобы при отрисовке задействовалось только одно изображение, которое будет наиболее приемлемым на каждом конкретном экране.
- Тег source type=»image/webp» srcset=»ваши URL» используется для ссылки на изображение в формате WebP. Этот формат использует расширенное сжатие, чтобы уменьшить размер файла и сохранить высокую детализацию. Все современные браузеры теперь поддерживают формат WebP, но если пользователь использует очень старый браузер — картинки могут вообще не загрузиться. Но эта проблема в нашем примере успешно решена с помощью второго тега source. Смотрите второй тег.
- Второй тег source ссылается на PNG-файл того же изображения, для браузеров без поддержки WebP.
- Атрибут srcset уведомляет браузер о том, какое именно изображение должно выводиться на экран, в зависимости от разрешения экрана конкретного устройства.
- Атрибут loading=»lazy» — при помощи этой пары внедряется ленивая загрузка для изображений.
.videoWrapper < position: relative; padding-bottom: 56.25%; /* 16:9 */ height: 0; >.videoWrapper iframe
- Position: relative — относительное позиционирование. Относится к контейнерному элементу, чтобы дочерние компоненты позиционировались соответствующим образом (по отсутствию относительно него).
- Свойство CSS height: 0 сочетается со свойством padding-bottom: 56.25%. В этом случае реализуется динамическое изменение экрана, если пользовательское соотношение сторон соответствует 16:9.
- Свойство CSS Position: absolute, top: 0 и left: 0 — эти значения задаются на iframe для того, чтобы компоненты на странице позиционировались относительно родительского элемента.
- Значение CSS параметров width и height 100%, определяют соотношение дочернего элемента iframe в 100% от его родительского элемента (videoWrapper). Они задают коэффициент для сторон адаптивного макета.
Так выглядит стандартный макет сайта
html < font-size:100%; >/* так мы сбросили размер шрифта у HTML */
Теперь нужно установить размеры шрифтов, отвечающих необходимым в вашем случае значениям (font-size указывается в относительных единицах rem):
@media (min-width:650px) < body > @media (min-width:970px) < body > @media (min-width:1200px) < body >
Отзывчивые темы или или темы с отзывчивыми макетами есть в большинстве современных CMS
Например, в том же WordPress доступно много тем с адаптивными свойствами, как платных, так и бесплатных. После выбора темы остается только заполнить сайт собственным контентом.
На themeforest.net можно найти крутые темы с готовой адаптивной версткой страниц

Резюме
С каждым годом разнообразие устройств, на которых можно просматривать сайты, увеличивается. Сегодня — это не только десктопы и смартфоны, но и телевизоры, планшеты, игровые приставки, умные браслеты и даже холодильники. То, что макет сайта автоматически меняется на экране смартфона и на экране ноутбука — также стало привычным делом для нас. Но так было далеко не всегда.
Следуя вышеописанным шагам, вы сможете внедрить адаптивную вёрстку максимально эффективно и улучшить юзабилити своего сайта для каждого пользователя, который его посещает. Количество усилий, затраченных на внедрение адаптивности, прямо пропорционально удовлетворению конечного пользователя от работы на вашем сайте.
Помните: пользователи ожидают, что любой сайт должен идеально открываться на их устройстве. И если это не так — они очень расстраиваются. И сразу же уходят.
Если адаптивная верстка не учитывает часто используемые в 2023 году разрешения, сайт рискует оказаться на задворках страницы результатов поиска (вырастет процент отказов, пользователи будут с него уходить). Плохие поведенческие факторы — негативно скажутся на позициях сайта. Избежать вышеуказанных негативных последствий можно, внедрив качественную адаптивную вёрстку страниц.
Веб-разработка для начинающих
Записывайтесь и за 6 недель освойте адаптивную вёрстку, JavaScript и получите мощный проект в портфолио.