Не секрет, что все больше и больше людей получают доступ к Интернету с помощью своих мобильных устройств в дополнение или вместо настольных компьютеров. На самом деле в мире насчитывается почти 7 миллиардов мобильных пользователей. (Для справки, население мира в настоящее время составляет 7,7 млрд. Это много мобильной активности.)
Но то, что они делают на этих мобильных устройствах, еще более убедительно для таких маркетологов, как мы.
40% потребителей используют свои мобильные устройства для проведения исследований, прежде чем совершать покупки лично. Более половины регулярно совершают покупки со своими смартфонами, а 55% покупателей совершают мобильные покупки после поиска товаров в социальных сетях.
В результате компании, у которых есть отзывчивые веб-сайты, получают больше потенциальных клиентов и поддерживают растущее конкурентное преимущество по сравнению с компаниями, которые этого не делают.
Но что такое адаптивный дизайн сайта, как он работает и почему вы должны внести изменения? Цель этого руководства – ответить на эти вопросы, предложить некоторые убедительные статистические данные и научить вас основным функциям адаптивного дизайна, которые должен знать каждый маркетолог. Давайте начнем.
Адаптивный веб-дизайн больше не является предложением: это важная инвестиция для повышения узнаваемости бренда, диверсификации вашего пользовательского опыта (UX) и привлечения большего числа посетителей сайта.
Это также экономит ваше драгоценное время. Возможно, вам не удастся создать отдельный веб-сайт для каждого потенциального устройства, которое могут использовать ваши посетители, не говоря уже о будущих технологиях. Адаптивный веб-дизайн гарантирует, что ваш сайт совместим со всеми устройствами и дисплеями, чтобы обеспечить приятные впечатления … как современные, так и устройства, которые еще не были изобретены.
Давайте копать больше в почему Адаптивный дизайн так важен сегодня.
Почему отзывчивый веб-дизайн важен
Адаптивный дизайн позволяет вам охватить более широкую и заинтересованную аудиторию, где бы и как бы они ни предпочитали ориентироваться.
Что еще более важно, отсутствие адаптивного веб-дизайна может привести к обратному: оно может оттолкнуть ваш веб-сайт от клиентов, ищущих привлекательный мобильный опыт. Фактически, исследования показывают, что вы можете потерять до 90% своих лидов из-за плохого опыта, оптимизированного для мобильных устройств.
Есть много клиентов и доходов.
Давайте распакуем три основных преимущества адаптивного веб-дизайна.
1. Отзывчивый веб-дизайн помогает потребителям обнаружить ваш сайт.
Многие люди получают доступ к Google на своих мобильных устройствах, на самом деле 63%. Google также наказывает сайты, которые не предлагают адаптивный дизайн. Ваша индексация на мобильных устройствах в первую очередь может реально повлиять на рейтинг вашего веб-сайта и может привести к его сокращению на страницах результатов поисковой системы (SERP) в пользу веб-сайтов, которые предлагают потребителям удобный для мобильных устройств дизайн.
Поэтому, если большая часть вашей аудитории выполняет поиск на своем смартфоне (как указано в статистике выше), а их веб-сайт не имеет адаптивного дизайна, клиенты могут вообще не найти ваш веб-сайт.
2. Отзывчивый веб-дизайн держит покупателей на вашем сайте дольше.
Показатели отказов веб-сайтов на смартфонах составляют почти 40% (по сравнению с 27% для планшетов). Кроме того, веб-страница, которая загружается за пять секунд или меньше, гарантирует на 70% больше сеансов просмотра.
Пользователи мобильных устройств ожидают быстрых и качественных веб-сайтов (точно так же, как Google), ожиданий, которые может удовлетворить адаптивный дизайн веб-сайтов.
3. Отзывчивый веб-дизайн создает положительную узнаваемость бренда и доверие потребителей.
Наконец, 57% потребителей говорят, что они вряд ли будут рекомендовать компанию с плохо разработанным мобильным веб-сайтом. В том же отчете показано, что более половины онлайн-покупателей, которые разочарованы присутствием компании в Интернете, вероятно, будут негативно относиться к самой компании.
Адаптивный дизайн веб-сайта восхищает онлайн-покупателей, побуждает их рекомендовать ваш бизнес и заставляет их покупать больше.
Как сделать адаптивный веб-дизайн
что это можно сделать свой собственный сайт адаптивным, используя CSS и HTML. Но это все равно что ехать по длинным дорогам, когда есть автострада. В этом случае шоссе будет система управления контентом (CMS) или конструктор сайтов.
CMS – это программное обеспечение, которое позволяет вам создавать свой веб-сайт, не зная, как писать код, и включает в себя умение писать код для адаптивного дизайна. Разработчики сайтов – подобные инструменты, но они отказываются от некоторых функций, которые предлагает CMS в обмен на простоту использования и более низкие цены.
Адаптивный веб-дизайн может быть выполнен с использованием CMS или конструктора сайтов, которые облегчают адаптивный дизайн. Вот несколько распространенных вариантов.
1. CMS Hub
CMS Hub – это полностью размещенная и полностью интегрированная CMS. Он подключается к другим вашим инструментам HubSpot, чтобы вы могли предоставить унифицированные возможности маркетинга, продаж, обслуживания и навигации по сайту своим посетителям, клиентам и сотрудникам.
С точки зрения вашего опыта создания сайтов, CMS Hub предлагает готовые темы веб-сайтов, которые также оптимизированы для мобильных устройств, чтобы удовлетворить ваших посетителей и клиентов в любом месте, независимо от того, где они просматривают.
источник
2. WordPress
WordPress является самой популярной CMS в мире и поддерживает эту превосходную степень, предлагая одного из самых непосредственных создателей веб-сайта: редактора Гутенберга.
WordPress предлагает тысячи тем и шаблонов для начала работы, включая многочисленные шаблоны с адаптивным дизайном.
источник
примечаниеПосле того, как вы настроили тему для своего веб-сайта WordPress, подключите и конвертируйте своих посетителей с помощью бесплатных форм, живого чата, почтового маркетинга и аналитики, добавив плагин HubSpot WordPress.
3. Squarespace
Squarespace – популярный создатель сайтов, предлагающий отличные макеты сайтов и креативные инструменты.
Squarespace предлагает 60 мобильных оптимизированных шаблонов, из которых вы можете быстро создать свой сайт. В редакторе Squarespace вы также можете переходить с рабочего стола на планшет и на мобильное представление, чтобы обеспечить бесперебойную работу ваших проектов на разных устройствах.
источник
4. Wix
Wix – еще один конструктор сайтов, который предлагает бесплатные и платные подписки на сайты. Он предоставляет простой в использовании редактор перетаскивания, бесплатный хостинг и функции безопасности.
Все шаблоны Wix обеспечивают мобильную оптимизацию для посетителей. Как и Squarespace, редактор Wix позволяет увидеть, как выглядит ваш сайт на нескольких устройствах.
источник
В дополнение к созданию адаптивного веб-дизайна с использованием одного из инструментов CMS или создателей сайта выше, прочитайте этот блог, чтобы узнать, как оптимизируют их сайт для мобильного использования тоже.
Отзывчивые лучшие практики веб-дизайна
Благодаря интуитивно понятному CMS или конструктору сайтов адаптивный дизайн становится проще. Но даже если вы используете лучшую CMS, вы не можете компенсировать оптимизированный для мобильных устройств контент и мультимедиа; эта часть зависит от вас. Давайте поговорим о некоторых рекомендациях по адаптивному веб-дизайну, которые помогут вам создать максимально удобный для пользователей веб-интерфейс для своих посетителей и клиентов.
1. Не пренебрегайте кнопками.
Что вы хотите, чтобы посетители сайта делали, когда они приходят на ваш сайт? Действуй, верно? Это может быть, нажав на призыв к действию (CTA), как Узнать больше, скачатьили даже Купить,
Как посетители сайта взаимодействуют с этими кнопками, когда они находятся на вашем рабочем столе? Если эти CTA появляются, прокручиваются или находятся в нижней части вашего веб-сайта, вам может понадобиться пересмотреть, как мобильные посетители могут получить к ним доступ.
Например, предположим, что вы предлагаете основной CTA, как Получите бесплатный HubSpot в верхней части вашего рабочего стола, где посетители могут видеть, если с каждой страницы.
Однако, когда вы видите свой мобильный сайт, он не помещается в заголовок. Вместо того, чтобы полностью удалить ее, рассмотрите возможность перемещения кнопки или включения ее в меню бургера (три строки в верхнем углу), где посетители все еще могут видеть и нажимать на нее.
Кроме того, учитывайте размер интерактивных областей на вашем мобильном сайте. В отличие от рабочего стола, где посетители могут использовать курсор мыши для нажатия кнопок и ссылок, они используют свои пальцы для навигации по своему веб-сайту на своем смартфоне или планшете.
Рекомендуется, чтобы интерактивные элементы на мобильных устройствах имели высоту не менее 48 пикселей. Сюда входят кнопки, поля формы, онлайн-ссылки и навигация по меню.
2. Используйте масштабируемую векторную графику.
Если на вашем сайте есть иллюстрации или значки, они должны быть отформатированы как масштабируемая векторная графика (SVG).
источник
SVG можно масштабировать бесконечно, в отличие от других медиаформатов, таких как JPG и PNG. Это гарантирует, что ваш веб-сайт предлагает пользователям высококачественные возможности просмотра на любом устройстве. Они также помогают быстрее загружать ваш сайт, что, как мы уже обсуждали, полезно для пользовательского опыта и рейтинга SERP.
3. Убедитесь, что ваши изображения масштабируются.
Иллюстрации и значки – не единственный тип мультимедиа, размер которого изменяется на разных устройствах. Ваши изображения также должны масштабироваться.
Например, веб-сайтам для настольных компьютеров могут потребоваться изображения с разрешением 1200 пикселей, а для мобильных веб-сайтов – изображения с разрешением 400 пикселей. Использование более высокого разрешения на всех устройствах может снизить скорость страницы, поэтому такой подход не рекомендуется.
источник
Вместо этого рассмотрите возможность загрузки изображений с различным разрешением и указания, какое изображение вы хотите отобразить на каждом устройстве. Обычно это достигается путем назначения различных «мультимедийных» тегов для конкретных «исходных» объектов (например, планшета или мобильного устройства) в коде вашего веб-сайта.
примечание: HubSpot позволяет автоматически изменять размер изображения в контенте, что является еще одной причиной для создания адаптивного веб-сайта на CMS Hub!
4. Подумайте о своей типографии.
Шрифт, который выглядит красиво на вашем настольном сайте, может не читаться так же на мобильном устройстве, что в четыре раза меньше. Если посетители не могут прочитать ваш сайт, они, конечно, не будут ничего щелкать или покупать.
источник
В качестве альтернативы, сочетание шрифтов вашего сайта с мобильным интерфейсом может оставить у пользователей вашего компьютера отвратительные слова, которые слишком велики и противоречат вашему бренду.
Вот наши главные советы для отзывчивого оформления веб-дизайна:
-
Тип тела с 16 точками – практическое правило для настольного и мобильного веб-контента.
-
Избегайте сверхтонких шрифтов, которые исчезают на экранах меньшего размера.
-
Убедитесь, что все заголовки явно больше содержимого тела и субтитров.
-
Используйте контрастные цвета для вашей типографии, чтобы она не исчезала в фоновые цвета вашего сайта.
5. Воспользуйтесь преимуществами устройства.
Хотя потенциальные клиенты и клиенты не могут звонить вам на своих компьютерах, они, безусловно, могут звонить на своих смартфонах. Подумайте об изменении своего CTA и включите номер телефона вашей компании вместо электронной почты.
Кроме того, если в вашей компании есть мобильное приложение, попросите посетителей сайта открыть ваше приложение со своего веб-сайта, что они могут не иметь возможности делать на своих компьютерах.
6. Проверяйте свой сайт часто.
Как всегда, протестируйте свой отзывчивый сайт на разных устройствах и браузерах. Проверьте инструмент тестирования мобильных устройств Google, чтобы увидеть, как работает ваш сайт.
Этот удобный инструмент Мэтта Керсли также предоставит возможность просматривать ваш веб-сайт на устройствах разных размеров. Конечно, вы также можете использовать свои собственные мобильные устройства.
Адаптивные шаблоны веб-дизайна
Лучший способ обеспечить адаптивный дизайн вашего сайта – начать с адаптивного шаблона веб-дизайна. Ниже представлены пять красивых шаблонов, доступных на торговой площадке HubSpot Asset Marketplace, которые обеспечат посетителям вашего сайта удобную навигацию.
1. Адаптивный шаблон дизайна DjanGo
цена: 200 долларов
Шаблон DjanGo – это полностью настраиваемый и адаптивный шаблон сайта. Его современный минималистский дизайн позволяет посетителям сосредоточиться на содержании вашего сайта и информации о продукте.
2. Prodigy Отзывчивый дизайн шаблона
цена: Бесплатно
Шаблон Prodigy – это чистый шаблон веб-сайта, который достигает вашей аудитории благодаря великолепным медиа и множеству CTA. Автоматически преобразует ваш дизайн, чтобы соответствовать любому устройству, используемому посетителями вашего сайта.
3. Квантовый отзывчивый дизайн шаблона
цена: 75 долларов
Шаблон Quantum – это многоцелевая тема, которая захватывает вашу аудиторию смелыми заголовками и видео-фоном. Персонализируйте свой сайт с помощью различных макетов страниц и пользовательских модулей.
4. Адаптивный шаблон дизайна Калахари
цена: 199 долларов
Шаблон Kalahari – адаптивная тема, предлагающая динамическую навигацию и настройку на уровне страницы. Используйте этот шаблон, чтобы превратить вашу аудиторию в блестящие и выдающиеся CTA.
5. Отзывчивый шаблон запуска фрейма
цена: Бесплатно
Шаблон Startup Framework – это уникальный шаблон веб-сайта с жирным шрифтом и великолепной графикой. Соберите его в редакторе контента HubSpot и выберите из тысяч значков и десятков пользовательских модулей.
Реагируйте на свою аудиторию с помощью адаптивного дизайна
С таким большим количеством потребителей, делающих покупки и просмотр на своих мобильных устройствах, отзывчивый дизайн является необходимостью. Без этого вы можете потерять клиентов, клиентов и доходы.
Используйте эти инструменты, шаблоны и лучшие практики, чтобы начать работу с адаптивным веб-дизайном сегодня.
