Адаптивный шаблон

Основы адаптивного дизайна

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

Что такое адаптивный дизайн?

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

Зайдя на сайт с адаптивным шаблоном все меняется, ибо текст «подстраивается» под ваш телефон (разрешение экрана).

Теория (основы)

Думаю, всем известно, что все шаблоны (их стиль) построен на CSS. И адаптивный дизайн — не исключение. Наиболее важное изменение — изменение единиц измерения. Представим, ширина блока 400 пикселей, а значит, что ее надо указывать в процентах (например, 40%).

max-width и width

Тоже очень важная часть в дизайне. Например, ширина нашего сайта 1000 пикселей, но при изменение окна (по ширине, меньше 1000 пикселей), появится горизонтальная прокрутка. Но все поменяется, если мы укажем width: 100%, ибо сайт будет «подстраиваться» под наш экран.

С большими мониторами не так все просто, поскольку текст растянется на весь экран. А получается, если монитор широкоформатный, то текст будет нечитабельным.

Если вам нужно, чтобы сайт остался с такой же шириной, но при этом остался «адаптивным» — надо изменить CSS-код, как указано ниже.

width: 100%; max-width: 1000px; 

min-width и width

Если чуть выше мы ставили максимальную ширину, то здесь мы устанавливаем минимальную ширину. К примеру, если установить минимальную ширину 200 пикселей, то окно браузера достигает этой ширины и оно больше не будет уменьшаться (появится горизонтальная прокрутка).

Практика

Шаблон, который будет выступать в качестве демонострации, будет иметь в себе три составляющих: шапка, основной контент и боковая колонка (сайтбар).

        
 
Логотип 
 
  
 
 
 
 
Основной контент
 
Здесь будет находится основной контент страницы
 
 
   
 
Текст сайтбара
 
Содержимое сайтбара
 
 
  

* < margin: 0; padding: 0; >body < width: 100%; height: 100%; color:#333; background: url(images/body.png) 0px 0px repeat; font-family: "Segoe UI", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size:0.94em; line-height:135%; >h1 < font-size:30px; font-weight:normal; padding:0px 0 0px; line-height:100%; font-style:italic; >a < color: #cd5252; text-decoration:none; >a:hover < color:#963c3c; text-decoration: none; >/* ------------------------------- Структура ----------------------------------*/ /* ------------------------------- Ширина сайта в 1000px ----------------------------------*/ #wrapper < margin-top:40px; border:0px solid #000; width: 100%; max-width:1000px; margin: 0 auto; height: auto !important; >/* ------------------------------- Шапка сайта ----------------------------------*/ #headerInner < border: 0px solid #000; background: #d04942; position:relative; width:100%; max-width:1000px; height:100px; margin:0 auto; margin-top:0px; >.text < margin:15px; >/* ------------------------------- Главный контент ----------------------------------*/ #content #colLeft < border: 0px solid #000; float:left; width:67%; margin-right:0px; background: #85c9cf; >/* ------------------------------- Сайтбар сайта ----------------------------------*/ #content #colRight < position:relative; margin-left:30px; float:left; width:30%; border: 0px solid #1FA2E1; background: #7a9e0e; >#middle:after < content: '.'; display: block; clear: both; visibility: hidden; height: 0; >/*---------------------------- Логотип ------------------------------*/ .logo < position:absolute; left:0px; top:40px; >.logo a

Как вы заметили, ширина шаблона 1000 пикселей. В шаблоне используется width и max-width: о них написано выше.

