Главная / Учебник / Урок 5.3. Адаптивный дизайн

Урок 5.3. Адаптивный дизайн

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

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

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

Но как сделать, чтобы лендинг шириной 1000 пикселей хорошо смотрелся на экране смартфона шириной 320 пикселей? Именно для решения этой проблемы используется адаптивный дизайн.

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

Рассмотрим сначала пример неадаптивного дизайна.

Так сайт смотрится на экране монитора ноутбука.

неадаптивный дизайн

А так - на экране мобильного устройства.

неадаптивный дизайн

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

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

адаптивный дизайн

Так - на телефоне.

адаптивный дизайн

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

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

Подробнее о сервисе

Каким должен быть адаптивный дизайн?

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

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

Ошибка 1. Кнопки и шрифт страницы слишком маленькие.

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

неправильный адаптивный дизайн

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

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

правильный адаптивный дизайн правильный адаптивный дизайн

Номер телефона также можно свернуть в иконку . При нажатии на нее будет происходить вызов по указанному номеру. Клиент может моментально связаться с Вами, очень удобно.

правильный адаптивный дизайн

Ошибка 2. Шрифт страницы слишком большой.

Если же размер текста вообще не уменьшать, он может оказаться слишком большим. Высота буквы в заголовке лендинга на мониторе ноутбука может быть 2 сантиметра, это вполне нормально. Но если такая же высота сохраняется для экрана мобильного устройства, то в строке будет вмещаться не более 5-6 букв, что также делает текст нечитаемым.

неправильный адаптивный дизайн

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

правильный адаптивный дизайн

Ошибка 3. Элементы страницы расположены неправильно.

Допустим, на странице есть секция с описанием преимуществ компании. Она состоит из 3-х пунктов, каждый из которых представляет колонку текста. Верстальщик задает ширину каждой колонки равной 33%, и все выглядит довольно неплохо на больших мониторах.

неправильный адаптивный дизайн

Однако, на мобильных устройствах имеем следующую картину.

неправильный адаптивный дизайн

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

неправильный адаптивный дизайн

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

Ошибка 4. Исходный размер изображений слишком большой.

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

Браузер будет в любом случае скачивать исходную картинку (например, 1920х1080 пикселей), рассчитанную на большие экраны, а затем уменьшать ее до размеров мобильного устройства. Получаем лишний трафик и большее время загрузки страницы, что особенно критично для мобильных устройств.

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

Ошибка 5. Отдельная версия лендинга для мобильных устройств.

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

Однако, есть и минусы. Во-первых, для внесения изменений придется править два варианта страницы, то есть умножаем время, затраченное на правки, на 2. Во-вторых, нужно будет решить вопрос с корректным учетом статистики, ведь теперь у нас две страницы, которые, по сути, должны являться одним целым. В-третьих, что делать с остальными устройствами? На сайт могут зайти с планшета, ширина которого 600 пикселей. Какой вариант показывать: страницу шириной 320 или 1000 пикселей? Скорее всего, ни та, ни другая не подойдут. Придется делать 3-ю и даже 4-ю страницу, что еще сильнее усугубляет первые два минуса. В-четвертых, нужно настроить правила перенаправления пользователей и следить, чтобы все работало. В-пятых, некоторым посетителям придется скачать два варианта страницы, сначала большой, затем (после перенаправления) маленький.

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

И так далее...

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

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

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

Подробнее о сервисе

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

Подведем итоги

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

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

Урок оказался полезным? Поделитесь им с друзьями!

Будем рады ответить на любые Ваши вопросы и комментарии. Новости платформы читайте в сообществе ВКонтакте.

← Урок 5.2. Сквозная аналитика