Как изменить адаптивность сайта

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

Как сделать сайт адаптивным на все экраны?

Чтобы сделать сайт адаптивным на мобильное или стационарное устройство, нужно иметь представление о HTML5, CSS3 и JavaScript. Кроме общих знаний, требуется понимать основные принципы адаптивности.

Только с ними можно начинать делать верстку сайта:

1. Поточность — принцип отсутствия смещения информационных блоков во время просмотра сайта с мобильного устройства.
2. Относительность в измерении — принцип использования относительных единиц для установки размеров и координат верхней и нижней границы блока экрана ПК и дисплея смартфона.
3. Применение контрольных точек — принцип расположения элементов для разных экранов во избежание сдвига содержимого страниц сайта.
4. Принцип грамотного использования минимальных и максимальных значений. К примеру, если экран имеет ширину меньше 1000 пикселей, то контент размещают на весь экран. Иначе максимум ширина будет достигать 1000 пикселей.
5. Принцип вложенности объектов для предотвращения сложностей контроля за разными элементами сайта. Можно вложить их в один контейнер. Требуется для тех блоков, которые не нужно адаптировать под экран — кнопки с логотипами и др.
6. Использование одинаковых шрифтов во избежание перегрузки сайта.
7. Правильное применение растровой с векторной графикой. К примеру, если картинка состоит из множества деталей, следует делать ее в растровом формате и, наоборот, если она одна, то лучше использовать векторный формат. Однако стоит помнить о сжатии. Каждая картинка должна быть оптимизирована под новые браузеры.
8. Соблюдение макетных размеров и общих стандартов верстки сайта. Стандартными принято считать следующие разрешения, при которых не происходит смена дизайна и неправильное отображение сайта:
   • для мобильных устройств – 320px, 480 px;
   • для планшетных компьютеров – 768px;
   • для нетбуков с некоторыми планшетами – 1024px;
   • для ПК – 1280px и больше.

Видео инструкция: Как сделать адаптивный сайт в фотошопе.

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

Адаптивную верстку начинают с создания контейнера для упаковки картинки. Выглядит это следующим образом:

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

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

В целом получаем готовый шаблон для одной картинки на сайт. Чтобы сделать мини-галерею прописываем следующие коды в HTML структуру:

Так загрузили четыре картинки на сайт. В следующем шаблоне придадим картинкам адаптивность с небольшим отступом:

Таким образом, сделали миниатюрную галерею на сайт. Точно так же можно поступать с текстом. Главное – задавать параметры загружаемых файлов под максимальное и минимальное разрешение.

Адаптивное меню

Чтобы сделать адаптивное меню, вначале нужно добавить мега тег meta viewport в раздел шапки. Этот тег нужен, чтобы меню корректно отображалось на любом экране.

Затем добавляем структуру меню по образцу ниже.

Дополнительная седьмая ссылка меню нужна для адаптации сайта под любое мобильное устройство. Далее добавляются стили в body. Это только для декоративных целей. Цвет можно использовать любой. Для примера возьмем бежевое меню. Под body добавляется тег nav. Он позволит сделать навигацию сайта. В этом теге размещаем основные ссылки меню.

Поскольку основных ссылок – 6 штук, то контейнер будет обладать шириной в 600 пикселей, а каждая ссылка – по 100 пикселей. Смотрите ниже.

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

Когда экран станет меньше (при открытии сайта через смартфон), меню будет показано вертикально сверху вниз. В целом, адаптивность готова. Остается только сделать эффект показа меню при нажатии на ссылку. Сделать его можно, прописав следующее body:

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

Создать адаптивную шапку на сайт достаточно сложно. До прихода CSS технологии, приходилось использовать обтекание с другими трюками для грамотной верстки страницы. Сегодня все делается просто. Вначале нужно прописать следующий код шапки, состоящий из трех блоков div html кода:

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

В конце нужно сделать созданную шапку сайта адаптивной. Для этого нужно применить свойства justify-content со значением space-between.

В целом, работа окончена. Проверить итог работы можно через удобный сервис Google Mobile Friendly.

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

