Сегодня мы рассмотрим: Настоящие ценители музыки знают, что для качественного...
Адаптивная вёрстка сайта позволяет веб-страницам автоматически подстраиваться под экраны планшетов и смартфонов. Мобильный интернет-трафик растёт с каждым годом и чтобы эффективно обрабатывать этот трафик, нужно предлагать пользователям адаптивные сайты с удобным интерфейсом.
Поисковые системы используют ряд критериев для оценки адаптивности сайта при просмотре на мобильных устройствах. Google старается упростить пользование Интернетом для владельцев смартфонов и планшетов, отмечая в мобильной выдаче адаптированные под мобильные устройства сайты специальной пометкой mobile-friendly . В Яндексе также работает алгоритм, который отдает предпочтение сайтам с мобильной/адаптивной версией для пользователей в мобильном поиске.
Проверить отображение страницы на мобильных устройствах можно на сервисах и .
Рис. 1. Мобильная выдача Яндекса и Google с пометкой о дружелюбности сайта к мобильным устройствам Что такое адаптивная вёрсткаАдаптивная вёрстка предполагает отсутствие горизонтальной полосы прокрутки и масштабируемых областей при просмотре на любом устройстве, читабельный текст и большие области для кликабельных элементов. С помощью медиазапросов можно управлять компоновкой и расположением блоков на странице, перестраивая шаблон таким образом, чтобы он адаптировался под разные размеры экранов устройств.
Основные приёмы создания адаптивного сайта приведены в статье . Для отзывчивого дизайна ширина основного контейнера сайта задаётся в % , при этом она может быть равна как 100% ширины окна браузера, так и меньше. Ширина столбцов сетки также задаётся в % . В адаптивном дизайне ширина основного контейнера и столбцов сетки фиксируется с помощью значений в px .
Рассматриваемый в данном уроке приём адаптивной резиновой вёрстки отлично сработает на двухколоночном шаблоне, сделав сайт адаптивным и удобным для просмотра на мобильных устройствах. Шаблон предполагает различную компоновку основного содержимого страниц, в этом уроке будет разобрана вёрстка главной страницы.
Вёрстка главной страницыСтраница состоит из трёх основных блоков: верхний колонтитул (шапка), контейнер-обёртка для основного содержимого и сайдбара, и нижний колонтитул (футер). В качестве переломных точек дизайна возьмём 768px и 480px .
В первой точке скроем верхнее меню и переместим сайдбар под контейнер с постами. Во второй точке изменим расположение элементов шапки, отменим позиционирование кнопок социальных сетей в постах и отменим обтекание столбцов подвала страницы.
Рис. 2. Пример адаптивной верстки 1. Метатеги и раздел
1) Добавим в раздел необходимые файлы — ссылку на используемые шрифты, библиотеку jQuery, а также плагин prefixfree (чтобы не писать для свойств браузерные префиксы):
Адаптивная вёрстка сайта
2. Шапка страницыВ шапке страницы поместим следующие элементы-контейнеры:
логотип ;
кнопку для показа/скрытия главного меню ;
главное меню
L O G O
3. Блок с кратким содержанием статьиАнонс статей обернём элементом :
Дизайн Весна
Очень богат русский язык словами, относящимися к временам года и к природным явлениям, с ними связанным.
Продолжить чтение ... 4. Боковая колонкаВ боковую колонку добавим список категорий, последние записи и форму подписки на рассылку:
Категории
Последние записи Подписка на рассылку 5. Нижний колонтитулВ подвале страницы разместим информацию о копирайте, кнопки социальных сетей и ссылку на электронную почту:
Мой блог © 2016 Написать письмо $(".nav-toggle").on("click", function(){ $("#menu").toggleClass("active"); });
6. Общие CSS-стилиОбщие стили, сброс стилей браузера по умолчанию:
*, *:after, *:before { box-sizing: border-box; padding: 0; margin: 0; transition: .5s ease-in-out; /* добавим плавность переходов для всех элементов страницы*/ } ul { list-style: none; } a { text-decoration: none; outline: none; } img { display: block; width: 100%; } h1, h2, h3, h4, h5, h6 { font-family: "Playfair Display"; font-weight: normal; letter-spacing: 1px; } body { font-family: "Open Sans", arial, sans-serif; font-size: 14px; line-height: 1; color: #373737; background: #f7f7f7; } /* добавим очистку потока для всех контейнеров, внутри которых задано обтекание дочерних элементов */ header:after, .container:after, footer:after, .widget-posts-list li:after, #subscribe:after { content: ""; display: table; clear: both; } /* стилевой класс, который управляет шириной контейнера сетки*/ .container { margin: 0 auto; width: 100%; max-width: 960px; padding: 0 15px; }
7. Стили для шапки и её содержимого header { width: 100%; background: white; box-shadow: 3px 3px 1px rgba(0,0,0,.05); padding: 15px 0; margin-bottom: 30px; position: relative; } /* логотип */ .logo { display: block; float: left; } .logo span { color: white; display: inline-block; width: 30px; height: 30px; line-height: 30px; border-radius: 50%; margin: 5px 0; text-align: center; text-shadow: 2px 2px 1px rgba(0,0,0,.4); } .logo span:nth-child(odd) { background: #EF5A42; } .logo span:nth-child(even) { background: #F8B763; } /* меню */ #menu { float: right; } #menu li { display: inline-block; margin-right: 30px; } #menu a { color: #111; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; display: block; line-height: 40px; } #menu a:hover { color: #EF5A42; } #menu li:last-child { margin-right: 0; } /* форма поиска */ #searchform { float: right; margin-left: 46px; display: inline-block; position: relative; } #searchform input { width: 170px; float: left; border: none; padding-left: 10px; height: 40px; overflow: hidden; outline: none; color: #9E9C9C; font-style: italic; } #searchform button { background: transparent; height: 40px; border: none; position: absolute; right: 10px; color: #EF5A42; cursor: pointer; font-size: 18px; } #searchform input:focus { outline: 2px solid #EBEBE3; } /* кнопка переключения меню, появляющаяся при ширине 768px */ .nav-toggle { display: none; position: relative; float: right; width: 40px; height: 40px; margin-left: 20px; background: #EF5A42; cursor: pointer; } .nav-toggle span { display: block; position: absolute; top: 19px; left: 8px; right: 8px; height: 2px; background: white; } .nav-toggle span:before, .nav-toggle span:after { content: ""; position: absolute; display: block; left: 0; width: 100%; height: 2px; background: white; } .nav-toggle span:before { top: -10px; } .nav-toggle span:after { bottom: -10px; } /* класс, который будет добавлен в верхнему меню при нажатии на кнопку и покажет скрытое меню*/ #menu.active { max-height: 123px; } 8. Стили для блока с основным содержимым /* левый контейнер */ .posts-list { margin-bottom: 30px; width: 64%; float: left; } /* блок для статьи */ .post { margin-bottom: 35px; } .post-content p { line-height: 1.5; padding-bottom: 1em; } .post-image { margin-bottom: 30px; } .category { margin-bottom: 15px; } .category a { color: #F8B763; text-transform: uppercase; } .post-title { margin-bottom: 12px; font-size: 26px; } /* блок с кнопкой "продолжить чтение" и кнопками социальных сетей */ .post-footer { border-top: 1px solid #EBEBE3; border-bottom: 1px solid #EBEBE3; position: relative; margin-top: 15px; } .more-link { position: relative; display: inline-block; font-size: 10px; text-transform: uppercase; color: white; line-height: 44px; padding: 0 22px; background: #3C3D41; letter-spacing: 0.1em; white-space: nowrap; } .more-link:after { content: ""; display: block; position: absolute; width: 0; height: 0; top: 0; right: 0; border: solid transparent; border-width: 22px 18px; border-left-color: #3C3D41; transform: translateX(100%); } .post-social { position: absolute; left: auto; top: 50%; right: 0; text-align: right; transform: translateY(-50%); padding: 0; font-size: 12px; } .post-social a { display: inline-block; margin-left: 8px; color: #F8B763; width: 25px; height: 25px; line-height: 23px; text-align: center; border-radius: 50%; border: 1px solid; } 9. Стили для боковой колонки /* правый контейнер */ aside { width: 33%; float: right; } /* блок для виджетов */ .widget { padding: 20px 15px; background: white; font-size: 13px; margin-bottom: 30px; box-shadow: 3px 3px 1px rgba(0,0,0,.05); } .widget-title { font-size: 18px; padding: 10px; margin-bottom: 20px; text-align: center; border: 2px solid #F8B763; box-shadow: 3px 3px 0 0 #F8B763; } .widget-category-list li { border-bottom: 1px solid #EBEBE3; padding: 10px 0; color: #c6c6c6; font-style: italic; } .widget-category-list li:last-child { border-bottom: none; } .widget-category-list li a { color: #626262; margin-right: 6px; font-style: normal; } .widget-category-list li a:before { content: "\f105"; display: inline-block; font-family: "FontAwesome"; margin-right: 10px; color: #c6c6c6; } .widget-posts-list li { border-top: 1px solid #EBEBE3; padding: 15px 0; } .widget-posts-list li:nth-child(1) { border-top: none; } .post-image-small { width: 30%; float: left; margin-right: 15px; } .widget-post-title { float: left; } /* форма подписки */ #subscribe { position: relative; width: 100%; padding: 15px 0; } #subscribe input { width: 100%; display: block; float: left; border: 2px solid #EBEBE3; padding: 0 0 0 10px; height: 40px; position: relative; outline: none; color: #9E9C9C; font-style: italic; } #subscribe button { padding: 0 15px; background: transparent; height: 40px; border: none; position: absolute; right: 0; color: #EF5A42; cursor: pointer; font-size: 18px; } #subscribe input:focus + button { background: #EF5A42; color: white; } 10. Стили для нижнего колонтитулаПодвал сайта разделим на три равных столбца:
Footer { padding: 30px 0; background: #3C3D41; color: white; } .footer-col { width: 33.3333333333%; float: left; } .footer-col a { color: white; } .footer-col:last-child { text-align: right; } .social-bar-wrap { text-align: center; } .social-bar-wrap a { padding: 0 7px; font-size: 18px; }
11. Медиа-запросы @media (max-width: 768px) { /* показываем кнопку для переключения верхней навигации */ .nav-toggle { display: block; } header { padding: 10px 0; } /* скрываем верхнее меню, отменяем обтекание, позиционируем его, сместив на высоту шапки сайта */ #menu { max-height: 0; background: white; float: none; position: absolute; overflow: hidden; top: 63px; right: 0; left: 0; margin: 0; padding: 0; z-index: 3; } /* делаем элементы списка блочными, чтобы они располагались друг под другом */ #menu li { display: block; text-align: center; border-bottom: 1px solid #EBEBE3; margin-right: 0; } /* отменяем обтекание левой и правой колонок, устанавливаем им ширину 100%*/ .posts-list, aside { width: 100%; float: none; } .widget-post-title { font-size: 1.5em; } } @media (max-width: 480px) { /* отменяем обтекание для логотипа и выравниваем по центру*/ .logo { float: none; margin: 0 auto 15px; display: table; } .logo span { margin: 0 2px; } /* позиционируем меню на увеличившуюся высоту шапки */ #menu { top: 118px; } /* позиционируем форму поиска по левому краю */ #searchform { float: left; margin-left: 0; } /* убираем верхнюю и нижнюю границы и выравниваем кнопку по центру */ .post-footer { border-top: none; border-bottom: none; text-align: center; } /* отменяем позиционирование кнопок соцсетей */ .post-social { position: static; text-align: center; transform: none; margin-top: 20px; } .widget-post-title { font-size: 1.2em; } /* отменяем обтекание для столбцов подвала страницы */ .footer-col { float: none; margin-bottom: 20px; width: 100%; text-align: center; } .footer-col:last-child { text-align: center; margin-bottom: 0; } } 12. Скрипт для мобильного менюЗа показ-скрытие верхнего меню при клике на кнопку (переключается высота меню - от нулевой до равной её содержимому) отвечает код jQuery, который мы ранее добавили в разметку страницы перед закрывающим тегом :
$(".nav-toggle").on("click", function(){ $("#menu").toggleClass("active"); });
Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».
В частности, эту технологию активно применяют, чтобы сайт одинаково отображался на различных типах устройств: компьютерах/ноутбуках и смартфонах/планшетах с разными размерами дисплеев.
Адаптивная сайта сегодня создается при помощи языка разметки 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. Распространяется на бесплатной основе и имеет широкое сообщество, у которого всегда можно попросить совета.
С появлением мобильных устройств: планшетов и смартфонов, умение делать адаптивную вёрстку веб-страниц
стало очень востребованным.
Это означает, что сайт должен нормально просматриваться на любых устройствах. Ну, а уж, если не точно так же, как он
отображается на стационарном компьютере, то близко к этому. Главное, чтоб с ним было удобно работать:
просматривать, искать что-либо, нажимать на кнопки, и т.д..
Нашёл в сети интересный, бесплатный мини-курс по адаптивной вёрстке сайтов на основе HTML5 и CSS3.
Изучил его.
** Скачать себе этот курс можно, заполнив верхнюю или нижнюю тестовую форму запроса. **
Решил проверить, можно ли(?) сверстать адаптивный ко всем устройствам сайт, БЕЗ использования технологий HTML5 и CSS3 .
Пробую!
Верстал в кодировке "ANSI" , и с полной служебной записью: "HTML 4.01 Transitional" , вместо положенной по правилам HTML5:
Новые тэги: header, section, article не использовал. Оказалось, достаточно блочной вёрстки, как обычно на тэгах div .
Новый атрибут формы у тэгов input "placeholder" (подсказка) в браузере IE8 НЕ сработал. В остальных - работает .
Аналогично. Новый атрибут "типа" у тэгов input type="email" срабатывает только в современных браузерах.
Атрибут "value" использовал по-прежнему для внесения значений в формы.
Самое главное! Сначала сайт верстается на обычном мониторе, а уже потом в тэг head
вносится строчка кода:
Такая запись говорит браузеру (**так объясняется в курсе!
), чтобы он правильно масштабировал
контент страницы
под используемое устройство
.
Хотя, на самом деле, такая запись браузеру
ровным счётом ничего не говорит
. Это "обращение" к поисковикам
.
А вот они уже о-о-очень "ревностно" относятся к наличию/отсутствию подобной записи в тэге head
,
особенно в последнее время. Проверено!
Однако, нужно сказать, что современные браузеры мобильных устройств , похоже, научились всё же читать "чужие письма".
**К примеру. Проводя испытания такой строчки кода, я внёс её в неадаптированную страницу сайта, и... ... ... . И тут же быстро убрал!
Проверив на смартфоне её отображение, увидел, что браузер смартфона выдал "жуть", т.е. показал ПОЛНЫЙ РАЗМЕР страницы, снабдив возможностью длиннющего горизонтального скролла .
Новый атрибут для тэгов img "srcset" в испытываемой версии "HTML 4.01" не работает!
Напомню, и особо выделю, что я никаких медиа-запросов НЕ делал . Испытания же!
Примеры записей в таблице CSSПрежде всего о том, какие(?) проверены свойства CSS и, как(?) они сработали.
Свойство background-size: cover; лучше НЕ использовать . Рисунки "режутся", т.е. выходят за пределы экранов мониторов. Приходится уменьшать масштаб, чтобы их увидеть целиком.
И напротив!
Свойство background-size: contain; работает ОТЛИЧНО! Во всех браузерах! Оптимально для "центровых " рисунков . Оно их великолепно масштабирует под любой размер монитора.
Аналогично.
Это же свойство background-size: contain; сработало ОТЛИЧНО и для "боковых " рисунков , т.е. левых/правых. Пробовал!
Боковые рисунки выводил через тэги span
, прописав им float: left
или right
, но ГЛАВНОЕ!
Главное
, что выводил рисунок, как фоновый на 2 символа неразрывного пробела
, дав тексту размер,
равный высоте фонового рисунка
(**
уменьшив размер текста, рисунок уменьшается пропорционально, без искажений)
.
Схемы вывода ниже.