Как оптимизировать сайт под все устройства: Как оптимизировать сайт под мобильные устройства

Posted:

Дек 17, 2021

Comments:

Как оптимизировать сайт под все устройства: Как оптимизировать сайт под мобильные устройства — Веб-Центр, блог

Содержание

Как оптимизировать сайт под мобильные устройства — Веб-Центр, блог

У большого количества интернет-ресурсов нет адаптации под мобильные устройства, а зря. В марте 2022 года более 72% всего интернет-трафика — это смартфоны и планшеты. Если не заниматься мобильной оптимизацией, то ваш сайт будет терять посетителей, а компания – прибыль. Из-за неудобств в использовании неадаптированного сайта потенциальные клиенты могут сделать свой выбор в пользу конкурентов.

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

Содержание

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

Зачем нужна мобильная версия сайта

Чек-лист: как проверить оптимизацию мобильной версии сайта

Методы мобильной адаптации сайта

Верстка адаптивного сайта

Вторая версия сайта для мобильный устройств на поддомене

Ошибки в мобильной адаптации: проверьте ваш сайт

Вывод

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

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

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

Зачем нужна мобильная версия сайта

У поисковиков есть специальные системы оценивания мобильной оптимизации. Компании Google и Яндекс использует свои алгоритмы – «Mobile-friendly» и «Владивосток». Они анализируют адаптивность мобильной версии сайта и удобство использования.

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

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

Чек-лист: как проверить оптимизацию мобильной версии сайта

Существуют специальные сервисы для проверки веб-страниц. У Яндекса такой функционал реализован в Яндекс.Вебмастере: зайдите в «Инструменты» → «Проверка мобильных страниц». В строку вставьте URL страницы и нажмите «Проверить».

Результат проверки адаптированной мобильной страницы

Результат проверки страницы с ошибками адаптации под мобильные устройства

У Google тоже есть свой сервис – Mobile-Friendly Test. Вставьте вашу ссылку в строку и нажмите «Проверить страницу»:

Результат проверки сервисом Mobile-Friendly Test оптимизированной мобильной страницы

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

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

Как сайт web-c.ru отображается на экранах разных устройств

Для того, чтобы не допускать ошибок адаптивности, рекомендуем воспользоваться чек-листом для проверки мобильных страниц сайта:

Корректность отображения

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

Скорость загрузки страниц

Скорость мобильного интернета часто ниже, чем у стационарных устройств с кабельным подключением. В то же время чуть меньше 50% пользователей уходят со страницы, если она загружается дольше 3 секунд. Поэтому протестируйте, сколько времени открывается ваш сайт на телефоне. Для этого воспользуйтесь специальными сервисами, например Be1.ru или Google PageSpeed Insights.
На скорость сайта влияет оптимизация кода страниц, вес контента и качество сервера, на котором размещается сайт.

Удобство навигации

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

Заполнение форм и оформление заказа

Для мобильных устройств лучше уменьшить количество шагов при заполнении форм: большое количество полей при оформлении заказа могут отпугнуть посетителя.

Контакты на страницах

Контакты должны быть кликабельны, чтобы пользователь легко мог связаться с вами: набрать номер или перейти в мессенджер.

Тяжелый мультимедийный контент

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

Методы мобильной адаптации сайта

1. Верстка адаптивного сайта

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

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

Особенности метода:

✅ Быстрая реализация на этапе разработки.

✅ Сайт доступен с любого устройства по одному адресу.

✅ Все вносимые изменения отображаются в любой версии.

✅ Вы защищены от ошибочного дублирования контента.

❌ Код, который не используется в мобильной версии и задействуется для ПК, будет фоном подгружаться и влиять на время загрузки страниц.

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

2. Вторая версия сайта для мобильный устройств на поддомене

Отдельная мобильная версия — более затратное, но гибкое решение. Ее можно изменять, не затрагивая ПК-версию сайта.

Особенности метода:

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

✅ Настройка интерфейса и функционала происходит прицельно под мобильные устройства.

✅ У пользователя остается возможность перейти на основной сайт в любой момент.

❌ Необходимо создавать и настраивать поддомен.

❌ Под мобильную версию сайта на поддомене нужно писать отдельный шаблон, что увеличит затраты на разработку.