Сделать изображения с видео гибкими и адаптивными можно с помощью разных способов. Чтобы не использовать сложный атрибут srcset, рассмотрим примеры настройки картинок и видео через CSS. Для базового расположения одиночных картинок с записями или видео, нужно прописать следующую html и css структуру. Здесь элемент обозначения картинки уже будет адаптивным.

Если нужно собрать на сайте макет из изображений или видео в несколько колонок, то прописываем следующую структуру кодов:

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

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

Чтобы реализовать задуманное, нужно только расставить в body медиа-запросы и указать тип носителя, для которого будут они применяться. Выглядит все следующим образом:

Последний шаблон позволяет сделать широкоформатные адаптивные картинки и видео, заполняющие всю поверхность окна. Реализовать идею можно удалением свойства максимальной ширины контейнера и установки ширины в 100%.

Как сделать адаптивный фон

Чтобы установить адаптивный фон, следует проделать ряд простых шагов:

1. Сделать подборку подходящего качественного изображения с высоким разрешением, и пропорциональным образом сделать его меньше с помощью любого графического редактора. Затем загрузить его на сервер в папку картинок.
2. Создать body стилей и между тегами и вставить стили, прописав в них метатег viewport, чтобы превратить изображение в фоновое.
3. Прописать путь к папке стилей и его полное название.
4. Проверить результат, делая больше и меньше размеры окон.

Адаптивный сайт на Тильде

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

Подробнее про адаптивность и отзывчивость дизайна сайта.

Преимущества Тильды заключаются в следующем:

1. Интуитивно понятный интерфейс для новичков и профессионалов.
2. Быстрое и простое редактирование текста (нужно кликнуть на него два раза).
3. Быстрая загрузка любого изображения или видео.
4. Множество заранее созданных шаблонов дизайна сайта на любой вкус.
5. Быстрая работа стандартных блоков, позволяющих редактировать и добавлять информацию, изображения или видео так, как захочется. Причем можно загрузить как обложки с цитатами, так и тарифы с этапами работ.
6. Широкий типографический ассортимент и огромная коллекция шрифтов с пятью настройками жирности текста.
7. Большое количество адаптированных блоков под мобильные устройства, в том числе и таблиц.
8. Простая и быстрая настройка отступов между картинками, таблицами и другими объектами.
9. Возможность без сложностей настроить seo-оптимизацию на сайт, чтобы любой поисковик смог правильно индексировать страницу.
10. Круглосуточная работа справочного центра, техподдержки и колл-центра.

Также через Тильду можно добавить на сайт прелоадер (устройство, которое уберет шрифты во время загрузки страницы), эффект печатной машинки, эффект презентации и типографа. Единственный минус – с помощью нее нельзя сделать сайт с более 500 страницами.

Работа с Adobe Muse

Как и Тильда, Adobe Muse является еще одним удобным и современным конструктором начинающего и опытного вебмастера. Он позволяет сэкономить много времени на адаптивности. Все, что требуется от вебмастера, – поработать в редакторе с интерфейсом, а коды сгенерирует система.

Преимущества работы с Adobe Muse следующие:

1. Возможность сделать шаблон сайта без сложностей;
2. Упрощенное создание адаптивного сайта (стандартный сайт можно сделать за 2 часа);
3. Широкий функционал интерфейса;
4. Понятная и быстрая работа с HTML5 и CSS3.

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

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

Чтобы проверить настройку адаптивности сайта и его правильного отображения на всех устройствах, можно воспользоваться браузером или специальным сервисом Google Mobile Friendly (Google Search Console).

Браузером Google проверку можно сделать, зажав F12 и выбрав в меню «Дополнительные инструменты» и «Инструменты разработчика». Через Mozilla Firefox сделать это можно также: F12 -> Меню -> Разработка -> Адаптивный дизайн.

Через сервис Google можно проверить адаптивность по ссылке https://search.google.com/test/mobile-friendly.

В целом, сделать адаптивным сайт несложно. Главное – понимать принципы адаптивности и уметь правильно выставлять базовые интернет-настройки для ее создания.

