Итак, вы вовремя подсуетились и создали мобильную версию собственного сайта. Что делать дальше? Как сделать его ещё дружелюбнее по отношению к владельцам смартфонов? Отвечаем на этот вопрос и даём практические рекомендации.
1. Настройте формы обратной связи
Клиенты периодически используют форму обратной связи на сайтах. Однако многие из них так и не добираются до конца, потому что не любят продираться через дебри формуляров со смартфона. Вот несколько советов, чтобы пойти навстречу пользователю.
- Включайте только самые необходимые поля. Пользователь не станет заполнять форму, если от него потребуют девичью фамилию бабушки. Форма должна быть максимально простой: например, графы «Имя», «Фамилия», «Отчество» лучше всего объединить в одну — «Полное имя»;
- Добавьте выпадающие списки. Не заставляйте пользователя вбивать всё вручную — на смартфонах гораздо проще выбрать пункт из списка. В качестве альтернативы можно добавить предиктивный поиск: пользователь начинает набирать слово, после чего высвечиваются наиболее подходящие варианты;
- Добавьте возможность сохранить данные. Покупатель может случайно обновить страницу, а может начать сомневаться в покупке. Если он вернётся на страницу заполнения и обнаружит, что введённые данные никуда не пропали — плюс балл;
- Сделайте кнопку подтверждения заметной. Последний шаг — он важный самый: кнопка подтверждения должна быть достаточно броской, чтобы она была видна пользователю сразу.
Чтобы довести форму до ума, стоит убрать автоматическую коррекцию и вместо этого включить параметр autocapitalize. Никому не понравится, если его фамилию попытаются исправить на более знакомое словарю слово, а вот автоматическое написание с заглавной буквы уже хороший тон.
В помощь разработчику вашего сайта — сделать это можно следующим образом:
Фамилия: <input type=text size=20 autocorrect=off autocapitalize=words>
И, наконец, чтобы сделать жизнь мобильного пользователя ещё проще, используйте тип email для полей с электронным адресом. Тогда основная клавиатура пользователя пополнится кнопкой @, и ему не придётся переключаться на символы.
Email: <input type=email size=20>
2. Оптимизируйте контент
Есть множество способов оптимизировать дизайн под мобильных пользователей. Про самые базовые, вроде адаптированных изображений или больших кнопок, мы уже упоминали в своей статье. Поговорим о менее очевидных вещах, которым тоже стоит уделить внимание.
- Акцент на визуальном контенте. Под пользователей смартфонов выгоднее «расфасовать» информацию в картинки: с прищуром разглядывать буквы на ходу — сомнительное удовольствие. Там, где это возможно, лучше заменить очередной абзац наглядным изображением или инфографикой.
- Используйте стандартные шрифты. Красивые уникальные шрифты — круто, но не для пользователей: им придётся загружать лишнюю пачку файлов, прежде чем сайт предстанет перед ними в задуманном виде. Во время загрузки же ваша страничка будет выглядеть как-то так:
- Впрочем, решение есть. Если вы используете Google WebFonts, вы можете сначала вывести на экран стандартные шрифты, а уже после загрузки файлов рендер страницы поменял их на уникальные. Сделать это можно, добавив следующие условия:
<script src=‘//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js’></script>
<script>
WebFont.load({
google: {
families: [‘Open Sans’]
}
});
</script>
<style type=’text/css’>
.header {
font-family: Arial
}
.wf-opensans-n4-active .header {
font-family: ‘Open Sans‘
}
</style>
- Оставляйте только важную информацию. Для владельцев смартфонов контент сайта должен выглядеть несколько иначе, чем для пользователей десктопной версии. Долой радио на флеше, статистику пользователей онлайн или прогноз погоды — только основные функции сайта, чтобы дать клиенту быстрый доступ к тому, что он хочет. Располагайте элементы по мере их значимости: каталог магазина или призыв к действию лучше поместить в самый верх, тогда как ссылка на блог будет вполне уместно смотреться внизу.
- Контакты должны быть на виду. Не забывайте, с кем имеете дело: мобильные пользователи почти всегда на ходу, поэтому им важно иметь ваши контакты под рукой. Они не будут скитаться по сайту в поисках номера телефона или ближайших филиалов магазина — скорее всего, они попросту найдут другой. Можно даже встроить карту в ваш сайт, чтобы быстрее сориентировать потенциального клиента.
- Кое-что о картах. Если всё-таки решите встраивать карту в ваш сайт, делайте это аккуратно. Иногда встречается проблема: вы прокручиваете сайт, доходите до встроенной карты и начинаете скроллить уже её — прокрутить до конца самой страницы сайта уже не получается. Решения у проблемы целых три: либо вместо карты вставить её скриншот, либо оставлять полосы свободного места по бокам от карты, либо отключить прокрутку карты на мобильных устройствах (чтобы в ПК-версии всё работало нормально). Для этого используем функцию isMobile:
var isMobile = {
Android: function() {
return navigator.userAgent.match(/Android/i);
},
BlackBerry: function() {
return navigator.userAgent.match(/BlackBerry/i);
},
iOS: function() {
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
},
Opera: function() {
return navigator.userAgent.match(/Opera Mini/i);
},
Windows: function() {
return navigator.userAgent.match(/IEMobile/i);
},
any: function() {
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
}
};
И затем просто добавляем условие для отключения скроллинга:
if(isMobile.any()){
_map.behaviors.disable(‘drag’);
}
- Учитывайте освещение. Фактор, на который крайне редко обращают внимание в контексте мобильных пользователей — и очень зря: ваш сайт должен одинаково хорошо смотреться как в свете офисных ламп, так и под естественным освещением. Вспомните, как непросто изучать смартфон в особо солнечные дни. Ключ к решению лежит на поверхности: используйте контрастные цвета.
Приятный шрифт, минималистичный стиль и сущий ад для мобильного пользователя.
3. Грамотно продвигайтесь в соцсетях
Мобильный сайт очень хорошо работает в связке с продвижением в социальных сетях, так как большинство пользователей смартфонов практически живут там. Но формат постов для соцсетей тоже должен носить определённый характер. Прольём свет на несколько нюансов.
- Не делайте акцент на мультимедиа. Вопреки сложившемуся стереотипу, пользователи соцсетей не помешаны на картинках и видео. Ваш потенциальный клиент не дурак, и если группа посвящена товарам офисной мебели, то мемы с Пикабу будут сбивать его с толку. Хотя стоит учитывать, что даже тематическая картинка может отвлечь на себя слишком много внимания. Используйте вовлекающие изображения — например, картинку с крупным текстом на ней, так как пользователь в первую очередь цепляется взглядом именно за неё. После таких картинок клиентам должно быть интересно прочитать текст — а уже в нём излагайте основную мысль.
- Не бойтесь лонгридов. Да, мы упоминали выше, что большой текст не очень удобно читать на ходу. Однако если пост несёт в себе достаточно смысловой нагрузки, то, вполне вероятно, пользователь вернётся к нему, когда будет в более удобной обстановке. Лёгкие тексты с чёткой структурой очень тепло принимаются владельцами смартфонов. Один из популярных жанров — топы: несмотря на большой объём, тексты с названием а-ля «50 мест, которые стоит посетить в Италии» обычно прочитываются от корки до корки.
- Придерживайтесь формата. До пяти слов в заголовке, короткие абзацы и максимально информативный лид одной строкой — залог успешного поста. Не скупитесь и на другие способы вовлечь мобильного пользователя: подзаголовки, маркированные списки, опросы и другое.
4. Создавайте email-рассылку с учётом мобильных пользователей
В последнее время почту со смартфона читают всё чаще, чем с десктопа.
Это значит, что email-рассылка по-прежнему остаётся актуальным методом интернет-маркетинга — но акценты значительно сместились в пользу обладателей мобильных устройств. Что хочет видеть пользователь в своём почтовом ящике, запуская его в смартфоне?
- Краткий заголовок. Краткость — не только сестра таланта, но и первый шаг к привлечению внимания клиента. Вы можете позволить себе 30 символов максимум — на смартфоне остальное будет обрезано. Поэтому постарайтесь уместить в пять слов информативный и при этом интригующий заголовок.
- Напишите интригующий прехедер. Первые строчки письма высвечиваются в предварительном просмотре. Если заголовок и тема не смогли вовлечь потенциального клиента таким образом, чтобы он всё-таки отреагировал — то, возможно, прехедер перевесит чашу весов в вашу пользу. В среднем, на экран смартфона выводится 40-50 знаков из текста письма — в зависимости от смартфона и почтового сайта — так что постарайтесь следовать всё тем же принципам лаконичности и информативности.
Прехедер дополняет то, что не влезло в тему письма
- Осторожней с включением картинок. Не стоит составлять всё письмо из одной большой картинки — возможно, пользователь мобильного интернета сможет оценить всю красоту только спустя минуту загрузки файлов (к тому моменту уже пройдёт 50 секунд, как он закрыл письмо). Есть несколько решений этой проблемы. Можно составить ALT-текст (описание картинки, которое высвечивается, когда картинка не загрузилась) — но выглядит он неэстетично, да и отображается не во всех браузерах. Можно попросту использовать небольшие изображения — хорошо скажется на скорости загрузки, но такой формат актуален далеко не для всех видов бизнеса. Компромиссное решение — составить письмо таким образом, чтобы наличие картинок не повлияло на его восприятие в целом. Экспериментируйте и находите тот формат, который идеально подходит под ситуацию.
- Масштабирование и выравнивание. Не во всех браузерах включено автоматическое выравнивание писем, из-за чего на телефонах текст может съехать в левый верхний угол. Чтобы этого не случилось, используйте в письме адаптивный дизайн: таким образом, как бы вы не крутили смартфон — содержимое останется в центре экрана.
- Вся важная информация должна бросаться в глаза. Всё, что актуально для контента мобильного сайта, актуально и для мобильной рассылки: пользователи смартфонов хотят иметь всю важную информацию под рукой. Тут же позвонить по указанному телефону, тут же подписаться на группу в соцсетях, тут же перейти на конкретный раздел (поэтому навигацию по сайту тоже иногда стоит добавлять в текст письма) . Стоит ли упоминать, что призыв к действию тоже должен быть очевиден и обращать на себя всё внимание потенциального клиента. «Подпишись», «Воспользуйся скидкой», «Узнай подробности» — это и есть цель вашего письма, поэтому стоит продумать её как следует.
- Наконец, проводите исследования. Какими устройствами пользуются ваши клиенты, где они делают это чаще всего, какая у них скорость интернета — узнавайте как можно больше деталей, всё это поможет скорректировать рассылку в правильную сторону.
5. Убедитесь, что контент одинаково хорошо просматривается на всех платформах
Недостаточно проверить свой сайт на одном устройстве — у разных смартфонов, как минимум, разное разрешение, и это может повлиять на отображение страниц. Чтобы окончательно убедиться, что всё в порядке — проверьте сайт с помощью специального инструмента. Он покажет, как отображаются страницы с разных устройств.
Подведём итоги
Создание мобильной версии сайта — это лишь первый шаг навстречу пользователям смартфонов. Есть множество нюансов, которые необходимо учитывать при работе с мобильной аудиторией.
Они ценят удобство и эргономичность, для них важно создать как можно больше визуальных «якорей», за которые хочется зацепиться взглядом, они обладают очень рассеянным вниманием, и вам придётся пустить все силы на то, чтобы его удержать. Следуйте нашим советам, не бойтесь экспериментировать с форматом, будьте открыты к переменам — и ваш бизнес выйдет на принципиально новый уровень.