❌ Вы столкнетесь со сложностями поисковой оптимизации, так как придется вести работу с двумя сайтами.

Ошибки в мобильной адаптации: проверьте ваш сайт

1. Нечитабельный шрифт

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

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

Слишком мелкий шрифт. Применяйте стандартный размер текста не меньше 14 px: маленькие буквы сложно читать.

Отсутствие отступов. Блоки текста воспринимаются лучше, чем одна сплошная «простыня».

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

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

2. Корректность отображения элементов

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

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

Неправильный размер изображений. Картинка шире экрана и выходит за рамки устройства. В таком случае нужно сделать подстройку изображений под разрешение экрана.

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

3. Формы заказов

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

4. Контакты на страницах

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

5. Неоптимизированный мультимедийный контент

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

6. Низкая скорость загрузки страницы

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

Для проверки оптимизации мобильной версии сайта воспользуйтесь сервисом Google PageSpeed Insights. После анализа вы получите результат в баллах в соответствии со стандартами Google. А в подробном отчете будет информация о том, какие моменты стоит улучшить на вашем сайте.

Вывод

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

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

Оптимизация сайта для мобильных устройств — SEO на vc.ru

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

12 739
просмотров

Есть три основные и две дополнительные возможности оптимизации для мобильной выдачи.

1. Мобильные сайты

Содержание для десктопов и мобильных устройств находится на разных страницах с разными URL. Обычно мобильный сайт размещают на поддомене m. site.ru.

Если разработали мобильный сайт, не забудьте связать его страницы с десктопными специальными атрибутами. Для этого нужно на мобильных страницах настроить тег <link> с элементом rel=»canonical», указывающим на страницу для компьютеров. А на десктопных страницах — с элементом rel=»alternate», который укажет на соответствующую мобильную страницу. Каждой десктопной должна соответствовать только одна мобильная страница, а каждой мобильной — одна десктопная. Задать rel=»alternate» можно также с помощью специальных атрибутов в Sitemap. Поисковики поддерживают такие теги в sitemap.xml:

Настройте переадресацию. Необходимо настроить автоматическую переадресацию с помощью HTTP-запроса или JS. HTTP-запрос учитывает агент пользователя и перенаправляет посетителя на соответствующую версию сайта. В документации Google рекомендуется настроить 302-й ответ сервера для такого перенаправления. Перенаправление с помощью JS будет отнимать драгоценные секунды при загрузке страницы. Принцип работы скрипта: если минимальная ширина экрана устройства равна определенному значению в пикселях, то необходимо перенаправить пользователя на соответствующую страницу rel=”alternate”. Сначала браузер загрузит страницу, затем выполнит JS, а потом при необходимости перенаправит пользователя на подходящую версию.

2. Адаптивная версия

URL и HTML-код страниц на разных устройствах одинаковые, меняется только CSS — размеры и расположение элементов на странице в зависимости от величины экрана устройства.

Метатег передает браузеру информацию о ширине экрана устройства. В соответствии с этими данными браузер строит модель CSSOM. Справка Google

3. Динамический показ

По одному URL отдается разный HTML и CSS. Чтобы отправить корректный вариант кода страницы, сервер обращается к агенту пользователя через HTTP-запрос Vary. Если у пользователя мобильный агент, то сервер отдаст соответствующий код.

Vary сообщает серверу и браузеру о необходимости учесть агент пользователя, и поскольку Googlebot понимает HTTP-запросы при сканировании страниц, Vary указывает роботу на нахождение контента.

Сравнение трех основных вариантов адаптации сайта

Для наглядности занесем все, что можно сравнить, в таблицу:

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

Десктопная и мобильная версия остаются доступными по одному URL с одним HTML-кодом, сайт подстраивается под размер экрана любых устройств. Не возникает ошибок при определении агента пользователя и перенаправлении, потому что таких запросов просто нет. К тому же Google рекомендует использовать именно адаптивный дизайн для оптимизации ресурса. Однако в преимуществах адаптива кроются и его недостатки. Поскольку HTML одинаковый, нельзя точечно изменить контент для смартфонов и планшетов. Трудно добиться высокой скорости загрузки: «лишние» элементы скрыты от пользователя, но все равно время загрузки из-за них увеличивается.

Динамический показ