<body>
    <div class="wrapper">
   	 Ваш сайт здесь
    </div>
</body>

width: 80%;
max-width: 720px;

body, html
{
	font-size: 16px !important;
}

.nav__item
{
	padding: 15px 25px !important;
	margin: 2px !important;
}

.main__content
{
	width: 80% !important;
	margin: 0 auto !important;
}

.ui-button
{
	padding: 10px 25px !important;
}

<link rel="stylesheet" type="text/css" href="styles/<?php echo $_SESSION["scale"]; ?>.css" id="scale-link">

<div class="hover-panel">
    <div class="hover-panel__content">
   	 <div class="ui-button theme-button" id="theme-button">Change theme</div>
   	 <div class="ui-button" id="small-button">Small UI</div>
   	 <div class="ui-button" id="normal-button">Normal UI</div>
   	 <div class="ui-button" id="big-button">Big UI</div>    
    </div>
</div>

var btns =
{
    small: document.getElementById("small-button"),
    normal: document.getElementById("normal-button"),
    big: document.getElementById("big-button")
};
var link = document.getElementById("scale-link");

btns.small.addEventListener("click", function () { ChangeScale("small"); });
btns.normal.addEventListener("click", function () { ChangeScale("normal"); });
btns.big.addEventListener("click", function () { ChangeScale("big"); });

function ChangeScale(size)
{
    link.setAttribute("href", "styles/" + size + ".css");

    SaveScale(size);
}

function SaveScale(size)
{
    var Request = new XMLHttpRequest();
    Request.open("GET", "./scales.php?size=" + size, true);
    Request.send();
}

<?php
session_start();

if(isset($_GET["size"]))
{
    $size = $_GET["size"];

    if($size == "small" || $size == "normal" || $size == "big")
    {
   	 $_SESSION["scale"] = $size;
    }
}

?>

window.addEventListener("resize", AutoScale); //Масштабируем страницу при растягивании окна

AutoScale(); //Масштабируем страницу после загрузки

function AutoScale()
{
    let width = window.innerWidth; //Ширина окна
    //Если вы хотите проверять по размеру экрана, то вам нужно свойство window.screen.width

    if(width > 1280)
    {
   	 ChangeScale("big");
    }
    else if(width <= 1280 && width > 720)
    {
   	 ChangeScale("normal");
    }
    else if(width < 720)
    {
   	 ChangeScale("small");
    }
}

Школа дронов для всех
Учим программировать беспилотники и управлять ими.
Узнать больше

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

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

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

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

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

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

max-width и width

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

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

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

Было

width: 1000px;

Стало

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

min-width и width

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

Практика

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

• Шапка — #headerInner
• Основной контент — #colLeft
• Боковая колонка — #colRight

Проверить адаптивность шаблона можно с помощью масштабирования окна (см. скриншот).

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Адаптивный шаблон</title>
</head>
<body>
<div id="headerInner">
  <div class="logo">
     <a href="http://bifot.ru/blog/">Логотип</a>
  </div>
</div>
<!-- начало wrapper -->
<div id="wrapper">
   <div id="middle">
       <div id="content">
          <div id="colLeft">
              <div class="text">
                   <h1>Основной контент</h1>
                   <p>Здесь будет находится основной контент страницы</p>
              </div>
          </div><!-- конец colLeft -->
          <!-- начало colRight -->
          <div id="colRight">
              <div class="text">
                   <h1>Текст сайтбара</h1>
                   <p>Содержимое сайтбара</p>
              </div>
          </div><!-- конец colRight -->
       </div><!-- конец content -->
   </div><!-- конец middle -->
</div><!-- конец wrapper -->
</body>
</html>

CSS

* {
 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 {
 margin-left:30px;
 font-size:30px;
 color:#96b551;
}

Как вы заметили, ширина шаблона 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;), чтобы эти два блока разделялись.

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

img {
 max-width: 100%;
 height: auto;
 width: auto9; /* для ie8 */
}

