Информация из этой статьи взята из ЧАСБесплатный курс по оптимизации веб-сайтов от Академии ubSpot. Пройдите полный курс, чтобы узнать больше об адаптивном дизайне и о том, как оптимизировать производительность вашего веб-сайта.

По всему миру, более 50% всей интернет-активности осуществляется на мобильных устройствах. Настольные компьютеры следуют за одним чуть более 45% от общей активности в Интернете, а планшеты составляют остальную часть.

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

Так как же создать эффективный мобильный опыт? Здесь на помощь приходит адаптивный дизайн.

Проще говоря, адаптивный веб-дизайн — это метод разработки веб-страниц, которые отображаются в оптимизированном виде на всех устройствах.

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

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

Как работает адаптивный дизайн?

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

Существует ряд рекомендаций по адаптивному веб-дизайну:

1. Кнопки: Палец человека намного больше, чем указатель на экране компьютера. Кнопки и гиперссылки должны иметь ширину не менее 48 пикселей и высоту 48 пикселей, чтобы все пользователи могли нажимать на них.
2. SVG-файлы: Масштабируемые файлы векторной графики определяют форму изображения в векторах, что означает, что их можно масштабировать бесконечно без потери качества изображения.
3. Адаптивные изображения: не все ваши изображения будут в формате SVG. Для этого вы будете использовать правила CSS для автоматической настройки размеров изображения в соответствии с размером экрана пользователя.
4. Шрифты: убедитесь, что ваш шрифт читается на всех устройствах. Как минимум, Google рекомендует использовать базовый размер шрифта 16 CSS-пикселей.
5. Особенности устройства: хотя потенциальные клиенты и клиенты не могут позвонить вам через свои компьютеры, они определенно могут это сделать со своих смартфонов. Рассмотрите возможность изменения параметра «Чат сейчас!» Призыв к действию «Позвоните сейчас!» и укажите номер телефона вашей компании вместо электронной почты.
6. Тест: Как всегда, протестируйте свой адаптивный веб-сайт на разных устройствах и в разных браузерах. Чтобы узнать, как работает ваш сайт в настоящее время, посетите Инструмент оценки веб-сайтов HubSpot.

Адаптивный веб-дизайн против. изолированные мобильные веб-страницы

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

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

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

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

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

Примеры адаптивного веб-дизайна

Если вы еще не используете адаптивный веб-дизайн, вам повезло, потому что в наши дни начать очень легко.

Например на Контент-хаб HubSpot В одиночку существуют сотни шаблонов, доступных бесплатно или купленных, и все они адаптивны прямо из коробки. Давайте посмотрим на пять замечательных примеров адаптивного веб-дизайна в действии. Разработчики HubSpot для некоторого вдохновения.

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

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

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

2. Города-побратимы Sunspace ' новый сайт дает 40% прирост дохода.

Sunspace Twin Cities специализируется на окнах для соляриев, предоставляя роскошные окна для крыльца домовладельцам и подрядчикам Миннесоты и Западного Висконсина.

Веб-сайт имеет функциональный пользовательский интерфейс, позволяющий максимально эффективно использовать пространство, доступное на настольных компьютерах, планшетах и ​​мобильных устройствах. И заголовок, и основной текст четко читаются, а простой дизайн позволяет содержимому веб-сайта говорить само за себя. И что самое приятное, когда компания обновила дизайн своего веб-сайта, они увидели Увеличение оборота на 40%.

3. Хонда СервисРедизайн B2B сайта.

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

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

4. Платформа энергетической устойчивости Net4energy редизайн для клиентов B2C и B2B.

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

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

5. ОТКРЫТЬ создать модульный дизайн сайта.

ACYP (Защитник прав детей и молодежи) хотел создать новый внешний вид своего веб-сайта и возможность управлять им в будущем. Для этого потребовались шаблоны страниц и модули создания с использованием функции перетаскиваемого модуля CMS HubSpot.

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

Чтобы узнать больше о том, как создать высокопроизводительный веб-сайт для увеличения трафика и потенциальных клиентов, посетите Бесплатный курс по оптимизации веб-сайтов от HubSpot Academy.