Адаптивный дизайн сайта и как его создать

Различные типы устройств, с которых пользователи просматривают сайты, требуют создание такого дизайна, который одинаково хорошо смотрелся бы на экране монитора десктопа и на смартфоне. По данным 2020 года соотношение мобильного трафика к десктопному составляет 68:32. Адаптивный дизайн сайта позволяет ему выглядеть одинаково хорошо при любом размере экрана, от 320 до 1000 пикселей и при любом разрешении. Так, многие популярные ресурсы заметно теряют в качестве при просмотре их с монитора с разрешением FullHD. Забота об удобстве пользователей, своего рода кибертолерантность приводит к необходимости создавать адаптивный дизайн, удобный для просмотра с мобильных устройств. Поможет внедрение этого решения также при продвижении сайта.

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

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

• или масштабировать страницу;
• или прокручивать ее по горизонтали и вертикали.

Это неудобно, занимает много времени, интерес к ресурсу теряется. Адаптивный дизайн позволяет создать макет сайта таким образом, чтобы он автоматически подстраивался под любой тип просмотра. Он, как и другие виды компьютерного дизайна, основан на использовании языка стилей CSS. Также потребуется использование HTML5 и JavaScript. Подстраивая дизайн, требуется изменить указание единиц измерения, сделав это в процентах, но это не единственное изменение. При этом ввод цифровых параметров в процентах, а не только в пикселях нужно применять для всех элементов кода, в противном случае изображение может исказиться даже если пользователь изменит разрешение на 1-2 пикселя.

Основные принципы адаптивности:

1. Поточность — принцип отсутствия смещения информационных блоков в процессе изучения страниц сайта с гаджета относительно друг друга. Размещаясь потоком, они выстраиваются по вертикали вдоль страницы и просматриваются при прокрутке.
2. Относительность в измерении. Для установки размеров и координат верхней и нижней границы отражаемого на дисплее блока сайта используются не только абсолютные – размер в пикселях, но и относительные величины (проценты). Обычно все размеры выравниваются по верхней границе экрана.
3. Расположение элементов на экране должно определяться контрольными точками, это позволит избежать смещения их относительно друг друга.
4. Помещение содержимого сайта в специальную программную оболочку (wrapper) позволит растягивать ее для любого размера экрана, а изображение масштабируется уже внутри оболочки.
5. Применение одинаковых шрифтов, это снижает нагрузку на сайт.
6. Верное сочетание растровой для изображений с множеством элементов и векторной графики для единичных изображений. Размер картинок должен быть небольшим, это позволит страницам сайта быстрее загружаться на мобильное устройство.

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

Основной принцип адаптивного дизайна – текст должен читаться при любом размере экрана и при любом разрешении без использования зумов в браузере и других технологий. Изображения в высоком разрешении размещать для такого решения достаточно сложно, необходимо использовать ссылки на ресурсы типа библиотеки Sencha либо применять плагин Adaptive Images.

Почему так важен адаптивный дизайн

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

Отказ от адаптации приводит к тому, что с мобильного устройства пользователь просматривает меньшее количество страниц сайта и может не заметить наиболее интересные предложения, так, по данным 2020 года в среднем со смартфона просматривается 2,67 страницы ресурса, со станционарного компьютера – 3,95 страниц.

Google в 2015 году таким образом настроил свой механизм ранжирования выдаваемых страниц при поиске по запросам пользователей, что сайты, не имеющие адаптированной для мобильных устройств версии, начали терять позиции. Это вызвало дополнительную потребность в их создании. Индексация сайтов сейчас происходит в этом поисковике по принципу Mobile first, это значит, что при формировании выдачи используются только мобильные версии, десктопные учитываются во вторую очередь.

Принципы адаптации

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