При динамическом обновлении URL остается одинаковым для разных устройств. Чтобы реализовать динамическое изменение сайта, не нужно настраивать переадресацию, а HTML и CSS можно изменить или упростить для мобильных, что повышает скорость загрузки. Однако при динамическом показе необходимо настраивать HTTP-запрос Vary для определения агента пользователя, а это создает дополнительную нагрузку на сервер. К тому же нужно создать варианты кода для разных устройств, сложно учесть непопулярные диагонали экранов, поэтому определение агента может работать с ошибками.

Разные URL

Хорошо поддаются оптимизации по скорости загрузки, снижают нагрузку на сервер, а страницы можно сделать удобными для пользователей с мобильными устройствами. К тому же есть возможность выбрать версию отображения. Поскольку это отдельный мобильный сайт, как правило, поддомен, то HTML, стили, URL одних структурных страниц будут разными. Необходимо настраивать HTTP- или JS-перенаправление пользователей с десктопов на мобильный сайт и наоборот. Помимо настройки перенаправлений, нужно связать десктопную и мобильную версию специальными атрибутами. Могут быть проблемы с дублированием контента.

Каким бы беспристрастным ни пытался казаться Google, официальная позиция по мобильным сайтам, как о способе оптимизации, четкая:

4. AMP

Accelerated Mobile Pages — технология Google для создания ускоренных мобильных страниц сайта. Рекомендуется внедрение AMP в первую очередь для информационных и новостных ресурсов, блогов. Обычная AMP открывается меньше чем за секунду, поэтому UX ускоренных страниц успешнее, чем на обычных. Это достигается за счет полного отказа от пользовательского JS. Не поддерживаются некоторые HTML-теги, страницы реализуются по одному шаблону, отсутствуют формы, виджеты. Чтобы автоматизировать настройку AMP, можно использовать специальные плагины для популярных CMS.

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

«Яндекс» не поддерживает AMP и не уважает атрибут rel=»canonical», поэтому иногда ускоренные страницы оказываются в выдаче «Яндекса». Их можно закрыть от индексации для робота ПС в robots.txt — с помощью метатега robots или с помощью HTTP-заголовка X-Robots Tag.

5. Яндекс.Турбо

Турбо-страницы — технология «Яндекса» для создания быстрых страниц даже при плохом интернет-соединении. Высокая скорость загрузки достигается за счет шаблонизированного создания страниц, отсутствия пользовательского JS. Сделать страницы похожими на основной сайт можно с помощью юзерского CSS. Создать Турбо можно в панели «Вебмастера» двумя способами: с RSS-каналом или YML-фидом. Турбо можно делать для информационных ресурсов и для интернет-магазинов. Турборезультаты в выдаче «Яндекса» помечаются специальным значком в виде ракеты.

В «Яндекс.Турбо» можно реализовать внутренний поиск (с переходом на десктопную версию), минимальную перелинковку для интернет-магазина, покупку в один клик и с корзиной.

Главное отличие «Яндекс.Турбо» от AMP заключается в том, что турбостраницы располагаются на домене «Яндекса», соответственно, ПС получает трафик, а бизнес — только возможность получить трафик на обычной версии.

Стоит внедрить ускоренные страницы «Яндекса» и Google, особенно для ситуативного и информационного контента. Однако не думайте, что Турбо и AMP заменят адаптивные и динамические сайты. По крайней мере, пока ограничено внедрение пользовательского функционала.

PWA

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

PWA — технология Google, которая сообщает сайту функциональность мобильного приложения. Прогрессивные веб-приложения — дополнительный способ оптимизации ресурса. Рекомендуется использовать их для оптимизации скорости и для доступа с мобильных устройств при плохом интернет-соединении.

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

PWA реализуется в рамках TLS — безопасного протокола соединения, поэтому по умолчанию любое прогрессивное веб-приложение является безопасным.

Из дополнительных плюсов: у вас появляется возможность отправлять push-уведомления пользователю, установившему сайт-приложение.

Клевые уроки по PWA и Service Worker: https://classroom.udacity.com/courses/ud811

Как проверить оптимизацию сайта под мобильные устройства

Проверить, оптимизирован ли сайт для смартфонов и планшетов, можно с помощью популярных официальных инструментов Google и Яндекс.