У шапки ширина все таже — 1000 пикселей. У основного контента (#colLeft) ширина 67%, а у правой колонки — 30%. Отступ между ними 30 пикселей (3%).

Использование media screen

Стоит отметить, что в media screen задается нужное разрешение экрана устройства. Их очень много, можно указывать даже свои, но самые популярные: 320px, 480px, 600px, 768px, 1024px. В моем примере используется два разрешения: 768px и 1024px.

Таким образом выглядит тег media screen в CSS

@media screen and (min-width:200px) and (max-width:1024px)

Как можно увидеть, мы используем максимальную ширину — 1024px. Данное свойство будет предаваться только тогда, когда ширина окна будет меньше 1024 пикселей.

1024 пикселя

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

Вот, что необходимо прописать в CSS

@media screen and (min-width:100px) and (max-width:1024px) < /* размер блока, где находятся главный контент и сайтбар*/ body #wrapper < margin-top:40px; width: 90%; margin: 0 auto; >/* размер шапки сайта*/ body #headerInner < width:90%; margin:0 auto; >/* размер главного контента*/ #wrapper #content #colLeft < width:67%; >/* размер сайтбара*/ #wrapper #content #colRight < margin-left:3%; width:30%; >> /* скобка, закрывающая тег @media screen 

Шапка сайта (#headerInner) имеет новый размер в 90%. Стоит отметить, что для шапки мы не используем max-width, ибо он здесь не нужен. #wrapper — блок, в котором находится основной контент и сайтбар, его ширина тоже 90%. Ширина и сайтбара, и основного контента остаются неизменными, изменился лишь отступ у сайтбара (3%). Это используется для того, чтобы при уменьшение окна сайтбар не «падал» вниз.

768px

Теперь мы пишем настройки для окон, ширина которых 768 пикселей и меньше. Сейчас мы будем распологать сайтбар под основным контентом.

@media screen and (min-width:100px) and (max-width:768px) < #wrapper #colLeft < float:none; width:100%; margin-right:0px; >#wrapper #colRight < margin-left:0px; margin-top:25px; float:none; width:100%; >> 

Для блока основного контента (#colLeft) мы указали ширину 100%, чтобы блок растянулся на весь экран. Также мы убрали выравнивание по левому краю, указав float: none, чтобы сайтбар (#colRight) «уплыл» под основной блок контента.

Для сайтбара ширина та же, а выравнивание по правому боку (float: right;) мы убрали. Ко всему этому, мы добавили отступ (margin-top: 25px;), чтобы эти два блока разделялись.

Для того, чтобы картинки также сужались нужно использовать этот код

Источник

Что такое адаптивная вёрстка страниц сайта: полный гайд, теория и практика

Адаптивная верстка сайта — это формирование структуры документа на базе HTML-разметки, предусматривающей автоматическое изменение страницы в зависимости от размера экрана пользователя. Простыми словами это макет страницы, автоматически подстраивающийся под размер экрана пользователя.

• Теперь Вы можете читать последние новости из мира интернет-маркетинга в мессенджере Telegram на своём мобильном телефоне.
• Для этого вам необходимо подписаться на наш канал.

Помните советскую игру «Тетрис»? Там нужно было складывать падающие блоки конструктора, чтобы они подходили друг к другу по форме фигур.

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

Взгляните на макет страницы:

Адаптивная верстка позволяет просматривать контент без скролла страницы, а характерная для десктопа полоса прокрутки в правой части страницы просто отсутствует.

Адаптивность — важнейшее требование, которое предъявляется к современному сайту, особенно в текущих условиях поисковой оптимизации. И вот почему:

1. Удобство для пользователей . Такие сайты удобны для просмотра на любых устройствах: от смартфонов и планшетов до телевизоров. Если страница остается читаемой только на десктопе, а мобильному пользователю приходится прикладывать определенные усилия, чтобы тапнуть по элементу или даже просто ознакомиться с контентом, то количество отказов на сайте резко увеличится.
2. Больше трафика. Без адаптивности сайт теряет огромный сегмент аудитории, который связан с мобильными устройствами. Соответственно, и трафик, который они могли бы привести.
3. Более высокий коэффициент конверсий . Есть исследования, которые показывают — адаптивный веб-дизайн может привести к увеличению коэффициента конверсии посетителей в покупателей на 10,9 %.

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

Разница между адаптивной и мобильной версией сайта

Технически мобильная версия сайта на поддомене (чаще всего .m) — это отдельный, самостоятельный сайт. Адаптивный сайт — это мобильная и полная версия сайта в одном флаконе, при этом первая умеет подстраиваться к любому типу устройства пользователя.

Стоит отметить несколько достоинств и недостатков обоих подходов.

Достоинства отдельной мобильной версии на поддомене

• Загружается быстрее.
• Мобильный пользователь может выбирать, какая версия сайта ему нужна в данный момент.
• Проще создавать, так как функциональность сильно урезана.
• Лучшее юзабилити.

Недостатки мобильной версии на поддомене

• Сильно ограничено функциональное воплощение.
• Поисковые системы видят сразу несколько версий одной страницы.
• Нет возможности опубликовать весь контент, доступный в полной версии сайта.
• Возможные санкции поисковых систем: если вы дублируете уже опубликованный контент основной версии на мобильной версии сайта.
• Может страдать загрузка содержимого страницы, если используются перенаправления.

Еще одна проблема мобильной версии сайта на поддомене состоит в том, что придется заново прокачивать трастовость домена, ИКС и другие «пузомерки», ведь с точки зрения поисковых систем поддомен — это новый самостоятельный сайт.

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

• Не нужно генерировать дополнительные URL-адреса.
• Расшаривание содержимого страниц более удобное, так как контент находится в рамках одного домена.
• Легче оптимизировать сайт для SEO.
• Простая реализация.
• Не нужно задействовать перенаправления.
• Проще сканировать краулерам.
• Все ранее наработанные показатели остаются с вами и можно не бояться, что страницы неожиданно вылетят из индекса или вообще в него не попадут.

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

• Нельзя переключаться между полной и мобильной версией сайта.
• Возможны сложности, если на сайте используется нестандартный функционал.
• Скорость загрузки ниже, чем у мобильной версии сайта.

Теория. Устройство адаптивной верстки

Давайте смотреть, как это работает.

Медиазапросы стилей

Медиа-запросы — это правила-триггеры, применяемые к CSS, которые реагируют на тип устройства, тип экрана, отображаемый браузер или даже ориентацию устройства. Цель медиа-запроса — разделить использование различных макетов с задействием одних и тех же блоков контента, каждый из которых оптимизирован для размера или функций рассматриваемого устройства.

Логический оператор and, который позволяет связывать вместе разные типы условий >

Медиа-запрос следует правилу, основанному на параметрах минимальной и/или максимальной ширины, наряду с другими факторами (например, разрешение, браузер и ориентация экрана). Подробнее о них мы расскажем ниже, в разделе «Параметры и правила».

Медиа-запросы используются для идентификации допустимых и недопустимых стилей на каждой конкретной странице документа. Свойства стиля регламентируют самые разнообразные параметры документа, например, плотность пикселей (разрешение пользовательского экрана), ширина / высота браузерного окна, ориентация страницы.

«Жидкие» сетки

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

Блок содержимого, изображение и отступы между блоками и вокруг них складываются вместе, чтобы составить 100 % в ширине.

Гибкие изображения

Изображения должны быть созданы в относительных единицах. В адаптивной верстке они называются «эффективными пикселями» (epx). Эти единицы используются для выражения размеров макета и интервалов. Элементы должны быть разработаны с базовой единицей 4 epx, чтобы дизайн всегда масштабировался до целого числа при применении гибкой сетки.

Могут быть и другие варианты реализации гибких изображений:

Источник