Теория адаптивной верстки | | Уроки MODx Evo
Адаптивная верстка сайта
Теоретическая часть
Веб-дизайнерам всегда приходилось решать задачу разработки под различные размеры экрана, от экранов ноутбуков шириной 760 пикселов до огромных широкоэкранных дисплеев. С ростом числа смартфонов и планшетных компьютеров разработка под широкий диапазон экранов с различной шириной и высотой стала еще актуальнее. Некоторые компании зашли так далеко, что стали создавать отдельные веб-сайты, предназначенные только для мобильных устройств. Но при дефиците времени, средств и технических знаний для разработки двух сайтов и программы для веб-сервера, предоставляющей нужный сайт тому или иному устройству, веб-сайты исключительно для мобильных устройств стали не актуальными.
К счастью, есть еще один, более простой подход, позволяющий создать сайт, адаптируемый к устройствам с различной шириной экрана. Эта технология, получившая название адаптивный веб-дизайн
Термин адаптивный веб-дизайн был придуман Итаном Маркоттом. Итан объеденил три существующие методики (макет гибкой сетки, гибкие изображения и медиазапросы) в единый подход и назвал его адаптивным веб-дизайном.
Результат адаптивного дизайна – адаптивные сайты, которыми удобно пользоваться независимо от того, на каком устройстве они просматриваются. Сегодня эта концепция – не прихоть, а важный тренд развития Сети. И речь идет не просто о «тянущемся» сайте, а о его «умном» приспособлении к любому устройству. Пользователю, который использует большой монитор, необходимо несколько колонок текста. Тому же, кто зашел на сайт с мобильного телефона – лишь тот контент, который нужен ему в дороге.
Рисунок 2 – Внешний вид сайта web-grafika.pro на экранах с разным разрешением
В современном мире усиливается тенденция перехода от компьютеров к более компактным устройствам – таким, как планшеты и телефоны. И потому мы не можем и далее игнорировать тот факт, что все чаще и чаще пользователи совершают покупки именно с таких устройств, и в этой связи предпочтения и потребности клиентов претерпевают изменения. Игнорирование этого факта чревато упущением потенциальной прибыли.
По оценкам экспертов тенденция увеличения мобильного трафика сохранится, и степень проникновения мобильного интернета будет стремительно расти.
Также не стоит упускать тот факт, что мобильные пользователи намного активнее своих «стационарных» коллег: они больше времени проводят онлайн и готовы вступать в живую коммуникацию с сайтами. Странно не замечать очевидного – будущее за мобильными устройствами. Для электронных коммерсантов игнорировать этот тренд, по меньшей мере, беспечно.
Приемы адаптивной верстки
Гибкий «резиновый» макет
Для создания адаптивного веб-дизайна необходимы три составляющие: гибкий макет, гибкие изображения и медиазапросы.
Окно браузера может принимать любые форму и размеры в соответствии с прихотями пользователя или размерами устройств. Содержимое страниц должно быть гибким, поэтому необходим «резиновый» макет.
Для того чтобы было проще сделать «резиновый» макет, необходимо пиксельные показатели фиксированной ширины преобразовать в пропорциональные процентные значения. Ширина элемента в пикселах делится на ширину главного контейнера.
Пример: 940px/960px=0.9791666=97.91666%
Ширину главного контейнера тоже необходимо перевести в проценты, обычно это 100%.
В коде ниже показаны процентные значения главного контейнера, шапки и основного блока.
#conteiner {
margin-right: auto;
margin-left: auto;
width: 100%; /*удерживание самого дальнего элемента div*/
max-width: 1200px; /*макс. ширина в пикс.*/
min-width: 280px; /*мин. ширина в пикс.*/
}
header {
width: 100%; /*Ширина в % */
height: 100%;/*Высота в %*/
}
aside {
width: 29.16666%; /*Основной блок имеет ширину 350px/1200*/
}
Так же существует необходимость перевести пиксельные значения размеров шрифтов в относительные единицы em. Чтобы при различных экранах устройств шрифт подстраивался под размер экрана, т.е. был гибким.
Все настольные современные браузеры используют 16px в качестве размера шрифта по умолчанию (если только другое значение не будет задано явным образом). Следовательно, изначальное применение любого из приведенных далее правил к тегу <body> обеспечит одинаковый результат:
font-size: 100%; font-size: 16px; font-size: 1em;
Например:
font-size: 3em; /*48px/16*/ font-size: 0.75em; /*12px/16*/
1em=16px, em определяет соотношение ширины/высоты конкретной буквы и размера конкретного шрифта в пунктах.
Гибкие изображения
Заставить изображения масштабироваться пропорционально «резиновому» дизайну для современных браузеров не составляет особого труда. Для этого нужно лишь объявить в CSS следующее:
img {max-width: 100%;}
В результате все изображения будут масштабироваться вплоть до 100% ширины их элемента-контейнера.
Пример:
img {max-width: 45%;}
Более того, аналогичный атрибут и свойство могут быть применены к другим мультимедиа. Например:
img.object.video.embed {max-width: 100%;}
Медиазапросы
Без такого CSS-модуля, как медиазапросы, мы не смогли бы нацеливать отдельные CSS-стили на определенные характеристики устройств, например ширину области просмотра.
При создании адаптивных веб-дизайнов наиболее часто используемые медиазапросы касаются ширины областей просмотра устройств (width) и ширины экранов (device-width).
В CSS-коде ниже показано как меняется цвет фона страницы при различных размерах окна браузера.
body {background-color: grey;} /*Основной фон страницы серый*/
@media screen and (max-width: 960px) {
body { background-color: red;}
}/*При максимальной ширине 960px цвет меняется на красный*/
@media screen and (max-width: 768px) {
body { background-color: orange;}
}/*При ширине 768px цвет меняется на оранжевый*/
@media screen and (max-width: 550px) {
body { background-color: yellow;}
}/*При ширине 550px цвет меняется на желтый*/
@media screen and (max-width: 320px) {
body { background-color: green;}
}/*При ширине 320px цвет меняется на зеленый*/
Можно задавать тип устройства в атрибуте media тега <link>. Для этого необходимо указать ссылку в тегах <head> в HTML-коде:
<link real=»stylesheet» type=»text/css» media=»screen» href=»screenstyle.css»>
В данном коде используется устройство с экраном (screen).
Можно задать ориентацию экрана устройства:
<link real=»stylesheet» media=»screen and (orientation: portrait)» href=»portrait-screen.css» />
В данном коде выражение медиазапроса сначала спрашивает о типе устройства (с экраном), а затем – о характеристике (в книжной ориентации). Таблица стилей portrait-screen.css станет загружаться, если речь будет идти о любом устройстве с экраном в книжной ориентации.
При фиксированном веб-дизайне мобильные браузеры сжимают страницу до таких размеров, чтобы она полностью отображалась в области просмотра. Для того чтобы мобильные браузеры не меняли автоматически размер страницы:
<meta name=»viewport» content=»width=device-width, initial-scale=1.0″ />
В данном коде мы указали значение initial-scale 1.0, в результате чего мобильный браузер будет обрабатывать страницу, придавая ей размер равной 100% от величины своей области просмотра.
В медиазапросы включают стили, которые изменяются при определенных размерах экрана. Те стили, которые не изменяются не указывают:
@media screen and (max-width: 320px) {
body { background-color: green;}
aside {font-size: 0.8em;
font-family: Verdana, Helvetica, "Lucida Grande", sans-serif;}
}
Использование фреймворков
Фреймворки для мобильной верстки значительно облегчают верстку адаптивных сайтов, т.к. имеют множество встроенных стилей, библиотек, шаблонов, тем, скриптов и т.п.
К недостаткам можно отнести избыточность кода, например, стилей, которые подключаются, как правило, в верхней части web-страницы, обрабатываются браузером, но при верстке сайта большая часть этих стилей может быть не использована.
На сегодняшний день существует множество таких фреймворков:
- Bootstrap
- Skeleton
- Foundation
- Semantic UI
- и другие.
Для освоения адаптивной верстки мы будем знакомиться с фреймворком Bootstrap (http://getbootstrap.ru)
Перейти к уроку 1 по изучению сетки Bootstrap
Адаптивная верстка с нуля: бесплатный видеокурс 8 уроков
Будь вкурсе свежих уроков!
В категории: Курсы Frontend — HTML, CSS и JavaScript
Будь вкурсе самого свежего материала. Где мы отправляем статьи, видео и много чего интересного.
556 просмотров
В данном курсе будет показан более продвинутый процесс вёрстки сайтов с использованием Sass (метаязык на основе CSS). К тому же автор будет использовать GIT (система управления версиями). Вёрстка сайта и написание кода автор будет делать в редакторе VS Code а работа с макетом PSD будет производится в программе Avocode.
Первые 2 урока будут посвящены настройке VS Code и Avocode. С 3 по 9 урок практические занятия, автор на практике будет показывать, как сверстать адаптивный лендинг на примере реального заказа. Цель курса показать упрощённый метод вёрстки адаптивных и современных сайтов.
Что такое адаптивная вёрстка
Простыми словами адаптивная вёрстка (адаптивный дизайн или отзывчивый дизайн) – это подстройка ширины сайта под любые гаджеты, включая ПК, ноутбуки, планшеты и смартфоны. Данная технология позволяет отобразить контент более читабельным на мобильных устройствах. Проще говоря если посмотреть на сайт без адаптивной вёрстки со смартфона или планшета, то текст невозможно прочитать без средств масштабирования.
Когда популярность мобильных устройств возросла, увеличился мобильный трафик, что привело к тому что сайты требовали к себе отзывчивое отображение. Более того, вскоре как мобильный трафик превысил процент заходов с ПК, поисковые системы Google и Яндекс поставили привилегии для сайтов с адаптивной вёрсткой и быстрой загрузкой. Со временем адаптивный дизайн стал важным требованием при разработке сайтов.
Но не стоит так пугаться слова «Технология». В самом процессе вёрстки это лишь установка условий в CSS-коде, которые активируются и применяют нужные свойства если браузер достигает определённой ширины или высоты. В исходном варианте мы получаем несколько условий под разные размеры экранов и гаджеты.
Адаптивная вёрстка с технической точки зрения
Сама вёрстка начинается с максимального расширения экрана – 1920х1080px. Когда сайт полностью свёрстан, начинается подгонка под различные расширения экрана, в этом вам может помочь браузер Google Chrome. В данном браузере существует консоль, которая помогает отследить как визуально выглядит сайт на различных размерах экрана. Достаточно нажать клавишу на клавиатуре F12, либо нажать правой кнопкой мыши на нужный элемент и выбрать «Просмотреть код» и браузер выведет HTML-разметку и CSS-свойства элементов.
Во многих современных браузерах есть консоль для просмотра кода, где вы в режиме реального времени можете изменить любые стили CSS или HTML-разметку. Браузер Chrome и Яндекс.Браузер предлагает широкий набор для разработчиков, к примеру, можно найти ошибки в JS-коде или найти нужный фрагмент HTML-разметки.
Метатег viewport для адаптивной вёрстки
Пример метатега, который адаптирует сайт под мобильную вёрстку:
<meta name="viewport" content="width=device-width, initial-scale=1">Данный тег ставиться внутри тега <head></head> где содержаться заголовки HTML страницы. Основные настройки хранятся внутри атрибута content, где width определяет до какой ширины будет сужаться сайт, например width=768px означает что весь контент сайта будет сжиматься до 768px, но в случае если один из элементов будет шириной к примеру 1200px, то при ширине окна 768px мы увидим горизонтальную полосу прокрутки. width=device-width – означает что сайт будет автоматический подстраивается под ширину окна браузера.
Медиа-запросы
Пример стандартных медиа-запросов:
@media(max-width:1600px){
body{font-size:16px;}
}
@media(max-width:1200px){
body{font-size:14px;}
}Суть этого кода в том, что если ширина браузера достигнет 1200px и меньше, тогда размер шрифта всего сайта будет ровняться 14px. Данную конструкцию зачастую ставят после всех свойств, чтобы данные свойства перезаписали уже существующие.
Вы можете поделиться или сохранить для себя этот урок в социальных сетях:
Оставьте свой отзыв, для улучшения качества. Сейчас: 0 отзывов
Адаптивная вёрстка — Блог Академии — HTML Academy
В чём разница между резиновой, адаптивной и отзывчивой вёрсткой? — спрашивают наши зрители Екатерина и Константин — как правильно их применять? Давайте разберёмся в отличиях подходов и попробуем сформулировать один общий вместо трёх.
Когда мобильного веба не было даже в самых смелых фантазиях, весь интернет был на десктопных компьютерах с небольшими экранами. Оптимизирован для разрешения 1024 на 768 и браузера Internet Explorer 5! — гордо писали тогда на сайтах. Но прошло время, экраны подросли и пришлось к этому как-то подстраиваться. Сначала это были просто резиновые таблицы: колонки по 25%, содержимое 50%, а в отдельной строке colspan=3 и распорка для минимальной ширины. Надеюсь, вы не поняли о чём я сечас говорил.
Резиновая вёрстка — это когда вы задаёте всему макету и отдельным его частям не фиксированную ширину, а эластичную — в процентах. За исключением минимальной и максимальной ширины. Высоту в вебе в принципе не принято задавать — обычно она подстраивается под содержимое. Фикс или резина? — спрашивали верстальщики 2000-х про макет и втайне надеялись на второе, поинтереснее. Сейчас сложно представить, но когда-то это было прорывной идеей, которая усложнила вёрстку, но сделала первый шаг в правильном пути.
Таблицы для раскладки ушли, а резиновая вёрстка осталась. Если у вас эластичные флоаты, флексы… да хоть гриды! — это всё равно резиновая вёрстка. Но если ширина внешнего контейнера зафиксирована — это уже фикс, сколько бы ни было резины внутри. Чуть более универсальный фикс, но всё равно. В общем, главное чтобы сайт двигался так или иначе вместе с окном, а не торчал кирпичом где-то в центре или с краю.
Когда расширился круг устройств с интернетом и появились первые мобильные браузеры — встала задача как-то подстраиваться под них. Простая резина здесь уже не справлялась — нужно было переписывать стили. Одной из первых, в 2006 году появилась техника адаптивной раскладки Марка ван ден Доббельстина. В статье на A List Apart Марк предложил добавлять классы при загрузке или ресайзе окна и на каждый диапазон вешать стили. До первой реализации медиавыражений в Safari оставалось два года.
Когда в начале десятых годов появилось для чего адаптировать и чем адаптировать — мобильные браузеры и медиавыражения — вышли книги, давшие названия подходам: «Адаптивный веб-дизайн» Аарона Густавсона и «Отзывчивый веб-дизайн» Итана Маркота. Подходы Аарона и Итана продолжали идеи Марка, но с более современными технологиями и несколько отличались направлением мысли.
«Адаптивный веб-дизайн» Аарона предлагал гибко адаптировать сайты к возможностям устройств и браузеров. Важной частью этой философии был ненавязчивый JavaScript с прогрессивным улучшением — и всё это поверх семантической разметки. Хотя Аарон писал не совсем об этом, сегодня принято считать, что главное в адаптивной вёрстке — привязка к конкретным разрешениям и устройствам. Стили переключаются от одного брейкпоинта к другому, то есть у вас есть фиксированные макеты для iPad и iPhone, а то, что между ними вас не волнует.
«Отзывчивый веб-дизайн» Итана ставил во главу три вещи: резиновый макет, гибкие картинки и медиавыражения. Все размеры и отступы Итан предлагал указывать в процентах с сумасшедшими дробями для точности. Отличительной чертой подхода стало плавное изменение сайта, с ориентацией не на конкретные устройства, а на содержимое. То есть ваш резиновый макет хорошо выглядит не только на iPhone и iPad, но и в любой точке между ними.
Чуть позже Итан сформулировал ещё один важный принцип в книге «Сначала мобильные». Если до тех пор отправной точкой для адаптации вёрстки служила десктопная версия, то он предложил перевернуть схему и начинать с мобильной версии, а потом её улучшать. Почему так? Потому, что усложнять простое проще, чем упрощать сложное. Вдуматесь! А ещё потому, что нет соблазна просто спрятать сложно адаптируемое и обделить мобильных пользователей.
Ну как, стало понятно? Вот адаптивная, вот отзывчивая… М-м, нет, не очень. Из-за путаницы между техникой адаптивной раскладки и философией адаптивного веб-дизайна, из-за того, что все эти подходы прекрасно сочетаются и уже не проследить чёткую границу между ними — из-за всего этого, я плюнул на терминологическую чистоту и стал называть всё это адаптивным дизайном или адаптивной вёрсткой. Это понятие всегда было достаточно широким, чтобы вместить все остальные способы.
Да и принцип дискретной адаптации от размеров устройств и без резины имел смысл лет 10 назад. При сегодняшнем разнообразии устройств полагаться на конкретные размеры и жёстко переключаться между ними — значит однажды очень больно промахнуться. Притом, никто вам не мешает при полностью резиновой вёрстке дописывать адаптацию под нужные разрешения.
Ну и как теперь верстать? Просто! Сначала делаете мобильный резиновый макет, который хорошо вписывается в небольшие устройства. А когда размеры экрана или окна начинают расти — начинаете использовать появившееся пространство для улучшения интерфейса. Появляется боковая колонка, вторая, растут размеры картинок и подгружаются новые разрешения и так далее. То есть медиавыражения меняют стили не когда вы дошли до экрана самого модного телефона, а когда это нужно для содержимого сайта и удобства пользователя. Мы именно так и учим делать на интенсиве по продвинутой вёрстке.
Чтобы сделать хороший адаптивный сайт, нужно понимать много нюансов: вьюпорт, медиавыражения, адаптивные картинки и другое. Сегодня мы сделали первый шаг и разобрались с подходами: он оказывается всего один. Про остальное ещё поговорим!
Верстка сайта под мобильные устройства| Видеокурс по основам адаптивной верстки
- Тема: Адаптивная верстка
- Время ролика: 00:11:02
- Cложность: легкая
- Автор: Бернацкий Андрей
Сегодня выходить в интернет и просматривать веб-страницы можно не только с компьютера, но и с планшета, электронной книги, смартфона и даже с помощью экрана, расположенного на двери холодильника.
Насколько важно сегодня адаптировать свои сайты под различные устройства? Об этом поговорим в данном уроке.
Рассмотрим список наиболее популярных разрешений, под которые следует адаптировать сайт.
- Тема: Адаптивная верстка
- Время ролика: 00:33:22
- Cложность: легкая
- Автор: Бернацкий Андрей
В уроке мы подробно рассмотрим работу с медиазапросами. Медиазапросы предоставляют возможность выбора разных стилей в зависимости от возможностей пользовательского дисплея или устройства, таких как ширина области просмотра, разрешение экрана.
Медиазапросы — это отличный инструментдля создания веб сайтов, оптимизированных для отображения на мобильных устройствах.
- Тема: Адаптивная верстка
- Время ролика: 00:17:41
- Cложность: легкая
- Автор: Бернацкий Андрей
Сегодня практически на каждой веб-странице присутствуют изображения. Но в условиях адаптивной верстки нам необходимо на больших экранах показывать изображение в их реальных размерах, а для маленьких экранов уменьшать размеры изображений. В уроке мы рассмотрим методы работы с изображениями в адаптивном дизайне.
- Тема: Адаптивная верстка
- Время ролика: 00:13:55
- Cложность: легкая
- Автор: Бернацкий Андрей
В данном уроке мы выполним практический пример верстки учебного макета несложной структуры. Создадим разметку оптимальную для дальнейшей адаптации под мобильные устройства.
- Тема: Адаптивная верстка
- Время ролика: 00:22:14
- Cложность: легкая
- Автор: Бернацкий Андрей
Во втором уроке по верстке учебного макета, мы добьемся красивого отображения макета на всех мобильных устройствах. Используя медиазапросы, мы адаптируем нашу верстку к планшетам и смартфонам. Улучшим верстку, чтобы она не зависела от «контрольных точек» в медиазапросах. Это будет гарантировать нам хорошее отображение верстки в различных устройствах, не зависимо от их разрешений.
Адаптивный дизайн и верстка сайта на видеокурсе от Loftblog
Учение — не только свет, по народной пословице, — оно также и свобода. Ничто так не освобождает человека, как знание… Тургенев И. С.
Добро пожаловать на наш видеокурс, посвященный очень актуальной на сегодняшний день теме — адаптивной верстке сайтов. В наш век мобильных устройств, когда практически у каждого человека, находящегося в сознательном возрасте, есть планшет, мобильный телефон и прочие мобильные чудеса современной цивилизации, с помощью которых можно бродить по лабиринтам всемирной паутины, создание сайтов, которые будут одинаково хорошо отображаться на устройствах с различным разрешением экрана, стало необходимостью.
Три кита адаптивного дизайна
На первом вводном видеоуроке мы поговорим о самом понятии адаптивной верстки и дизайна, узнаем, из чего он состоит и что подразумевается под каждой из его частей.
Итак, адаптивный дизайн держится на трех китах: отзывчивом дизайне (Responsive design), Progressive Enhancement и Mobile first.
Отзывчивый дизайн, или Responsive design
Первый раз термин «отзывчивый дизайн» был упомянут Итаном Маркотом в его статье в мае 2010 г. Само это понятие включает в себя три технологии. Первая из них — Fluid grid (гибкая сетка макета), вторая технология — Flexible Media (весь медиа-контент сайта), и последняя из рассматриваемых технологий отзывчивого дизайна — это Media queiries (медиа-запросы). Все они будут подробно разобраны на следующих видеоуроках нашего курса.
Progressive Enhancement и Graceful degradation
Право авторства такого понятия адаптивного дизайна, как Progressive Enhancement принадлежит известному разработчику Арону Густафсону, который впервые ввел этот термин в своей книге. Под Progressive Enhancement подразумевается постепенное улучшение, когда верстка проекта начинается с самого простого к более сложному, современному, чтобы сайт мог корректно отображаться при помощи самого старого, но еще используемого браузера.
Подход к началу верстки проектов — есть главное отличие этой технологии от другой, совершенно противоположной — Graceful degradation (изящная деградация). При такой верстке разработка проектов идет от самого сложного. навороченного к простому.
Mobile first
Последняя технология, входящая в состав адаптивного дизайна — это Mobile first. Под ней понимается первоочередная разработка проектов для мобильных устройств, а затем уже для стационарных.
Таким образом, на видеоуроке вам станет известно, из чего состоит адаптивная верстка. На полученные на этом занятии знания вы будете опираться при просмотре дальнейших видеоуроков.
Приятного всем просмотра! Учитесь с удовольствием! Всегда ваш Loftblog.
Рекомендуемые курсы