1. PageSpeed Insights

PageSpeed Insights — инструмент Google для проверки скорости загрузки страницы. Если мы говорим про оптимизацию, ускорение загрузки сайта и его версий — первая стратегическая задача. Из PageSpeed можно вытащить информацию об изображениях, которые нужно оптимизировать, о минификации CSS и JS, загрузке текста без веб-шрифтов. Рекомендации PageSpeed Insights хороши, однако не всегда объективны.

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

2. Google Mobile Friendly Test

Это инструмент, который заточен на проверку юзабилити мобильных страниц. Требуется только выбрать URL, вставить его в строку, далее следовать рекомендациям. Если вы увидели зеленое объявление: «Страница оптимизирована для мобильных устройств», не торопитесь радостно закрывать вкладку. Обратите внимание на подсказку: «Проблемы при загрузке страницы».

Там будет информация о ресурсах, которые Googlebot не смог загрузить. Обратите внимание на стили и скрипты, которые заблокированы для робота Google, по возможности откройте их для сканирования.

3. Яндекс.Вебмастер. Проверка мобильных страниц

Простой инструмент в «Яндекс.Вебмастере» с понятным отчетом. Дополнительно напоминает про отсутствие или наличие турбостраницы для проверяемого URL.

Отображаемые проблемы: наличие viewport, Flash-элементов, Java-апплетов, Silverlight-плагинов, Турбо-версии; горизонтальная прокрутка контента, величина шрифта.

1. Google Search Console. Удобство для мобильных

Отчет в Google Search Console по удобству использования мобильных сайтов показывает ошибки и количество страниц в поиске без ошибок.

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

Небольшой чек-лист по проверке мобильной версии

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

Высокая скорость загрузки на 2G, 3G.
Настроен протокол HTTP/2. Проверка: http2.pro.
Открыты для сканирования CSS и JS. Проверить можно в Google Mobile Friendly Test.
Интуитивно понятная навигация.
Шрифт не менее 12 px.
Кликабельные элементы не перекрывают друг друга. Проверить можно в Google Lighthouse.
Расстояние между интерактивными элементами не менее 48px. Проверить можно в Google Lighthouse.
Все ссылки кликабельны.
Для интернет-магазинов есть возможность покупки в один клик.
Номера телефонов кликабельные.
Есть иконки мессенджеров с переходом в этот мессенджер.
Pop-up и всплывающие окна не занимают весь экран смартфона или планшета, их удобно закрывать.
Текст занимает меньше одного экрана прокрутки.
В полях форм используется автозаполнение input type. Кстати, иногда достаточно только номера телефона, остальное узнает у клиента и заполнит ваш менеджер. Если недостаточно, то ввод телефона — первое поле в форме.
Уменьшен вес видео, аудио, изображений. Не тратим байты пользователя.
Внедрены фавиконки для разных браузеров и устройств.

Автор: Граевская Лилия, SEO Group Head,

Агентство RACURS

Как оптимизировать ваш веб-сайт для мобильных устройств

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

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

В этой статье мы поговорим о том, что такое mobile-first дизайн и почему он так важен. Во-первых, мы разберем , как подойти к мобильному дизайну. Затем мы покажем вам несколько практических способов оптимизации вашего сайта для смартфонов и планшетов. Давайте приступим!

Почему дизайн, ориентированный на мобильные устройства, так важен

Почти 84% населения мира владеет смартфоном и часто несколькими типами мобильных устройств. Это намного больше, чем количество людей, имеющих доступ к ПК и ноутбукам.

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

Неудивительно, что мобильный трафик резко вырос за последние годы. Он превзошел использование настольных компьютеров: более 54% всего трафика в Интернете приходится на мобильные устройства. Это по сравнению с примерно 43% от настольных компьютеров.

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

Что означает адаптивный веб-дизайн?

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

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

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

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

До недавнего времени об адаптивном дизайне не задумывались. Раньше мы разрабатывали веб-сайты для настольных ПК. Теперь, когда мобильный трафик на первом месте, мобильный дизайн тоже. Вот почему вы часто слышите термин «сначала мобильные» в кругах веб-дизайнеров.

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

Получите содержимое, доставленное прямо в ваш почтовый ящик

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

