Доклад на тему мобилизации существующего сайта от Артёма Цымпова — директора по технологиям www.eski.mobi

1. Мобилизация
существующего сайта
www.eski.mobi

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

3. Содержание
● Сравнение вариантов мобилизации (10 мин)
● Рекомендации, советы по UX (10 мин)
● ROI (5 мин)

4. Сравнение вариантов
мобилизации
Или адаптации...

6. Что такое
мобильные
устройства?

7. 3” 15” 23”
Смартфон
Ноутбук
Настольный ПК
19”11”7”

8. 3” 5” 7” 9” 11” 13” 15” 17” 19” 21” 23” 25” 27”
Смартфон
Ноутбук
Настольный ПК
Планшет
Появился
в 2010 г.

9. 3” 5” 7” 9” 11” 13” 15” 17” 19” 21” 23” 25” 27”
Смартфон
Планшет Ноутбук
Настольный ПК
Фаблет
20 миллионов
продано только в
2013 г.

10. 9” 11” 13” 15” 17” 19” 21”
Планшет Ноутбук
Настольн
лет
Гибрид:
Планшет + Ноутбук
Asus Transformer
Microsoft Surface
Lenovo Yoga
Sony VAIO Duo

11. 3” 5” 7” 9” 11” 13” 15” 17” 19” 21” 23” 25” 27”
На ладони На столе
Touch-screen
High DPI
На коленях
Смартфон
Планшет Ноутбук
Настольный ПК
Фаблет
Гибрид:
Планшет + Ноутбук

12. 3” 27”9” 15” 21”
Часы? ТВ?
Бесконечное
множество устройств

13. 3” 5” 7” 9” 11” 13” 15” 17” 19” 21” 23” 25” 27”
Смартфон
Планшет Ноутбук
Настольный ПК
Фаблет
Гибрид:
Планшет + Ноутбук
Сайт должен работать на ЛЮБОМ устройстве

14. Как это сделать?
Новый
адаптивный
сайт
Отдельный
сайт для
мобильных
Адаптация
существующег
о сайта

15. Как можно оптимизировать?
Новый
адаптивный
сайт
● Правильно
● Дорого
● Долго
Отдельный
сайт для
мобильных
● Понятно
● Дёшево
● Неудобно
Адаптация
существующего
сайта
● Реально?
● Недорого?
● Быстро?

16. Как можно оптимизировать?
Новый
адаптивный
сайт
● Правильно
● Дорого
● Долго
Отдельный
сайт для
мобильных
● Понятно
● Дёшево
● Неудобно
Адаптация
существующего
сайта
● Реально!
● Недорого!
● Быстро!

17. Адаптация существующего сайта
1. Конструктор
2. Отдельный шаблон для CMS
3. Dynamically-served JavaScript
(используем в eskimobi)

18. 1. Конструктор
● dudamobile.com
● mobilizetoday.com
● bmobilized.com

20. 1. Конструктор
Итого:
● Для очень простых сайтов без JavaScript
● Мало вариантов кастомизации
● Быстро и дёшево

21. 2. Отдельный шаблон для CMS
Мобильный плагин + тема для вашей CMS
● Плагин определяет, что юзер = мобильный
● Применяется мобильный шаблон для сайта

22. wordpress mobile plugin
Замените слово на
название вашей
CMS и найдёте
готовое решение

23. 2. Отдельный шаблон для CMS
Итого:
● Для любого сайта на популярной CMS
● Полный контроль над мобильной версией
● Долго, если кастомизировать под свои задачи

24. 3. Dynamically-served JavaScript
Загружается оригинальный HTML сайта, но
применяется другой JS + CSS.

25. 3. Dynamically-served JavaScript
● Рекомендует Google
http://goo.gl/WNCyoP

26. 3. Dynamically-served JavaScript
Итого:
● Делаем сайт адаптивным с другого конца
● Для продвинутых
● Быстрый запуск
● Без интеграции с CMS или API

27. Что же выбрать?
1. Конструктор
2. Отдельный шаблон для CMS
3. Dynamically-served JavaScript
или
4. Сделать совершенно новый адаптивный сайт

28. Быстро
Дёшево Хорошо

29. Дёшево
Конверсия
Удобство
поддержки
Скорость
загрузки

30. Быстро
Дёшево Хорошо
Конструктор
Шаблон для
CMS
Dynamic JS
Новый
адаптивный

31. Рекомендации,
советы по UX
Для мобильных / адаптивных сайтов

32. Что значит “качественно”
1. Удобная навигация
2. Телефоны click-to-call
3. Не WAP-стиль
4. Разумная группировка элементов (хорошая вёртска)
5. Контент в полном объёме (не урезан)
6. Ссылки и кнопки — под размер пальца

33. 1. Удобная навигация

34. Шапка
занимает
больше
половины
экрана.

35. Нет доступа
к каталогу.

36. Нет номера
телефона.

37. 2. Телефоны click-to-call

38. Телефон не
нажимается
вообще.

39. Нажимается, но
без кода (+7)
или (8).
Дозвониться не
получится.

40. Ссылка без
кода города
и (+7)

41. 3. Не WAP-стиль

42. Кто ваша аудиотория?
или

43. 4. Разумная группировка элементов

44. 5. Контент в полном объёме

45. На
мобильной
версии нет
нужной
информации

46. На
мобильной
версии нет
нужной
информации

47. 5. Контент в полном объёме

48. 6. Ссылки — под размер пальца

49. Что значит “качественно”
1. Удобная навигация
2. Телефоны click-to-call
3. Не WAP-стиль
4. Разумная группировка элементов (хорошая вёртска)
5. Контент в полном объёме (не урезан)
6. Ссылки и кнопки — под размер пальца

50. ROI
Возврат инвестиций

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

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

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

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

55. Вопросы?
Артём Цымпов
Директор по технологиям в
www.eski.mobi
facebook.com/tsympov