Меню
ГлавнаяОшибки

Что такое адаптивная верстка. Адаптивная вёрстка наHTML5 и CSS3 Что вы сможете после прохождения этого курса

Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

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

Адаптивная сайта сегодня создается при помощи языка разметки HTML5 и каскадных таблиц стилей CCS3. Но до того момента, как соответствующие технологии стали стандартом для всех популярных браузеров, для соответствующих целей использовался язык программирования JavaScript. Еще раньше (до 2010-го года) приходилось создавать несколько вариантов одних и тех же страниц, но с разной разметкой, чтобы разрабатываемый ими сайт правильно отображался на различных экранах.

Для чего нужна адаптивная верстка страницы

До относительно недавнего времени при заходе на многие сайты в нижней части браузера можно было увидеть ползунок, обеспечивающий скроллинг страницы по горизонтали. Такое происходило, например, если окно интернет-обозревателя не было развернуто на весь экран, а занимало сравнительно небольшую его площадь. Также это можно было почти всегда видеть, когда разрешение экрана, на который выводилось изображение, составляло 800 на 600 или, тем более, 640 на 480 пикселей.

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

Почему и когда появилася адаптивный дизайн?

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

  • массовый приток в интернет новых пользователей;
  • появление множества устройств с разными разрешениями экранов;
  • прессинг со стороны поисковиков, которые стали применять санкции в отношении сайтов, на которых присутствовали несколько вариантов страниц с одним и тем же контентом.

Человеком, который первым создал , официально является веб-дизайнер Итан Маркотт. В середине 2010-го года им был опубликован материал, в котором он рассказывал о технологии, которая должна решить проблему нормального отображения веб-страниц в браузерах с разным разрешением рабочей области.

Спустя некоторое время другой и известный подкастер предложил дополнения к понятиям, о которых рассказывал его коллега.

При помощи чего и как создается адаптивная верстка?

Прежде чем приступить к рассмотрению вопроса, который касается того, как сделать адаптивную верстку, необходимо кратко рассмотреть основные применяемые технологии. Сейчас их две: HTML5 и CSS3. До недавнего времени применялись HTML4 и CSS2, но чтобы при помощи них можно было создать универсальный дизайн, приходилось использовать еще и JavaScript.

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

Именно в третьего поколения появилось правило "media queries", используя которое верстальщик может создавать отдельные классы для каждого конкретного разрешения.

Очень важный момент!

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

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

Простой пример адаптивной верстки

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

Вначале при помощи HTML разместим на странице сам элемент:

Тег DIV – указывает, что все, что в нем заключено, является отдельным блоком. Когда на странице много таких блоков, указывается атрибут "class". Это необходимо, чтобы браузер понял, какое правило применять для конкретного блока.

Теперь необходимо создать непосредственно само правило, так называемый,

CSS-контейнер:

Div { width: 100%; text-align: center; } div img{ wight: 100%; height: auto; }

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

Проверка адаптивной верстки

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

Можно сделать еще проще. Чтобы проверить, работает ли адаптивный дизайн, нужно зажать CTRL, а затем нажать на "+" или "-". После этого действия страница должна увеличиться или уменьшиться соответственно, но элемент, к которому применена адаптивная верстка, сохранит соотношение своих пропорций (или сделает что-то другое, то, что было указано в правилах).

Инструменты, упрощающие верстку адаптивного дизайна

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

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

Чтобы начать его использовать необходимо, во-первых, получить знания непосредственно о самих CSS3 и HTML5, а затем изучить особенности фреймворка. Однако, поняв большую часть тонкостей работы с ним, впоследствии можно многократно сократить время на разработку адаптивного дизайна веб-сайтов.

*Bootstrap – это ПО с открытым исходным кодом, разработанной корпорацией Twitter Inc. Распространяется на бесплатной основе и имеет широкое сообщество, у которого всегда можно попросить совета.

Адаптивная вёрстка сайта позволяет веб-страницам автоматически подстраиваться под экраны планшетов и смартфонов. Мобильный интернет-трафик растёт с каждым годом и чтобы эффективно обрабатывать этот трафик, нужно предлагать пользователям адаптивные сайты с удобным интерфейсом.

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

Проверить отображение страницы на мобильных устройствах можно на сервисах и .

Рис. 1. Мобильная выдача Яндекса и Google с пометкой о дружелюбности сайта к мобильным устройствам Что такое адаптивная вёрстка

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

Основные приёмы создания адаптивного сайта приведены в статье . Для отзывчивого дизайна ширина основного контейнера сайта задаётся в % , при этом она может быть равна как 100% ширины окна браузера, так и меньше. Ширина столбцов сетки также задаётся в % . В адаптивном дизайне ширина основного контейнера и столбцов сетки фиксируется с помощью значений в px .

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

Вёрстка главной страницы

Страница состоит из трёх основных блоков: верхний колонтитул (шапка), контейнер-обёртка для основного содержимого и сайдбара, и нижний колонтитул (футер). В качестве переломных точек дизайна возьмём 768px и 480px .

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


Рис. 2. Пример адаптивной верстки 1. Метатеги и раздел

1) Добавим в раздел необходимые файлы — ссылку на используемые шрифты, библиотеку jQuery, а также плагин prefixfree (чтобы не писать для свойств браузерные префиксы):

Адаптивная вёрстка сайта

2. Шапка страницы

В шапке страницы поместим следующие элементы-контейнеры:
логотип