Как думать в первую очередь о мобильных устройствах Когда дело доходит до веб-дизайна

Брайан Клейтон, генеральный директор GreenPal, потратил девять месяцев на создание сайта своей компании с нуля. «Прямо у ворот возникли серьезные проблемы», говорит он. «Мы предполагали, что большинство наших пользователей будут покупать услуги по уходу за газоном со своего настольного или портативного компьютера. Но очень быстро стало ясно, что больше людей заходят на сайт со своих мобильных телефонов и планшетов, чем с настольного компьютера или ноутбука — 4 к 1».

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

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

«До того, как наш веб-сайт был перестроен для работы с мобильными устройствами, конверсия в мобильном браузере составляла менее 4%», — говорит он. «Это означает, что люди, которые пытались зарегистрироваться, отказались от процесса в 96% случаев».

После перестройки сайта, ориентированного прежде всего на мобильные устройства, Клейтон обнаружил, что 82% людей, которые инициировали процесс регистрации, чтобы получить бесплатную оценку стоимости, завершили весь процесс со своих мобильных устройств и планшетов. «Наш продукт, ориентированный на мобильные устройства, — единственная причина, по которой мы сегодня даже в игре», говорит он.

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

Оттачивайте свою аудиторию и запрашивайте отзывы клиентов

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

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

Зондра Уилсон, владелица салона красоты Blu Skincare в Лос-Анджелесе, обнаружила, что ее сайт не оптимизирован для мобильных устройств, только когда начала запрашивать отзывы у клиентов.

«Я просила своих клиентов написать отзыв, а они говорили, что не могут найти, куда его написать», вспоминает она. «Я спрашивал их о моем блоге или статьях, которые я публиковал, но они с трудом находили их. У них были проблемы с просмотром моего сайта на мобильных телефонах. Им пришлось много прокручивать вниз, прежде чем появилась моя первая фотография или какая-либо информация о моей компании. Они не знали, как перемещаться по моему сайту. Многие были разочарованы и не продвинулись дальше первой страницы».

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

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

Think Small (с точки зрения размера экрана)

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

Виталий Виноградов, генеральный директор Modern Place Lighting, обнаружил, что переход на мобильный дизайн привел к увеличению конверсий на 30% по сравнению с десктопным. «Важно удалить лишние плагины, всплывающие окна и любые другие блокираторы экрана в мобильной версии сайта», — говорит он.

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

«Вам нужно проектировать для малого», — объясняет Мэтт Фелтен, дизайнер продуктов из Лос-Анджелеса. «Ты должен быть немного более сосредоточенным. Вы должны сократить количество информации и контента». После того, как ваш мобильный сайт будет готов, вы можете обнаружить, что вам больше не нужно добавлять что-либо в настольную версию сайта.

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

Усовершенствуйте свой дизайн Эстетика

«Сегодня потребители ожидают более сложного дизайна» , — говорит Фельтен. «Увидеть бизнес-кейсы красивого и хорошо работающего веб-сайта — это большой толчок», — говорит он. «Если я владелец малого бизнеса и у всех конкурентов есть действительно хороший, отзывчивый веб-сайт, и я меньше чем за секунду не вынесу отрицательного суждения о моем продукте».

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

8 способов оптимизировать ваш веб-сайт для мобильных устройств

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

Мы рекомендуем вам потратить время на внедрение как можно большего количества этих методов, чтобы повысить вероятность того, что ваш веб-сайт будет хорошо работать на всех устройствах (и будет одобрен индексом Google для мобильных устройств). Давай приступим к работе!

1. Протестируйте свой сайт с помощью Google Mobile-Friendly Tool

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

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

Сделав это, вы можете пойти еще дальше, используя специальный инструмент для тестирования. К счастью, Google создал приложение, которое вы можете использовать бесплатно и которое покажет вам, соответствует ли ваш сайт стандартам для мобильных страниц. Соответственно, это называется инструментом Mobile-Friendly Test:

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

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

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

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

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

Чтобы дать вам пример, вы можете использовать CSS для реализации того, что мы называем диапазонами «медиа-запросов». С помощью медиа-запросов (или реагирующих точек останова) вы можете указать браузерам, когда загружать разные макеты для страницы, в зависимости от размера экрана, который они используют. Медиа-запросы являются важным компонентом библиотек HTML, CSS и JS, таких как Bootstrap:

