Как написать адаптивный сайт

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

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

Чтобы сделать сайт адаптивным на мобильное или стационарное устройство, нужно иметь представление о 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.

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

Время для нового проекта! Сегодня мы сделаем основу для адаптивного сайта. В результате получится веб-страница с котиками, а в следующий раз сделаем вашу адаптивную личную страницу на 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 и почитайте остальные возможности фреймворка. В других статьях мы ещё вернёмся к этому движку и расскажем о его других возможностях.

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

Основные виды макетов сайтов

Различают следующие основные типы макетов сайтов, связанных с шириной:

• фиксированный;
• резиновый (гибкий);
• адаптивный.

Фиксированный макет сайта

Фиксированный макет сайта — это макет, который имеет строго определённую ширину (в пикселях). Такой вид дизайна широко использовался для разработки сайтов в прошлом, когда интернет только начал внедряться в нашу жизнь. В это время «господствовали» компьютеры с мониторами, имеющими диагональ 14″ или 15″, в редких случаях встречались «монстры», имеющие диагональ 17″. Эти мониторы не сильно отличались по горизонтальному разрешению. Таким образом, выбрав для разметки какую-то определённую ширину (в основном останавливались на 960px), можно было разработать сайт, который оптимально бы отображался на всех мониторах этого времени.

<style>
body {
  margin: 0;
}
.container {
  margin-left: auto;
  margin-right: auto;
  width: 960px;
}
.aside {
  float: left;
  width: 250px;
}
.main {
  margin-left: 250px;
}
</style>

<div class="container">
  <aside class="aside">
    ASIDE
  </aside>
  <main class="main">
    MAIN
  </main>
</div>

Резиновый (гибкий) макет сайта

Резиновый (гибкий) макет сайта — это макет, который изменяется в зависимости от ширины рабочей области окна (вкладки) браузера. Потребность в такой разметке возникла, когда у многих пользователей появились мониторы, имеющие диагональ 19″, 21″ и больше.

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

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

Пример верстки первого макета:

<style>
  body {
    margin: 0;
  }
  .aside {
    float: left;
    width: 250px;
  }
  .main {
    margin-left: 250px;
  }
</style>

<div class="container">
  <aside class="aside">
    ASIDE
  </aside>
  <main class="main">
    MAIN
  </main>
</div>

Пример верстки второго макета:

<style>
body {
  margin: 0;
}
.aside {
  float: left;
  width: 25%;
}
.main {
  margin-left: 25%;
}
</style>

<div class="container">
  <aside class="aside">
    ASIDE
  </aside>
  <main class="main">
    MAIN
  </main>
</div>

После десктопов начали появляться и другие электронные устройства. В настоящее время просматривать сайты можно с помощью смартфонов (размер экрана от 3″ до 6″), планшетов (от 7″ до 10″), ноутбуков (10″ и выше), десктопов (19″ и выше) и TV (32″ и выше).

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

Чтобы было понятно, выполним расчёты на примере вышеприведённого резинового макета. А именно вычислим ширину блоков (1 и 2), которые они будут иметь на смартфоне с горизонтальным разрешением 320рх. В первом варианте: 1 блок — 250рх, 2 блок — 70рх. Во втором: 1 блок — 80рх, 2 блок — 240рх.

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

Адаптивный макет сайта

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

Рассмотрим пример адаптивного макета, состоящего из 2 блоков, который на разных устройствах выглядит по-разному.

А именно:

• на смартфонах и планшетах (устройствах с очень маленьким размером экрана) блоки должны располагаться вертикально, т.е. один под другим;
• на ноутбуках (устройствах со средним размером экрана) блоки должны располагаться горизонтально (1 блок — 33.3%, 2 блок — 66.7%);
• на десктопах (устройствах с большим размером экрана) тоже горизонтально, но с другими размерами (1 блок — 25%, 2 блок — 75%)

<style>
body {
  margin: 0;
}
.container {
  display: flex;
  flex-wrap: wrap;
}
.aside, .main {
  width: 100%;
  min-height: 1px;
}
@media (min-width: 992px) {
  .aside {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
    order: 1;
  }
  .main {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
    order: 2;
  }
}
@media (min-width: 1400px) {
  .aside {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .main {
    flex: 0 0 75%;
    max-width: 75%;
  }
}
</style>

<div class="container">
  <main class="main">
    MAIN
  </main>
  <aside class="aside">
    ASIDE
  </aside>
</div>

Bootstrap и создание адаптивных сайтов

Фреймворки Bootstrap 3 и 4 версии спроектированы для создания адаптивных сайтов.

Начинают верстать сайт, который будет «строится» на Bootstrap, с создания сетки. После создания сетки переходят к наполнению её контентом и компонентами Bootstrap.

Все компоненты Bootstrap являются гибкими, а не которые из них ещё и адаптивными как, например, Navbar. Данный компонент (Navbar) может изменять своё представление, т.е. находится в мобильном или десктопном представлении в зависимости от того какую в данный момент viewport ширину имеет браузер.

Информацию по сетке Bootstrap 3 можно почитать в этой статье, а по Bootstrap 4 — в этой.

Создание адаптивного макета с помощью Bootstrap 3

Создания адаптивного макета в Bootstrap 3 осуществляется под различные устройства. По умолчанию в Bootstrap 3 проектирование выполняется под 4 контрольные точки (xs, sm, md и lg). Область контрольной точки xs – это смартфоны, sm – планшеты, md – ноутбуки, а lg – десктопы.

Для примера сверстаем с помощью сетки Bootstrap 3 макет страницы, изображенный ниже. В качестве вида макета выберем, например, адаптивно-гибкий.

Разработку адаптивного макета обычно начинают с самых маленьких устройств (смартфонов), по отношению к Bootstrap 3 – это область xs.

На xs блоки должны располагаться вертикально и иметь ширину, равную ширине родительского контейнера (т.е. 12 колонок Bootstrap).

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12">1</div>
    <div class="col-xs-12">2</div>
    <div class="col-xs-12">3</div>
    <div class="col-xs-12">4</div>
    <div class="col-xs-12">5</div>
    <div class="col-xs-12">6</div>
  </div>
</div>

На sm блоки должны располагаться на 3 строках по 2 блока в каждой строке. Каждый блок должен иметь ширину, равную 50% ширины родительского элемента (6 колонок Bootstrap).

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 col-sm-6">1</div>
    <div class="col-xs-12 col-sm-6">2</div>
    <!--Перед блоком sm, который должен начинаться с новой строки-->
    <div class="clearfix visible-sm-block"></div>
    <div class="col-xs-12 col-sm-6">3</div>
    <div class="col-xs-12 col-sm-6">4</div>
    <!--Перед блоком sm, который должен начинаться с новой строки-->
    <div class="clearfix visible-sm-block"></div>
    <div class="col-xs-12 col-sm-6">5</div>
    <div class="col-xs-12 col-sm-6">6</div>
  </div>
</div>

На md блоки должны располагаться на 2 строках по 3 блока в каждой строке. Каждый блок должен иметь ширину, равную 33.3% ширины родительского элемента (4 колонки Bootstrap).

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-4">1</div>
    <div class="col-xs-12 col-sm-6 col-md-4">2</div>
    <!--Перед блоком sm, который должен начинаться с новой строки-->
    <div class="clearfix visible-sm-block"></div>
    <div class="col-xs-12 col-sm-6 col-md-4">3</div>
    <!--Перед блоком md, который должен начинаться с новой строки-->
    <div class="clearfix visible-md-block"></div>
    <div class="col-xs-12 col-sm-6 col-md-4">4</div>
    <!--Перед блоком sm, который должен начинаться с новой строки-->
    <div class="clearfix visible-sm-block"></div>
    <div class="col-xs-12 col-sm-6 col-md-4">5</div>
    <div class="col-xs-12 col-sm-6 col-md-4">6</div>
  </div>
</div>

На lg блоки должны располагаться на 2 строчках. На первой строчке 2 блока, а на второй – 4 блока.

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-6">1</div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-6">2</div>
    <!--Перед блоком sm и lg, который должен начинаться с новой строки-->
    <div class="clearfix visible-sm-block visible-lg-block"></div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">3</div>
    <!--Перед блоком md, который должен начинаться с новой строки-->
    <div class="clearfix visible-md-block"></div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">4</div>
    <!--Перед блоком sm, который должен начинаться с новой строки-->
    <div class="clearfix visible-sm-block"></div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">5</div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">6</div>
  </div>
</div>

Оптимизируем код, уберем, где возможно классы col-*-12, т.к. адаптивные блоки Bootstrap по умолчанию занимают ширину, равную 100%.

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 col-md-4 col-lg-6">1</div>
    <div class="col-sm-6 col-md-4 col-lg-6">2</div>
    <!--Перед блоком sm и lg, который должен начинаться с новой строки-->
    <div class="clearfix visible-sm-block visible-lg-block"></div>
    <div class="col-sm-6 col-md-4 col-lg-3">3</div>
    <!--Перед блоком md, который должен начинаться с новой строки-->
    <div class="clearfix visible-md-block"></div>
    <div class="col-sm-6 col-md-4 col-lg-3">4</div>
    <!--Перед блоком sm, который должен начинаться с новой строки-->
    <div class="clearfix visible-sm-block"></div>
    <div class="col-sm-6 col-md-4 col-lg-3">5</div>
    <div class="col-sm-6 col-md-4 col-lg-3">6</div>
  </div>
</div>

Создание адаптивного макета с помощью Bootstrap 4

Процесс создания адаптивного макета с использованием Bootstrap 4 выполняется почти также как и на Bootstrap 3.

Для примера сверстаем следующий макет.

<section class="a">
  <div class="container">
    <div class="row">
      <div class="a1 col-lg-6">A1</div>
      <div class="a2 col-lg-6">A2</div>
    </div>
  </div>
</section>

<section class="b">
  <div class="container">
    B
  </div>
</section>

<section class="c">
  <div class="container">
    <div class="row">
      <div class="c1 col-sm-6 col-lg-4">C1</div>
      <div class="c2 col-sm-6 col-lg-4">C2</div>
      <div class="c3 col-lg-4">C3</div>
    </div>
  </div>
</section>

<section class="d">
  <div class="container">
    <div class="row">
      <div class="d1 col-sm-6 col-lg-3">D1</div>
      <div class="d2 col-sm-6 col-lg-3">D2</div>
      <div class="d3 col-sm-6 col-lg-3">D3</div>
      <div class="d4 col-sm-6 col-lg-3">D4</div>
    </div>
  </div>
</section>

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

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

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

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

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

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

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

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

4. Улучшенная и более точная веб-аналитика. Сайт один (а не два, как с мобильной версией) — поэтому проще вычислять ключевые показатели эффективности бизнеса.
5. Экономнее в долгосрочной перспективе. Вместо того чтобы каждый раз разрабатывать сайт для разных размеров экрана, адаптивный веб-дизайн можно создать только один раз.
6. Лучший пользовательский опыт. Например, в розничной торговле покупатель может начать свой путь с мобильного устройства, а продолжить его с десктопа или ноутбука. Можно поддерживать пользовательский опыт в каждой точке взаимодействия.
7. Более простое администрирование. Один сайт — быстрее и легче.
8. Лучшая адаптация для SEO. Отсутствует дублирование контента, как в случае с двумя и более версиями сайта.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Теперь переходим к оставшимся маркерам.

Относительность и размеры

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

Относительные значения определяют 4 главных параметра:

1. Ширину (width);
2. Высоту (heights);
3. Межблоковое расстояние или отступы (margin);
4. Отступ от контента до границы блока (padding).

Все вышеуказанные параметры чаще всего прописываются в процентном соотношении. Также допустимо задействовать vw* и vh* (только внутри div-тега):

• vw (сокращенно от Viewport Width) – процентная величина от суммарной ширины области viewport’а (пользовательская область просмотра);
• vh (сокращенно от Viewport Height) — процентная величина от суммарной высоты viewport’а.

Breakpoints

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

Размеры экранов для адаптивной верстки

Контрольные точки по умолчанию принято использовать с каноническими значениями плотности пикселей:

• Мониторы full-hd — от 1920 px.
• Мониторы низкого класса (не full-hd) — от 1280 px.
• Мобильные устройства высокого класса (смартфоны) — от 320 px.
• Нетбуки — от 1024 px.
• Планшеты — от 768 px.

Фреймворки на основе стилей

Чтобы прописывать CSS, необязательно редактировать код в ручную. Начинающие верстальщики могут воспользоваться готовыми библиотеками фреймворков, чтобы загрузить шаблон CSS сразу в Title страницы.

Фреймворков очень много, но мы рекомендуем воспользоваться проверенными решениями: Pure или Bootstrap. Если по каким-то причинам они не подошли, есть еще один хороший вариант — Bulma.

Размерность шрифтов

Адаптивная верстка подразумевает использование 2 единиц — em (допускает вариативность для любого элемента документа) и rem (задается один раз на страницу). Em — это размер шрифта, который используется на смартфоне или другом мобильном устройстве по умолчанию. Прописываем 3em — получаем шрифт втрое больше, чем главный шрифт страницы для конкретного устройства.

Практика. Как сделать адаптивную верстку на примере

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

Шаг №1 — создаем html файл

Формируем скелет будущей html страницы.

Шаг №2 — добавляем тег <style>

В начало созданного html файла добавляем тег <style> — для определения стилей компонентов страницы. Делаем отступ 0 и добавляем гибкий контейнер (display: flex и flex-wrap: wrap). Затем указываем ширину и минимальную высоту (в пикселях) для элементов aside и main:

Шаг №3 — формируем размеры блоков для мин. разрешения 990px

Вводим первый медиазапрос, чтобы указать минимальную ширину элемента (990px) и добавить параметры aside (flex: 33,3% или <=990px) и main (flex: 66,6 %):

Шаг №4 — формируем размеры блоков для мин. разрешения 1400px

Вводим второй медиазапрос — указываем минимальную ширину элемента 1400px и аналогично прописываем aside (flex и max-width: 25%) и main (flex и max-width: 75%):

Шаг №5 — итоговый html файл

В итоге, целый код может выглядеть следующим образом:

Синтаксис

Давайте закрепим то, что мы делали в примере выше. Начнем с синтаксиса.

Синтаксис подразумевает ввод медиазапроса через правило @media. Условия разделяется оператором (not, and, or), далее указываются параметры. Ширина, высота, ориентация страницы, соотношения разных элементов, либо разрешение экрана — все это параметры @media.

Для resolution (разрешение экрана) допустимо использовать любую из 3 единиц: dppx, dpi или dpcm (кол-во точек на пиксель / дюйм / сантиметр соответственно).

Для width разрешено задать минимальную и максимальную ширину. Аналогично — для heights (высоты) и aspect-ratio (форматного соотношения). Свойство CSS aspect-ratio позволяет создавать блоки с пропорциональными размерами, при этом высота и ширина блока автоматически рассчитываются как соотношение.

Образцы значений для aspect-ratio

Стандартное значение orientation в адаптивной верстке — горизонтальное (альбомный лист) или вертикальное.

Пример

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

А этот код указывает ширину и высоту страницы:

Плотность пикселей, ориентация страницы задаются аналогично.

Размер элементов в адаптивной верстке

Аналогичным образом (при помощи указания минимального и максимального значения) прописываются размеры компонентов на странице. Взгляните на этот фрагмент:

Мы установили максимальную высоту для элемента 1900 px. Также обратите внимание на указание height в процентах.

В указании размера элементов нет ничего нового:

• max-height — максимальная высота.
• max-width — максимальная ширина.

С минимальными значениями все аналогично: min-height и min-width по высоте и ширине, соответственно.

Адаптивная верстка изображений

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

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

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

Что делать, если нет поддержки CSS3. Альтернативы адаптивной верстке

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

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

В нестандартных ситуациях «стили» можно заменить на jQuery. Код, в этом случае, может выглядеть следующим образом:

Резюме: главные законы

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

1. Размер компонентов страницы

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

2. Стабильность + гибкость

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

3. Оптимизация изображений

Медиафайлы, особенно изображения, должны использовать компрессию. Вектор — для малодетализированных изображений, растр — для высокодетализированных.

4. Верхняя граница — камертон

Размер изображений назначается исходя из верхней границы экрана (этот компонент есть абсолютно на всех устройствах). Кроме этого, сама координатная система остается относительной — ведь картинка с разрешением 360 пикселей совершенно по-разному выглядит на экране айфона и Full HD-монитора.

5. Шрифты в адаптиве

Один из самых простых способов сделать шрифты отзывчивыми — изменить их в соответствии с размером области просмотра (viewport) или размером окна браузера. Существуют различные единицы области просмотра (относительно осей окна браузера), предоставляемые CSS, которые и будут использовать при создании адаптивных веб-страниц. Шрифты в адаптиве могут иметь формат TTF или просто загоняться в веб.

6. Вложенность

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

Чек-лист: что нужно знать, прежде чем внедрять адаптивный дизайн

1. Кроссбраузерность. Да, даже в 2022 году об этом приходится говорить. Убедитесь, что сайт будет ее поддерживать. За этим нужно обязательно проследить, чтобы юзабилити оставалось высоким независимо от того, какой браузер использует пользователь.
2. Акцент на один тип устройств. При разработке дизайна сделайте акцент на конкретный тип устройств, который приносит сайту наибольшую посещаемость.
3. Учитывайте масштаб сайта. Если речь идет об одностраничном лендинге, заточенном изначально только под мобильный трафик, нет особого смысла создавать сложный адаптивный дизайн. Можно создать универсальную мобильную версию под все типы устройств.
4. Адаптив или мобильная версия. Еще раз оцените функциональность и дизайн существующего сайта. Возможно, мобильная версия будет приемлемым вариантом на первоначальном этапе.
5. Сохранение функций. Если на сайте сложный функциональный элемент и его нужно сохранить для мобильных пользователей, путь только один — адаптивность.
6. Сохранение дизайна. Когда дизайн сайта целиком основан на слайдерах или больших фоновых изображениях, его придется значительно переработать, так как подобные элементы неизбежно будут страдать в адаптивном воплощении.
7. Тестинг, тестинг, тестинг. Обязательно проверяйте корректность поведения страницы на разных типах устройств. Смотрите, как ведут себя все важные элементы, например, кнопки в контактной форме. Нельзя отправлять верстку разработчикам, пока страница и все ее компоненты не будут протестированы для всех важных типов устройств.