1. Проектирование для мобильных устройств с самых ранних этапов создания сайта («mobile first»). Это значит, что еще на самом начале проектирования сайта он создается для просмотра именно с мобильных устройств. Принцип Мобайл Фёст предполагает разработку макета под смартфоны, разработка его настройки для десктопов происходит позже. Для конструирования используются готовые фреймворки (программные платформы), некоторые их них распространяются бесплатно.
2. Применение гибкого макета на основе сетки (flexible, grid-based layout). Модульная гибка сетка дизайна позволяет подстраивать любой блок и элемент под параметры страницы, отражаемой на экране. Сетки создаются на основе готовых фреймворков, среди наиболее популярных Sceleton, небольшая программа с готовым набором вкладок и кнопок для адаптивного сайта, Bootstrap. Среди элементов для создания гибкой сетки отдельно называют Variable Grid System, Gridpak, Semantic Grid.
3. Использование гибких изображений (flexible images). С тем, как изменяется размер экрана и размер шрифта, меняется и размер изображений на экране. Гибкие изображения не смещаются, не искажаются. Для достижения такого эффекта изображению в коде сайта дописываются дополнительные свойства max-width:100% и height:auto. Эти же характеристики могут применяться для адаптации размещенных на ресурсе видеороликов.
4. Работа с медиазапросами (media queries). Медиаапросы помогают создать адаптивный сайт при использовании методов компоновки элементов кода при помощи Flexbox и CSS Grid. Медиа-запросы помогают создать контрольную точку, относительно которой перераспределяются элементы страницы при изменении размера или разрешения.
5. Применение постепенного улучшения, когда невозможна мгновенная переориентация и изменения вносятся постепенно. В этом случае исключена ситуация, когда пользователи в течении длительного времени не будут иметь доступ к ресурсу.

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

Что вы получите благодаря адаптации ресурса к разным типам гаджетов

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

1. Сыграет свою роль фактор юзабилити. Адаптивная версия окажется удобнее для большинства пользователей, они начнут проводить на сайте больше времени, что активизирует общий рост трафика. Грамотно сделанная версия под мобильные устройства обеспечивает рост конверсии, повышение количества продаж. Сайт, просматриваемый с мобильного и его страницы, созданные для социальных сетей, будет получать больше положительных отзывов и лайков.
2. Продвижение сайта при выдаче в поисковых системах будет происходить более успешно, при СЕО-продвижении будет больше шансов занять верхние строчки.
3. Все особенности поведения посетителей, их манера просматривать страницы и переходить по ссылкам, различающиеся для десктопной и мобильной версии, учитывается на одном адресе сайта, нет необходимости делать две версии.
4. Отсутствие редиректов сокращает время загрузки, пользователь быстрее находит нужную информацию.
5. При адативной версии экономится бюджет на СЕО-продвижение, поисковики рассматривают только одну страницу, а не две, некоторые ресурсы до сих пор предлагают пользователю при входе на сайт выбрать десктопную или мобильную версии.
6. Пользователи смогут более оперативно реагировать на новости и обновления, с ними удобнее и быстрее ознакомиться со смартфона в пути, чем с десктопа дома.

Сейчас продвижение ресурса в поисковых системах Яндекс и Google при отказе от адаптивной верстки или мобильной версии невозможно.

Типы адаптивных макетов

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

Резиновый

Резиновый макет создается при помощи таблицы стилей. Он расширяется или сужается в зависимости от изменения размера окна браузера. В этом случае в разметке сайта отдельные блоки имеют не строго фиксированную ширину в пикселях, предусмотрена возможность изменения геометрических параметров блоков в зависимости от изменения ширины окна браузера. Макет подстроится под ширину окна, автоматически изменив размеры. Но не во всех случаях. Сейчас сайты просматривают при помощи смартфонов (размер экрана от 3" до 6"), планшетов (от 7" до 10"), ноутбуков (10" и выше), десктопов (19" и выше) и TV (32" и выше). Для смартфонов резиновый макет не подойдет, картинка будет искажена или блоки будут перестроены по горизонтали, создав одну длинную ленту, при чтении которой иногда трудно соблюсти последовательность.

Вариант переноса блоков

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

Поставив перед собой цель создать адаптивный дизайн, необходимо разработать программу адаптации, установить сроки, цели и задачи для каждого этапа. Если сайт разрабатывается «с нуля», необходимо использовать принцип mobile first, для уже работающего проекта необходимо разработать стратегию поэтапной адаптации. Одновременно решается задача адаптации сайта под мобильное устройства и под мониторы с любым разрешением, сейчас на рынке компьютерной техники их представлено более 20. Хорошо выполненный адаптивный сайт должен быть рассчитан на использование в этом макете в течении ближайших 5-10 лет, даже с учетом появления новых видов устройств.