Другие способы использования CSS, чтобы сделать ваш веб-сайт более отзывчивым, включают:

Создание макета сетки CSS. Сетчатые макеты CSS, такие как тот, который предоставляет Bootstrap, предлагают простой способ помочь вам настроить дизайн для различных размеров экрана. Наличие макета с четко определенными элементами может позволить вам настроить, как они отображаются и сколько места они занимают при каждом размере экрана.
Использование процентов размера для элементов макета. Как вы, возможно, знаете, CSS позволяет задавать высоту и ширину элементов, используя пиксели и другие единицы измерения. Чтобы сделать ваш сайт более отзывчивым, мы рекомендуем вам использовать проценты. Таким образом, такие элементы, как кнопки, должны плавно адаптироваться по мере уменьшения размера экрана.

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

Контроль расстояния между элементами. CSS позволяет определить расстояние между элементами, чтобы оставалось достаточно пробелов даже при уменьшении масштаба страницы.

Если вам удобно использовать HTML и CSS, разработка полностью адаптивного веб-сайта может оказаться проще, чем вы думаете. Однако, если вы используете систему управления контентом (CMS), такую как WordPress, весь процесс становится намного проще, поскольку вам редко приходится иметь дело с кодом, даже при работе над адаптивным дизайном.

3. Выберите адаптивные темы и плагины

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

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

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

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

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

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

4. Проверьте основные показатели веб-сайта

Основные показатели веб-сайтов являются частью недавнего обновления поисковых алгоритмов Google. Эти «жизненные показатели» представляют собой набор показателей, которые дают представление об общем пользовательском опыте. Есть три Core Web Vitals, а именно:

Краска с наибольшим содержанием (LCP). Этот показатель измеряет, сколько времени требуется для загрузки самого большого элемента на странице. Низкий показатель LCP означает, что страница в целом загружается быстро.
Задержка первого входа (FID). Целью этой метрики является измерение интерактивности. Оценка FID показывает, сколько времени требуется, прежде чем пользователь сможет взаимодействовать со страницей во время ее загрузки.

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

Оценить пользовательский опыт веб-сайта непросто. Таким образом, Core Web Vitals не дает полной картины общего пользовательского опыта сайта. Тем не менее, они позволяют вам измерить ключевые технические аспекты любой страницы, которые напрямую влияют на то, насколько они приятны для пользователей.

Кроме того, Core Web Vitals — это не просто теоретическое упражнение. Они напрямую влияют на поисковую оптимизацию (SEO) и ранжирование страниц. Google позволяет протестировать Core Web Vitals с помощью бесплатного инструмента PageSpeed Insights. Как только вы введете URL-адрес, PageSpeed Insights вернет обзор своих основных веб-показателей:

Так же, как и в случае с инструментом Mobile-Friendly Test, Google предоставляет конкретные предложения по улучшению, которые вы можете внести для оптимизации веб-сайта. Поскольку Core Web Vitals уделяет больше внимания производительности, большинство предложений, которые вы здесь увидите, связаны с оптимизацией скорости:

Имейте в виду, что PageSpeed Insights возвращает отдельные результаты для мобильной и десктопной «версий» вашего сайта. . Это означает, что вы можете получить разные наборы предложений для каждой версии. Сосредоточение внимания на предложениях по оптимизации для мобильных устройств значительно улучшит оба набора показателей.

5. Сократите время загрузки вашего сайта

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

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

