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

1. Как заработать на мобильной
аудитории сайта
www.eski.mobi

2. Артём Цымпов
Директор по технологиям в eski.mobi

3. Интернет аудитория (±)
↑40%↓60%
Смартфоны и
планшеты
Настольные
ПК и ноутбуки
Данные: исследование TNS Web Index (Декабрь 2013 г.)

4. Мобильный сайт
Мобильная версия
Адаптивный
Responsive

5. Оптимизировано
для мобильных
устройств
✔
ный сайт
ная версия
ный
sive

6. Мобильные устройства
iOS Android Win Phone

7. Мобильные устройства
Opera Mini Win Mobile Symbian

9. Проблема
– Нечитаемый текст
– Неудобная навигация
– Мелкие кнопки и ссылки
– Медленно загружается
————————————
= Неудачный опыт,
потеря клиента

10. Проблема
– Нечитаемый текст
– Неудобная навигация
– Мелкие кнопки и ссылки
– Медленно загружается
————————————
= Неудачный опыт,
потеря клиента
Это ненормально!

11. Мобильная версия
– Нечитаемый текст
– Неудобная навигация
– Мелкие кнопки и ссылки
– Медленно загружается
—————————————
= Неудачный опыт,
потеря клиента
Вот это нормально!

12. Мобильная версия
+ Читаемый текст
+ Удобная навигация
+ Крупные кнопки, ссылки
+ Быстрая загрузка
——————————
= Счастливый юзер
– Нечитаемый текст
– Неудобная навигация
– Мелкие кнопки и ссылки
– Медленно загружается
—————————————
= Неудачный опыт,
потеря клиента

13. Зачем адаптировать сайт?
Среднее увеличение конверсии
среди мобильной аудитории
+50%
Данные мобильных сайтов Big Ben, Hoff, Такси Ритм, Avall, Олант.

14. История успеха Hoff.ru
+50%
Увеличение
конверсии после
запуска мобильной
версии

15. История успеха Econika.ru
+44%
Увеличение
конверсии после
запуска мобильной
версии

16. История успеха Dostavka.ru
+65%
Увеличение
конверсии после
запуска мобильной
версии

17. Как применить
результаты e-commerce
для контентных проектов?

18. Что может быть конверсией
● Покупка
● Регистрация
● Глубина просмотра
● Время на сайте
● Клик на рекламу
● Любое целевое действие

19. ● Покупка
● Регистрация
● Глубина просмотра
● Время на сайте
● Клик на рекламу
● Любое целевое действие
Что может быть конверсией

20. ● Покупка
● Регистрация
● Глубина просмотра
● Время на сайте
● Клик на рекламу
● Любое целевое действие
Что может быть конверсией
● Удобная навигация
● Читаемый текст
● Эффективная реклама
=

21. Удобная навигация
● Быстрый доступ ко всем разделам
● Крупные кнопки и ссылки
● Читаемый текст

22. Плохой пример

23. Хороший пример

24. Хороший пример

25. Размер кнопок под палец
Регистрация
Регистрация
Мин — 44px
Вход

26. Читаемый текст (не менее 14px)
Россия будет настаивать на оплате
украинского газового долга для
возобновления поставок
Договоренность об оплате По итогам
трехсторонних газовых переговоров
между представителями России,
Украины и ЕК 26 сентября было решено,
что Украина до конца октября выплатит
России $2 млрд, а до конца года доведет
сумму выплат до $3,1 млрд.
Россия будет настаивать
на оплате украинского
газового долга для
возобновления поставок
Договоренность об оплате
По итогам трехсторонних
газовых переговоров
между...

27. Плохой пример

28. Неплохой пример

29. Улучшаем

30. Эффективная реклама
● Не full screen
● Не мешает просмотру сайта
● В стиле сайта (шрифт, цвет)

31. Баннер на весь экран = плохо

32. Уже лучше

33. Плохой пример
Треть экрана iPhone 5
занимает баннер.
На iPhone 4 — почти
половину.

34. Эффективная реклама
Баннер в самом верху.
Размер — не больше
самой шапки.

35. Эффективная реклама
Рекламный блок в
середине страницы.
Визуально не
выделяется.

36. Эффективная реклама
Контекстный блок.
Шрифт и цвет
повторяет стиль
сайта.

37. Эффективная реклама
Контекстный блок.
Шрифт и цвет
повторяет стиль
сайта.

38. Улучшаем поведенческие факторы
● Удобная навигация +16%
● Читаемый текст +16%
● Эффективная реклама +16%
+50%

39. Окей. Хочу сделать сайт удобным!
● Самостоятельно
● Фрилансер
● Студия

40. Технологии
● Плагин или отдельный шаблон для CMS
● Конструктор
● Адаптивный дизайн

41. Плагины для CMS
● WordPress Mobile Pack
● Bitrix Mobile
● Drupal Mobile Tools
● Mobile Joomla

42. Конструкторы
● Dudamobile.com
● Gomobi.info
● Mobilizetoday.com

43. Адаптивный дизайн
● Адаптивная вёрстка каждой уникальной страницы.
Нет универсальных инструментов.

44. ❏ бесплатно + сердито + долго
❏ дёшево + неплохо + недолго
❏ дорого + хорошо + быстро
Окей. Хочу сделать сайт удобным!
● Самостоятельно
● Фрилансер
● Студия

45. Выводы
● Изучите статистику: раздел мобильные устройства
● Выберите лучший способ мобилизации
● Не допускайте ошибок при мобилизации
● Примеры хороших сайтов — http://mobitaste.com/

46. Вопросы?