Пример адаптивной страницы html. SquadFree – бесплатный шаблон на Bootstrap HTML5
Адаптивная вёрстка сайта позволяет веб-страницам автоматически подстраиваться под экраны планшетов и смартфонов. Мобильный интернет-трафик растёт с каждым годом и чтобы эффективно обрабатывать этот трафик, нужно предлагать пользователям адаптивные сайты с удобным интерфейсом.
Поисковые системы используют ряд критериев для оценки адаптивности сайта при просмотре на мобильных устройствах. 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"); });
Представляю очередной, замечательно проработанный Html-шаблон для создания сайта.
ASSETS — это мощный, разработанный в чистом минималистичном стиле, адаптивный HTML-шаблон, который отлично подойдет под создание сайтов и блогов различной тематики. Минимализм в дизайне шаблона, совсем не означает отсутствие ярких, привлекающих внимание пользователей, элементов интерфейса. Верстка шаблона выполнена очень качественно, с использованием современных стандартов и технологий HTML5, CSS3 и jQuery.
ASSETS очень гибкий, легкий для настройки шаблон, с довольно хорошим и объемным набором готовых страниц. В набор шаблона так же включены все необходимые элементы управления, обширная библиотека javascript плагинов jQuery, для решения различных задач, от создания простейшего виджета в стиле «аккордеон», до организации на сайте полномасштабной галереи изображений.
Адаптивный и гибкий макет шаблона ASSETS, с диапазоном изменения ширины от 330px до 960px
, подразумевает корректное отображение страниц сайта на экранах мобильных устройств, при этом все элементы прекрасно перестраиваются в соответствии с размерами экрана.
- HTML5, CSS3 и JQuery
- Адаптивный макет
- Фильтр работ в портфолио с CSS3 анимацией
- Рабочий виджет Flickr
- Гибкие настройки вывода изображений и видео
- Галерея работ в портфолио с помощью JQuery
- Прайс-лист таблицы
- Страницы Галереи
- Макет страницы для блога
- Слайдеры с поддержкой сенсорного ввода
- Встроенные рабочие карты Google Map
- Выпадающее меню на JQuery и другие полезные плагины
Отдельно стоит отметить то, что в состав шаблона включен и php-обработчик , для отправки сообщений через форму обратной связи на странице контактов. Согласитесь, не совсем обычно, я бы даже сказал, совсем необычно, для бесплатной версии шаблона.
В общем, что тут воду лить. Посмотрите лучше живой пример работы шаблона. Пробежитесь по страницам, попробуйте, так сказать, на ощупь все элементы управления и если зацепит, скачивайте. Шаблон абсолютно бесплатный, по крайней мере мне так кажется))).
Для особо не внимательных, или особо одаренных, в который раз хочу пояснить:
Данный шаблон разработан с использованием верстки html+css и уж точно не является темой оформления WordPress. Хотя при огромном желании и терпении, можно выполнить интеграцию в WP.
Актуальный и простой шаблон сайта Шаблон отличается логичной структурой и продуманной адаптацией под разные разрешения.
Необычный адаптивный шаблон для лендинга бесплатно
Шаблон имеет вполне стандартную одностраничную структуру, но выделяет его слайдер баннер, разделенный на четыре активные зоны.
Современные шаблоны сайтов бесплатно для любых целей
Данный шаблон создан с применением самых современных веб-технологий, что позволяет ему быстро и корректно работать с любыми браузерами и устройствами.
Быстро скачать бесплатно шаблон сайта html5 для музыкального ресурса
Темный адаптивный шаблон может стать хорошей основой для создания сайта музыкальной группы или проекта с анонсами мероприятий.
Можно скачать шаблон сайта html с ярким дизайном
Концепция этого шаблона отличается тем, что разработчики главный акцент сделали на слайдере с возможностью ручного управления прокруткой.
Красивые адаптивные шаблоны скачать бесплатно для блога
Стильный шаблон для персонального блога, содержащий на главной странице, кроме стандартных элементов, отдельный блок "Обо мне".
Скачать шаблон для блога без регистрации
Хороший шаблон для информационных ресурсов. Контент публикуется в 2 колонки, а каждая публикация сопровождается превью-картиной.
Для корпоративного шаблон сайта скачать
Шаблон имеет привлекательный лаконичный дизайн, сочетающий черный фон, синее главное меню и оранжевую подсветку элементов управления.
Креативные адаптивные шаблоны html5 для фотостудии
Главным дизайнерским элементом этого адаптивного шаблона является слайдер, который эффектно смотрится на темном фоне.
Шаблон сайта визитки бесплатно для автосервиса
Шаблон имеет классическую структуру из 6 страниц, переход на которые осуществляет по средства горизонтального главного меню.
Современные и красивые бесплатные шаблоны сайтов html5
В этом шаблоне дизайнеру удалось гармонично совместить минималистичную шапку сайта с большим слайдером фотографий.
Скачать шаблон сайта мистического или фантастического направления
Фон и элементы управления этого адаптивного шаблона выполнены в мрачном стиле. Он подходит для игровых порталов или блогом соответствующей тематики.
Скачать html шаблон сайта универсальной тематики
Адаптивный шаблон, в своей верхней части, имеет большую презентационную зону, где размещается логотип, заголовок и основное предложение.
Шаблон адаптивного сайта html для медицинской сферы
Изначально шаблон разрабатывался в качестве универсального решения для сайтов медицинских учреждений. Но его гармоничный бело-синий дизайн хорошо подходит и для других тематик.
Адаптивный шаблон видео сайта html5 скачать бесплатно
Адаптивный шаблон создан для реализации онлайн-кинотетров, но может быть успешно использован и в других сферах.
Хороший шаблон html5 для кулинарной тематики
Шапка и фон этого шаблона выполнены с применением рисунка текстуры натурального дерева. Такое дизайнерское решение будет отлично сочетаться с фотографиями пищи.
Интересный бело-серый адаптивный шаблон сайта html5 скачать бесплатно
Шаблон выполнен в спокойной цветовой гамме. Большая шапка идеально подходит для стильного логотипа компании.
Адаптивная посадочная страница сайта студии
Шаблон имеет легкий привлекательный дизайн, который можно с уверенностью назвать актуальным. При скроллинге заметна основная концепция - главная страница выполнена контрастными полосами, которые концентрируют внимание.
Адаптивная HTML5 посадочная страница с фиксированным меню
Данный адаптивный шаблон просто отлично подходит для создания таких популярных сегодня Landing Page. Стоит отметить, что при разработке применялись современные графические и маркетинговые решения.
Адаптивный HTML5 шаблон сайта визитки с плиточным интерфейсом
Этот адаптивный шаблон с плиточным интерфейсом идеально подходит для создания сайта визитки. Хотя, после определенной доработки, его можно использоваться в качестве основы для коммерческого проекта по продаже услуг или товаров.
Темный шаблон с эффектным слайдером в шапке
Этот адаптивный шаблон имеет привлекательный и стильный современный дизайн. Изюминкой является большой баннер с красивыми графическими эффектами, он позволяет демонстрировать изображение, заголовок, а также CTA-элемент в виде контрастной кнопки с призывом.
Шаблон синего цвета с классической структурой
Адаптивный шаблон с классической структурой. Отличный вариант для создания корпоративного сайта, а еще, при желании, шаблон позволяет создать коммерческий проект.
Адаптивный шаблон сайта компании в серо-голубых тонах
Данный адаптивный шаблон в серо-голубых тонах может стать основой хорошего сайта компании, портфолио или персонального сайта.
Адаптивный шаблон агентства на Bootstrap
Этот адаптивный шаблон можно смело назвать премиальным, несмотря на его бесплатность, он может похвастаться элементами, которые не всегда встречаются в платных шаблонах. Элементы сайта, при первой сессии, загружаются с красивыми графическими эффектами.
Адаптивный шаблон галереи / портфолио: LiquidGem
Адаптивный шаблон галереи / портфолио. В шапке есть слайдер с фото без элементов управления, плиточный интерфейс для публикаций и форма обратной связи в подвале.
Адаптивный шаблон блога / портфолио: Serendipity
Этот адаптивный шаблон полностью заточен под создание блога с самым разным содержимым. Здесь можно размещать классические текстовые посты с главным изображением на всю ширину ленты или добавлять графический контент в виде галереи.