Реализовать кэширование . При использовании кэширования некоторые файлы вашего веб-сайта будут сохраняться в более удобном месте (например, на локальном устройстве каждого посетителя), поэтому их не нужно загружать каждый раз при доступе к новой странице. Доступно множество бесплатных плагинов для кэширования, хотя некоторые планы хостинга, такие как DreamPress, включают эту функцию по умолчанию.
Использовать сеть доставки контента (CDN) . Вместо того, чтобы доставлять файлы с одного центрального сервера, CDN позволяет хранить их копии на нескольких географически разбросанных серверах. Это делает время загрузки более сбалансированным независимо от местоположения данного пользователя, а также снижает использование полосы пропускания.
Сжатие изображений . Большие файлы изображений часто являются причиной медленной загрузки. Сжимая их, вы можете уменьшить их размер, не влияя на их качество. Существует ряд бесплатных и премиальных решений, которые помогут вам в этом, включая плагин ShortPixel и инструмент TinyPNG.
Сократите свой код . Оптимизируя код CSS, HTML и JavaScript своего сайта, вы можете сделать его более эффективным и сократить время загрузки на драгоценные секунды.
Поддерживайте все аспекты вашего сайта в актуальном состоянии . Использование устаревшего программного обеспечения для работы вашего веб-сайта не только делает вас уязвимым для проблем с безопасностью, но и не позволяет ему работать с максимальной эффективностью. Постоянно обновляя свои плагины, темы и CMS, вы можете избежать этих проблем.

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

6. Измените дизайн всплывающих окон для мобильных устройств

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

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

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

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

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

7. Выберите надежный веб-хостинг

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

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

В большинстве случаев лучшим вариантом является использование плана хостинга Virtual Private Server (VPS), так как они, как правило, доступны по цене, но при этом предлагают потрясающую производительность. В DreamHost мы предлагаем широкий спектр тарифных планов VPS для всех типов проектов WordPress:

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

8. Создание мобильного приложения

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

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

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

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

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

Мобильная оптимизация не может ждать

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

Если вы используете WordPress, оптимизация вашего сайта для мобильных устройств становится намного проще. Использование правильных плагинов и тем поможет вам пройти долгий путь, как и предварительный просмотр того, как ваши проекты выглядят на мобильных устройствах. Объедините это с такими инструментами, как Google Mobile-Friendly Test, и относительно просто создать сайт, который фантастически выглядит на небольших экранах.

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

Как оптимизировать ваш веб-сайт для мобильных пользователей

Каждый может признать важность удобного для мобильных устройств веб-сайта, особенно после обновления алгоритма Google Mobilegeddon.

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

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

Что такое мобильная оптимизация?

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

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

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

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

Как оптимизировать веб-сайт для мобильных устройств

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

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

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

1. Составьте карту пути клиента.

Представьте себе Салли, молодого маркетолога, который только что переехал в Чикаго. На прогулке Салли проходит мимо парикмахерской и понимает, что ей нужно подстричься. Она вытаскивает свой телефон и ищет парикмахеров в Чикаго, которые специализируются на кудрях и окрашивании. Ее поиск в Google выдает Joann’s Stylez .

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

Когда Салли поздно вечером загружает свой ноутбук, чтобы проверить электронную почту, она обнаруживает электронное письмо от Джоанн , которое подтверждает ее встречу и дает ей возможность добавить ее в свой календарь. На следующий день, за 30 минут до встречи, она получает push-уведомление на свой рабочий компьютер с напоминанием о встрече.

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

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

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

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

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

2. Используйте микромоменты, насыщенные намерениями.

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

Google рекомендует маркетологам определять «микромоменты» на пути клиента:

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

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

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

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

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

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

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

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

Подтверждая эту интуицию, исследование смартфонов в США, проведенное исследовательским центром Pew Research Center, показало, что 99% владельцев смартфонов используют свои телефоны дома, 82% используют их в пути, а 69% используют свой телефон на работе каждую неделю. (Это исследование было проведено в 2015 году, но мы считаем, что оно все еще актуально, если не больше, сегодня.)

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

3. Рассмотрите (и пересмотрите) свои показатели.

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

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

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

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

4. Ощутите близость мобильного телефона.

Хорошо это или плохо, но я ложусь спать с телефоном (просматривая завтрашнее расписание и читая ночную медитацию) и просыпаюсь с телефоном (выключая будильник и проверяя погоду). Я общаюсь с моим партнером и моими лучшими друзьями каждый день — все через мой телефон. Когда мой однокурсник по программе MBA присылает GIF-ку, на которой Тайра Бэнкс ведет себя дерзко, я переключаю свой телефон на человека рядом со мной, и мы вместе смеемся.

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

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

5. Помните об основах и думайте наперед.

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

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

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

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

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

Вам пора: пора оптимизировать

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

Примечание редактора: этот пост был первоначально опубликован в июне 2015 года и обновлен для полноты информации.

This entry was posted in Популярное

Posted:

Comments: