Как сделать адаптивную верстку для сайта?

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

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

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

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

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

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

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

При более детальном подходе к адаптивной верстке количество элементов для отображения на экране увеличивается. Например, за счет добавления содержания, боковых колонок, медиа-запросов, нескольких разновидностей стилей – 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 в целом. Язык – английский, курс – бесплатный.

Курс «Frontend-разработчик» от Нетология

Курс «JavaScript-разработчик» от Skillfactory

Курс «Фронтенд-разработчик» от Skillbox

Вывод

Тезисно:

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