Оптимизация посадочных страниц для мобильных устройств — 10 передовых методов для достижения успеха
15-11-2012. Раздел:Мероприятия. Перевод. Теги:перевод, посадочная страница. |
Какая часть вашего интернет-трафика приходится на мобильные устройства? Десять процентов? Двадцать? Да вы вообще знаете это?Когда речь идет об оптимизации посадочной страницы, простое А/В-тестирование может добавить к конверсии 20-30 процентов. Хотя это и неплохой результат, такое небольшое поэтапное улучшение не имеет большого смысла, если при этом игнорируется существенное число посещений, совершенных с помощью мобильных устройств.К примеру, вашу страницу посещает, скажем, тысяча пользователей, и 2 процента из них (20) становятся покупателями. Вы проводите А/В -тестирование, что повышает конверсию на 25 процентов (5 пользователей). Тем временем 15 процентов (150 человек) из ваших посетителей практически игнорируются, и им предоставляется далеко не самый оптимальный интерфейс. Логичным будет признать, что имеет смысл сосредоточиться на этих 150, чем биться за 5 новых покупателей, тем более что пользователи с мобильными устройствами с большей вероятностью станут покупателями.«88% посетителей, осуществляющих поисковые запросы с мобильных устройств, предпринимают действие в течение 24 часов. Около 70% предпринимают действие в течение одного часа».~ Google Mobile Movement Study, 2011Пора поменять свою стратегию. Вместо разработки обычной посадочной страницы, задумайтесь об уникальном контенте и макете посадочной страницы для различных устройств и экранов всех размеров: десктопов, планшетов, смартфонов и так далее. Ниже приведены несколько советов, которые помогут вам в планировании.1. ДоступностьУбедитесь, что ваш контент доступен для мобильных устройств и виден на них. Флэш, фреймы, 24-битные изображения PNG и многочисленные плагины недоступны для мобильных устройств.Обновите свой сайт подходящими для мобильных устройств вариантами перечисленных технологий, например HTML5, jQuery, используйте форматы изображений JPG или GIF.
«После неудачного опыта просмотра сайта на мобильном устройстве 40% переходят на сайт конкурента».~ Compuware, “What Users Want from Mobile”, 20112. СкоростьВаши страницы для мобильных устройств должны быть небольшими по размеру (менее 20 KB в общей сложности) и загружаться не дольше 5 секунд.Основные факторы медленной загрузки такого рода страниц — количество запросов (загружаемые изображения, скрипты и т. д.), после чего идет число байтов (размер страницы), поэтому разработайте соответствующую стратегию.
Консолидируйте или удаляйте скрипты, оптимизируйте размер изображений для корректного отображения в мобильных устройствах, используйте спрайты, что позволит кэшировать одно изображение, а не много, используйте вместо изображений CSS и при необходимости воспользуйтесь другими советами по оптимизации работы вашего кода и контента для мобильных устройств.
Для определения времени загрузки и объема ваших посадочных страниц можно использовать такие инструменты, как W3C Mobile OK, mobiReady или Mobitest.«43% посетителей скорее всего не вернутся на сайт, медленно загружающийся на мобильном устройстве. 74% пользователей мобильных устройств ждут до 5 секунд; 60% ждут 3 секунды или меньше».~ Compuware, “What Users Want from Mobile”, 20113. ПоследовательностьДля смартфонов используйте одноколоночный макет и расположите приоритетный контент наверху. Пользователи мобильных устройств ориентируются на цель, в отличие от более ориентированных на выгоду пользователей ПК, поэтому непременно размещайте контент, ведущий к выполнению призыва к действию (например, «кликни, чтобы позвонить», «найти магазин»), на первом экране или в пределах первых 100 пикселей для смартфонов.Если ваш призыв к действию (СТА), возможно, будет находиться на экране ниже, обязательно включите тизер вроде «прокрути ниже, чтобы увидеть предложение» для сохранения вовлеченности.4. КраткостьВ зависимости от красноречия вашей обычной посадочной страницы, вполне возможно, что для оптимизации страницы с учетом мобильных устройств вам понадобится сократить текст вдвое.Размеры экранов бывают разные, поэтому размер страницы может уменьшиться приблизительно на 35% для планшетов и 65% для смартфонов.
Иными словами, сожмите заголовки из шести слов до трех-четырех, а маркированные списки из пяти пунктов — до двух-трех.Совет: В первую очередь создавайте контент посадочной страницы для мобильных устройств, чтобы избежать впоследствии его редактирования под различные размеры экрана. В идеале заголовки для мобильных устройств не должны превышать трех-четырех слов.
Однако все еще важно продать контент. Подойдите творчески к тексту и подумайте о преимуществах визуализации — иконки могут заменить или сократить текст. Каждое слово должно добавлять ценность, или его следует вырезать.5. УдобочитаемостьНеобходимо, чтобы пользователи могли прочитать страницу, не прибегая к увеличению ее масштаба. В идеале минимальный размер шрифта должен быть около 16 пикселей — значение по умолчанию для всех браузеров.Google указывает, что отсутствие у страницы ограничений на разрешение экрана является фактором, способствующим удобочитаемости на мобильных устройствах. Простая цветовая гамма, выраженный контраст текста и фонов и адекватное негативное пространство между элементами также играют большую роль для увеличения удобочитаемости.6. Удобство телефонной коммуникацииСамое главное действие пользователя с точки зрения как SEO, так и РРС — телефонный звонок, поэтому убедитесь, что в верхней части страницы виден ваш полный номер телефона.«61% пользователей мобильных устройств по завершении поиска в бизнес-целях совершают телефонный звонок».~ Google Mobile Movement Study, 2011Пользователи должны смочь нажать/кликнуть на номере телефона и совершить звонок, поэтому внедрите функциональность «нажми, чтобы позвонить», сделав номер гиперссылкой с протоколом tel:.
Пример значения гиперссылки: “tel:+16515551212″
Пример HTML:
<a href=”tel:+16515551212″>Call Now! (651) 555-1212</a>Советы касательно оформления призыва к звонку (СТС):
- Обязательно включайте префикс выхода на международную связь (значок «+» с последующим кодом страны) — благодаря этому смогут дозвониться пользователи, находящиеся за пределами своей страны
- Для быстрой визуальной ассоциации добавьте иконку «телефон»
- Добавьте призыв к действию в текст ссылки (например, «Позвоните сейчас», «Связаться со службой поддержки», «Нажми, чтобы позвонить» и т.д.)
- Повторите номер телефона в тексте ссылки для идентификации и упрощения вербального общения
- Рядом укажите часы работы (Крайне неприятно будет позвонить и обнаружить, что заведение закрыто!)
- Добавьте полезный и/или завлекательный текст (например, о гарантиях, рекламных акциях, отзывы и т.д.)
- Оформите ссылку как кнопку дополнительного цвета — так она будет выделяться (для облегченного адаптивного дизайна используйте кнопки CSS3, которые не требуют изображения)
- Все эти связанные с оформлением СТС советы неплохо учесть при проведении А/В-тестирования.
Microsoft: 38×38 пикселей (0.25″), Apple: 44×44 пикселей (0.30″)Примечание: Разрешение варьируется в зависимости от телефона, поэтому создайте набор разрешений и тестируйте соответственно.
- Увеличьте кликабельное пространство ссылок (например, 0,85 круглой шпации или 85% для текста)
- Убедитесь, что размер кликабельных изображений (например, иконок социальных сетей) подогнан под минимальный размер целевых зон
- Во избежание ошибочного клика между кликабельными зонами используйте интервалы (негативное пространство).
- Для облегчения выбора добавьте свободное место вокруг полей ввода и флажков.
- Максимально используйте плагины для JavaScript (jQuery), поддерживающие обработку жестов скольжения (например, Flexslider, Photoswipe)
- Используйте данные гео-IP для создания более быстрых, привязанных к местоположению посетителя и персонализированных посадочных страниц.
- Персонализируйте заголовки с помощью названия города или станций метро
- Перечислите представительства или магазины, расположенные неподалеку (например, «Магазины недалеко от Миннеаполиса»)
- Добавьте местный «акцент», используя местные термины или сленг (например, «таки да», «давай, до свидания» и т.п.)
- Устанавливайте центр карты и увеличивайте ее масштаб в соответствии с местонахождением пользователя
- Заполните автоматически поля форм с указанием местности
Независимо от общего количества действий, посадочная страница должна иметь только одну цель. Текст и иллюстрации должны вести к достижению одной цели. Если это возможно, не демонстрируйте другие действия, пока главное действие не будет завершено.«Одна страница — одна цель».~ Оли Гарднер, Unbounce (Landing Page Rehab)Примеры призывов к действию для мобильных устройств:
- Позвоните сейчас
- Найти магазин
- Посмотреть видео
- Свяжитесь с нами/Отправьте нам письмо
- Как к нам добраться (карта)
- Добавить в мой календарь
- RSVP
- Загрузить
- Оцените это
- Поставьте «лайк»
- Проголосовать
- Поделиться (укажите способ)
2. Скорость
3. Последовательность
4. Краткость
5. Удобочитаемость
6. Удобство телефонной коммуникации
7. Удобство использования пальцев
8. Свой среди своих
9. Простота формы
10. Побуждение к действиюТактика оптимизации посадочных страниц для мобильных устройств выходит за пределы основ оптимизации обычных посадочных страниц: необходимо сконцентрироваться на достижении простого удобства использования (чтение/клики), быстрой загрузки, на обеспечении наличия на странице минимального и при этом побуждающего действия и использовании функциональности, связанной с мобильными устройствами (гео-IP/клик, чтобы позвонить/и т. д.). Многие усовершенствования, применяемые к мобильным страницам, пригодятся также и для модернизации ваших обычных посадочных страниц.Для достижения специфичного для мобильных устройств режима отображения используйте скрипты обнаружения мобильного пользователя и CSS3 Media Queries для адаптивного веб-дизайна. (Этими техническими штуками пусть займется ваш веб-разработчик!) И как всегда, чтобы выяснить, что подходит вашим пользователям больше всего, используйте А/В-тестирование, отзывы пользователей и тесты, отслеживающие движение взгляда посетителей. У вас есть интернет-магазин? Страница компании? Представительство бизнеса в интернете? Мы расскажем, как продвинуть ваш сайт в ТОП Яндекса, Google и других поисковых систем! Уникальная возможность принять участие в рубрике «SEO-аудит» — отправить заявку на Этот e-mail адрес защищен от спам-ботов, для его просмотра у Вас должен быть включен Javascript с пометкой «В ТОП без гирь!». Для аудитов отбираются только 4 сайта в месяц. Попытай свою удачу.
Поисковое продвижение никогда не было проще!
Система автоматизированного продвижения SeoPult быстро выведет ваш сайт в ТОП поисковых систем, сохраняя деньги и время. Автоматика полностью исключает ручной труд, наценки посредников, ошибки или непрофессионализм.Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-11-26 » Капитан грузового судна, или Как начать использовать Docker в своих проектах
- 2024-11-26 » Обеспечение безопасности ваших веб-приложений с помощью PHP OOP и PDO
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-15 » Перенос сайта на WordPress с одного домена на другой
- 2024-11-08 » OSPanel 6: быстрый старт
- 2024-11-08 » Как установить PhpMyAdmin в Open Server Panel
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
- 2024-07-26 » Интеграция с Эквайринг
- 2024-07-26 » Интеграция с СДЕК
- 2024-07-26 » Интеграция с Битрикс-24
- 2024-07-26 » Интеграция с Travelline
- 2024-07-26 » Интеграция с Iiko
- 2024-07-26 » Интеграция с Delivery Club
- 2024-07-26 » Интеграция с CRM
- 2024-07-26 » Интеграция с 1C-Бухгалтерия
- 2024-07-24 » Что такое сторителлинг: техники и примеры
- 2024-07-17 » Ошибка 404: что это такое и как ее использовать для бизнеса
- 2024-07-03 » Размещайте прайс-листы на FarPost.ru и продавайте товары быстро и выгодно
- 2024-07-01 » Профилирование кода в PHP
- 2024-06-28 » Изучаем ABC/XYZ-анализ: что это такое и какие решения с помощью него принимают
- 2024-06-17 » Зачем вам знать потребности клиента
- 2024-06-11 » Что нового в работе Яндекс Метрики: полный обзор обновления
- 2024-06-11 » Поведенческие факторы ранжирования в Яндексе
- 2024-06-11 » Скорость загрузки сайта: почему это важно и как влияет на ранжирование
Лично я люблю землянику со сливками, но рыба почему-то предпочитает червяков. Вот почему, когда я иду на рыбалку, я думаю не о том, что люблю я, а о том, что любит рыба. (Дейл Карнеги / БИЗНЕС) |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.