Время для нового проекта! Сегодня мы сделаем основу для адаптивного сайта. В результате получится веб-страница с котиками, а в следующий раз сделаем вашу адаптивную личную страницу на HTML. Но пока — котики. 

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

Что такое Bootstrap

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

Самое полезное для нас сейчас — адаптивная многоколоночная вёрстка Бутстрапа. Что она нам даёт: 

Как его подключить к сайту

Чтобы использовать Бутстрап на странице, нужно написать такую команду, её рекомендует использовать официальный сайт движка:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

Эта команда загружает базовую версию Бутстрапа со внешнего сервера, где этот код официально хранится. Можно, конечно, скачать собственную версию Бутстрапа и поселить на свой сайт, но пользоваться внешним сайтом в нашем случае удобнее. Команду нужно вставить в разделе <head>, например, после мета-свойств. Общий код шаблона страницы будет выглядеть так:

<!DOCTYPE html>
<html>
<!-- служебная часть -->

<head>
  <!-- заголовок страницы -->
  <title>Адаптивная вёрстка на Бутстрапе</title>
  <!-- настраиваем служебную информацию для браузеров -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- загружаем Бутстрап -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <style type="text/css">
  </style>
  <!-- закрываем служебную часть страницы -->
</head>

<body>
  <!-- тут будет наша страница -->
</body>
<!-- конец всей страницы -->

</html>

Сетка и колонки

Бутстрап для себя делит экран на 12 колонок, независимо от размера экрана. Даже маленький экран старого телефона Бутстрап разобьёт на 12 колонок и будет ими управлять. На этом холсте вы можете создавать блоки шириной с какое-то количество колонок. Например, чтобы написать текст на половину ширины экрана, нужно создать блок шириной 6 колонок.

Блоки живут не сами по себе, а как бы в таблицах. Вы говорите Бутстрапу: «Создай мне контейнер для блока, в контейнере — строку, внутри строки — колонку, а внутрь колонки — положи этот текст». Сейчас это выглядит странно, но позже вы привыкнете.

Строка заполняется ячейками слева направо. Когда кончается строка, можно создать новую строку и снова заполнить её ячейками разной ширины. Ширина ячеек выражается в колонках. Ячейка шириной на весь экран будет иметь ширину 12 колонок, на пол-экрана — 6 колонок. Чтобы разбить экран на три части по горизонтали, нужно 3 ячейки шириной по 4 колонки. Чтобы сделать сетку, как у обычного трёхколоночного сайта, попробуйте три ячейки: 2 колонки, 8 колонок, 2 колонки. 

Можно сказать Бутстрапу: «Когда экран маленький, эту колонку выводи на всю ширину, а ту вообще прячь». Например, у нас в левой колонке было меню сайта, в центральной — основной текст, а в правой — всякие вспомогательные ссылки. Тогда говорим левой колонке на мобилке вывестись на всю ширину, основной колонке — тоже на всю ширину, а правой — скрыться. Получится мобильная версия сайта.

И так можно долго куражиться. Если интересно, прочитайте документацию по сеткам Бутстрапа — там всё понятно по картинкам. 

Заголовок

Начнём с простого. Первое, что нам нужно, — заголовок всей страницы. Мы его сделаем отдельным блоком, чтобы ничего ему не мешало. Весь код разместим внутри раздела <body>:

<div class="container" >

    <div class="col-12">

    </div>

</div>

Помните, выше мы писали про вложенность? Вот она пошла, родимая: 

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

Второй блок — "row" — означает, что началась строка из 12 колонок. В контейнер нужно обязательно вложить такой row, можно несколько. Представьте, что это строка таблицы. 

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

Добавляем котиков

Мы добавим в статью изображения котиков и посмотрим, как движок сам будет ими управлять в зависимости от размера экрана.

Сначала код, который мы поместим тоже в новый контейнер:

<div class="container">
  <div class="row">
    <div class="col-2">
      <img src="http://thecode.local/wp-content/uploads/2019/06/cat1.jpg">
    </div>
    <div class="col-8">
      <img src="http://thecode.local/wp-content/uploads/2019/06/cat2.jpg">
    </div>
    <div class="col-2">
      <img src="http://thecode.local/wp-content/uploads/2019/06/anton-kraev-1166716-unsplash.jpg">
    </div>
  </div>
</div>

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

Чтобы котики уважали ширину ячеек, в которые их засовывают, пропишем в CSS-стилях специальную команду для тега <img>. Команда должна сказать, чтобы ширина картинки была не больше, чем максимальный размер блока, который под неё выделили:

img{

      max-width: 100%;

   } 

Этот код нужно вставить в начало страницы между тегами <style> и </style>.

Теперь всё нормально: картинка занимает максимальную ширину, которую ей даёт занять сетка Бутстрапа. Давайте посмотрим, что произойдёт при изменении размеров браузера:

Настраиваем размеры картинок

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

</div>
<div class="row">
  <div class="col-12 col-sm-12 col-md-4 col-lg-2 col-xl-2">
    <img src="http://thecode.local/wp-content/uploads/2019/06/cat1.jpg">
  </div>
  <div class="col-12 col-sm-12 col-md-4 col-lg-8 col-xl-8">
    <img src="http://thecode.local/wp-content/uploads/2019/06/cat2.jpg">
  </div>
  <div class="col-12 col-sm-12 col-md-4 col-lg-2 col-xl-2">
    <img src="http://thecode.local/wp-content/uploads/2019/06/anton-kraev-1166716-unsplash.jpg">
  </div>
</div>

Мы для каждой картинки добавили описание размеров блока для каждого размера экрана и разберём его на примере первой картинки. Теперь, если экран очень маленький (col) или просто маленький (col-sm), то первый блок с котиком займёт  все 12 ячеек, то есть всю ширину. Если экран среднего размера (col-md) — то 4 ячейки, а если большой (col-lg) или очень большой (col-xl) — то пусть кот занимает по 2 ячейки.

Для второй картинки действуют те же самые правила, но размер кота на больших и очень больших экранах другой — 8 ячеек. Третья картинка настраивается точно так же, как и первая. Обратите внимание: чтобы на средних экранах получить одинаковый размер картинок, мы в описание каждой из них добавили одну и ту же команду col-md-4, которая каждому коту даёт 4 колонки, чтобы все были одного размера.    

Вот что получилось в итоге — мы никак не программировали все вычисления размера экрана, подгонку под них изображений, не запрашивали постоянно, поменялся ли размер — за нас всё делал Бутстрап. Мы просто сказали ему, какого размера хотим видеть каждый блок, и всё — дальше работала магия фреймворка!

Полный код страницы

<!DOCTYPE html>
<html>
<!-- служебная часть -->

<head>
  <!-- заголовок страницы -->
  <title>Адаптивная вёрстка на Бутстрапе</title>
  <!-- настраиваем служебную информацию для браузеров -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <!-- задаём CSS-стили прямо здесь же, чтобы всё было в одном файле -->
  <style type="text/css">
    img {
      max-width: 100%;
    }
  </style>
  <!-- закрываем служебную часть страницы -->
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-12">
        <h1>Адаптивная вёрстка</h1>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="row">
      <div class="col-12 col-sm-12 col-md-4 col-lg-2 col-xl-2">
        <img src="http://thecode.local/wp-content/uploads/2019/06/cat1.jpg">
      </div>
      <div class="col-12 col-sm-12 col-md-4 col-lg-8 col-xl-8">
        <img src="http://thecode.local/wp-content/uploads/2019/06/cat2.jpg">
      </div>
      <div class="col-12 col-sm-12 col-md-4 col-lg-2 col-xl-2">
        <img src="http://thecode.local/wp-content/uploads/2019/06/anton-kraev-1166716-unsplash.jpg">
      </div>
    </div>
  </div>
</body>
<!-- конец всей страницы -->

</html>

Что дальше

Это лишь самые простые вещи, которые можно делать на Бутстрапе. Если вам понравилось, как страница реагирует на изменения экрана, — зайдите на getbootstrap.ru и почитайте остальные возможности фреймворка. В других статьях мы ещё вернёмся к этому движку и расскажем о его других возможностях.

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

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

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

Особое внимание всегда – и вполне логично – уделяется главной странице интернет-ресурса. Ее формируют три основных блока:

• шапка (или верхний колонтитул);
• обертка-контейнер (где располагается основное содержимое);
• футер (или нижний колонтитул, или подвал).

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

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

Чем адаптация сайтов отличается от полноценных мобильных шаблонов?

Для начала разберемся с адаптацией как таковой. Цель адаптивных шаблонов – сделать так, чтобы страница одинаково хорошо отображалась на разных устройствах. У «хорошего отображения страницы» есть 2 основных параметра: читабельный текст и адекватное перемещение блоков.

Читабельный текст – первая проблема, с которой обычно сталкиваются владельцы широкоформатных мониторов. Если поставить на FullHD-мониторе максимальную ширину строки (на весь экран) и при этом сохранить изначальный размер шрифта, то буквы будут нечитаемыми.

Корень проблемы здесь заключается в том, что множество дизайнеров/верстальщиков работает на мониторах обычного формата, поэтому им даже в голову не приходит такая проблема. И решить ее не так уж и просто – Если просто увеличить размеры шрифта, то текст может начать уползать за границы блока, а остальная позиционная верстка (списки, к примеру) просто сломаются.

Вторая проблема – это блоки. Большинство сайтов состоят из блоков, в каждом блоке – свой контент.

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

Итак, проблему мы определили, теперь – 2 варианта ее решения

Первый – пользоваться разными версиями сайта. Отдаете на откуп разработки дизайна для разных версии экранов дизайнерам и верстальщикам, в начала страницы вставляете JS-код следующего вида:

function Swap() {

var width = window.innerWidth;

if (width <= 599 && swapped === false) {

swapDesign(“Mobile”);

swapped = true;

} else if (width > 599 && swapped === true) {

swapDesign(“Desktop”);

swapped = false;

}

}

Чем больше дизайнов – тем больше if-else. Правда, здесь подстерегает одна проблема – количество разных экранов:

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

function swapCols() {

var _col1 = col1.innerHTML,

_col1id = col1.id,

_col2 = col2.innerHTML,

_col2id = col2.id;

col1.innerHTML = _col2;

col1.id = _col2id;

col2.innerHTML = _col1;

col2.id = _col1id;

}

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

Второй вариант решения проблемы – сделать резиновую верстку исключительно в CSS файле. Для этого сайт должен быть определенным образом подготовлен – весь контент должен быть «расфасован» по div и span.

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

.main__content

{

width: 70%;

margin: 0 auto;

}

Эту тактику тоже можно комбинировать с JS – например, вы пишете скрипт, в котором указываете, что при ширине экрана более 1200 пикселей нужно сделать width = 70%, при ширине экрана менее 600 пикселей width устанавливается в 90%. Решение с резиновой версткой – более дешевое и сердитое, хотя на разных разрешениях экранов оно может выглядеть менее красиво и есть свои нюансы (нужно подгонять размеры картинок).

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

Зачем адаптируют дизайн под разные устройства?

Если отложить человеколюбие в сторону, то основной мотиватор – это деньги, если точнее – конверсия. Пользователям просто не нравятся сайты без адаптивной верстки – если ее нет, просматривать сайт со смартфона очень неудобно. А доля заходов на сайты со смартфонов уже превысила 50%. То есть в половине случаев человек приходит на сайт, видит отсутствие верстки для телефона и уходит. Мало того, что сайт теряет половину посетителей – он еще и попадает под санкции поисковых систем, которым не нравится, что пользователь уходит с сайта неудовлетворенным.

Поэтому сайты без адаптивной верстки не попадают на первую страницу в поисковой выдаче.

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

Для Google основной задачей становится упрощение использования интернета с мобильного устройства. Поэтому адаптированные сайты выделяются с помощью специальной метки «mobile friendly» или «Для мобильных» в русскоязычной версии поисковой системы.

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

Логичным следствием сказанного выше становится наличие в каждой поисковой системе специального инструмента проверки адаптивность верстки интернет-ресурса. Применительно к Google таковым является популярный Google Developers. В экосистеме Яндекса аналогичные функции выполняет не менее часто используемый программистами Яндекс.Вебмастер.

Какими инструментами делают адаптивный дизайн/верстку?

Проще всего взять уже готовый адаптивный дизайн и «допилить» его под себя. Готовые шаблоны можно найти здесь:

• Gator. Ссылка: https://www.hostgator.com/website-builder. Здесь есть не только готовые адаптивные шаблоны, но и удобный конструктор сайтов. Часть шаблонов доступна бесплатно.
• Simbla. Ссылка: https://www.simbla.com/responsive_website_templates. Около 100 простых адаптивных дизайнов на выбор. Отлично подходит для новичков и людей, которые не собираются глубоко копаться в верстке, шаблоны – максимально простые.
• ColorLib. Ссылка: https://colorlib.com/wp/templates/. Огромная база готовых шаблонов с адаптивной версткой для WordPress. Есть платные, есть бесплатные.
• ThemeForest. Ссылка: https://themeforest.net/. База на 45 000 шаблонов, где-то 20% из них – адаптивные. Сортируйте по времени публикации, новые с большим шансом будут адаптивными. Увы, все шаблоны – платные, от 5$.

Есть и сервисы, которые помогают разработать адаптивную верстку непосредственно для своего сайта:

• Bootstrap. Ссылка: https://getbootstrap.com/. Большой тулкит, который «из коробки» поставляет все необходимые инструменты для разработки mobile-friendly сайтов.
• Wirefy. Ссылка: https://getwirefy.com/. Тул, который позволяет удобно создавать адаптивные фреймы. Для того, чтобы с ним работать, нужно знать HTML5 и CSS.
• FitVids. Ссылка: http://fitvidsjs.com/. Небольшой JS-скрипт, который позволяет странице автоматически подбирать правильный размер для видео в зависимости от разрешения экрана.
• AdaptiveImages. Ссылка: http://adaptive-images.com/. То же, что и предыдущий, но для картинок.
• WebFlow. Ссылка: https://webflow.com/. Конструктор сайтов, который генерирует код, исходя из элементов, которые вы расположили на экране. Код затем можно вставить в свой сайт.

Ну и, конечно же, вам понадобятся сервисы для тестирования:

• Сервис от Google. Ссылка: https://search.google.com/test/mobile-friendly. Крайне простой сервис – даете ссылку, получаете вердикт.
• BrowserStack. Ссылка: https://www.browserstack.com/. Серьезная система тестирования, которая анализирует ваш сайт на 2 000 разных разрешений. Есть бесплатное демо.

Какие гайды можно почитать?

• Learn Responsible Design. Короткий вводный бесплатный курс на английском.
• Отзывчивый дизайн. Курс от Firefox.
• Introduction To Responsive Web Design — HTML & CSS Tutorial. Довольно подробный видеокурс о том, как сделать адаптивную верстку на HTML и CSS. Язык – английский.
• Web Design for Beginners. Курс посвящен дизайну и верстке в целом, но раздел про адаптивную верстку тоже есть. Язык – английский.
• Learn Responsible Design. Еще один короткий курс для тех, кто уже хорошо владеет HTML и CSS.
• Responsive Web Design – Introduction. Здесь можно выучить как адаптивный дизайн, так и HTML/CSS в целом. Язык – английский, курс – бесплатный.

Вывод

Тезисно:

• Адаптивный дизайн – это такая верстка, при которой сайт хорошо выглядит при разных разрешениях экрана.
• 2 основных подхода к адаптивной верстке – это «резиновая» верстка и отдельная верстка для каждого типа экрана. Первое – дешевле, второе – надежнее.
• Если нет желания учиться – можете взять готовый шаблон с адаптивной версткой и переделать его под себя.
• Если хотите создать адаптивную верстку с нуля – пройдите один из курсов, которые мы указали чуть выше. Почти все курсы – бесплатные, большинство из них – на английском.