Трагикомедия в двух актах с антрактом

1. Как мы делаем m.e96.ru
Коньшин Александр и Елькин Сергей
http://m.e96.ru
Dev team Instagram: e96_dev

2. Мобильная версия сайта e96.ru
Пьеса в 2-х частях с антрактом

3. Часть 1. История менеджера
В главной роли – Коньшин Александр

4. Немного о нас
— 13 место в рейтинге «Forbes» среди интернет-
магазинов в РФ по итогам 2013 года (ТОП-5 по
обороту на одного сотрудника в РФ)
— 18 место в рейтинге крупнейших продавцов
Рунета по итогам 2013 года (в составе IQ One
Holdings) по мнению «Коммерсанта»
— 3 место в рейтинге эффективности интернет-
магазинов электроники и бытовой техники (e-
Commerce Website Rank 2014)
4

5. Цифры
— Оборот более 4,5+ млрд рублей
— Более 3 000+ заказов в день
— Более 1 000 000+ пользователей в неделю
— Более 400 000+ товаров в ассортименте:
бытовая техника, электроника, детские товары,
сантехника, инструменты и многое другое
5

6. География
6
— 29 подразделений
(собственные и франчайзинговые)
— 18 регионов в РФ
— 900+ населенных пунктов

7. Мобильный трафик растет
Мобильный трафик растет!
— Рост проникновения интернета в РФ: телефоны +27% за год,
планшеты + 147% за год*
— Каждый день 59% российских пользователей Рунета проводят
время в мобильном Интернете**
— Лидеры роста мобильной аудитории – населенные пункты с
населением меньше 1 миллиона жителей
е96 – не исключение:
— Мобильный трафик в апреле 2014 вырос более чем в 3 раза
относительно апреля 2013
7
* TNS Web Index УИ, Россия 100k+, сентябрь 2013, Monthly Reach, % от населения, 12+ лет
** NewMR, Online Market Intelligence (OMI) – Мобильная Россия, лето 2013

8. Проникновение мобильного интернета
8

9. Прирост мобильных пользователей
9

10. Трафик есть, но покупают ли?
Мобильные пользователи покупают!
— Треть активности мобильных пользователей в США приходится
на поиск товаров и услуг*
— В США 87% пользователей используют мобильный интернет для
покупок**
— В РФ уже 15% пользователей используют мобильный интернет
для оплаты товаров и услуг, а 5% пользуются именно ИМ***
е96 – не исключение:
— Количество заказов с мобильных устройств в апреле 2014 выросло
в более чем в 2,5 раза по сравнению с апрелем 2013.
10
* UserZoom - MOBILE BENCHMARK STUDY
** MarksWebb Rank&Report- e-Commerce User Index 2014
*** TNS Web Index УИ, Россия 100k+, сентябрь 2013, Monthly Reach, % от населения, 12+ лет

11. Как покупают?
11

12. Реакция на мобильный тренд в РФ
12

13. Проблемы есть у большинства
Любопытные заметки:
— Вообще в РФ только 1% интернет-магазинов имеют мобильную
версию*
— Лидирующие сегменты «мобилизации» - купонаторы и доставка
еды. Хуже всего дела обстоят с продавцами автозапчастей.
— Даже крупный бизнес не до конца понимает как быть.
13* по данным исследовательского агентства Data Insight
Кстати, нам тоже гневные
письма пишут…

14. Будем делать!
Итак, решили делать мобильную версию, но:
— А может сделаем приложения вместо мобильного сайта?
— Отдельный поддомен или общий адаптивный сайт?
— Может готовые решения использовать?
— А делать ли весь функционал?
— Какие браузеры и устройства поддерживать?
— А что будет с SEO-оптимизацией?
— На что обратить внимание при разработке?
14

15. Очевидно!
Очевидно, что все зависит от конкретной ситуации…
Мы лишь расскажем о своей.
15

16. Приложение для e-commerce?
Приложение лучше делать позже (если у вас покупают не спонтанно)
16
Мобильный сайт –
4 млн пользователей
Приложение –
1 млн пользователей

17. Еще о приложениях!
Мобильная версия сайта приоритетнее:
— Если у вас значительная доля трафика из поисковых систем и
партнерских каналов
— Если у вас недостаточно компетенций в области мобильных
приложений
— Если у вас ограниченный бюджет или ресурсы
17

18. А может адаптив?
Мы решили делать отдельный поддомен.
Плюсы:
— Скорость разработки
— Легче поддерживать
— Абсолютное большинство конкурентов делает именно так
— Отдельный robots.txt (и вообще SEO-особенности)
Минусы:
— Потенциальные проблемы с кросс-доменными запросами
— Система редиректов (легко сломать)
18

19. Возьмем лучшее из адаптива
Но совсем от принципов адаптивности мы не
отказались  Просто еще допиливаем
19

20. Готовые решения
Хотя, будем честными, маленьким магазинам они могут подойти…
20

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

22. Какой нужен функционал?
MVP (Minimum Viable Product)
— Определяем пользовательские сценарии
— Собираем статистику по существующим функциям
— Формируем список «фич» и определяем приоритетность
22

23. А на практике?
Пример базового функционала для ИМ:
— Каталог (+ листинг и простейшая карточка товара)
— Возможность оформления заказа (можно без корзины)
— Базовые справочные страницы
— Поиск (если товаров много)
— Геопривязка
23

24. А что у е96?
Этапы развития мобильной версии е96:
— Каталог, простейшая карточка товара (с характеристиками),
фильтры, покупка в 1 клик, поиск, геопривязка
— Корзина, отзывы о товарах, описания товаров, видео
— Справочные разделы (сервисы, производители, отзывы о
магазине и др.), личный кабинет
— … Следующие итерации
24

25. Что поддерживать?
25

26. Смотрим статистику
Решили поддерживать:
— Safari 5+ (iOS 5.1+)
— Android Browser 2.3+ (2.2*)
— Chrome
— Opera Mobile 11+*
— Opera Mini 6+*
— IE 10+*
26* По возможности, но это боль…

27. К слову о платформах
27

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

29. На что обратить внимание?
Основные требования:
— Скорость загрузки страниц (<9 секунд)
— Кэширование (серверное и локальное)
— Минимум запросов
— Снижение объема трафика
— Учитывать Touch-особенности
— Размеры объектов («правило» 44 пикселей)
— Адаптированный контент
— Лишнее убирать
29

30. Прототип – вещь!
30

31. Тестирование
Чем можно проверять верстку и быстродействие:
— Реальные устройства (у нас уже 7 тестовых девайсов + свои)
— Эмуляторы устройств (в средствах разработки)
— Специализированный софт (Keynote MITE, Opera Mobile
Emulator)
— Внешние сервисы (PageSpeed Insights)
31

32. PageSpeed Insights
32

33. Первые результаты
Уже при выпуске первой версии:
— Серьезно снизили среднее время загрузки страницы (~5 сек)
— Увеличили конверсию на телефонах более чем на 40%
— 72% мобильных пользователей используют мобильную версию
33
Хотя есть проблемы:
— 40% заказов мобильных пользователей все еще оформляется на
обычной версии
— Есть некоторые проблемы с дублирующими заказами

34. Дубли -> отказы
34
Появилась корзина

35. Сейчас
Что хорошо:
— Среднее время загрузки страницы (~4,5 сек)
— Большинство функций доступны в мобильной версии
— 82% мобильных пользователей используют мобильную версию
35
Все еще есть проблемы:
— 37% заказов мобильных пользователей все еще оформляется на
обычной версии
— Мелких багов все еще много

36. Рекламная пауза!
36

37. Мобильная реклама
37

38. Дорого и неэффективно?…
CPO мобильной рекламы сопоставимо с обычной!
38
Вот некоторые результаты:
— CTR = 0,4% (особо не оптимизировали)
— Конверсия близка к обычной конверсии для смартфонов
— Доля отказных заказов значительно ниже средней

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

40. Ложка дегтя
Не все в наших руках:
— Нужно оперативнее реагировать на мобильные заказы
— Качество мобильного интернета желает лучшего
— Другие сервисы не всегда адаптированы под мобильные
устройства
40

41. Мобильная версия сайта e96.ru
Пьеса в 2-х частях с антрактом

42. Часть 2. История разработчика
В главной роли – Елькин Сергей

43. Наш телефонный зоопарк
43

44. Наш телефонный зоопарк
Версии ОС:
— Android 2.3 / 4.0/ 4.1 / 4.2 / 4.4
— iOS 6 / 7
— Windows Phone 8
44

45. Android 2.3.6 (webkit 533.1)
45

46. Android 2.3.6 (webkit 533.1)
— Нет HTML5
— Нет CSS3
— Тормоза
— Старый JS
46

47. Windows Phone 8 (IE 9-11)
47

48. Windows Phone 8 (IE 9-11)
— Internet Explorer
— Свои events
— Глюки браузера (WP)
48

49. Проблемы?
49

50. Проблемы?
Большинство проблем решит
MOBILE ★ BOILERPLATE
http://html5boilerplate.com/mobile/
Но не все…
50

51. Подсветка тача
* {
outline: none;
-webkit-text-size-adjust: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-focus-ring-color: rgba(0,0,0,0);
}
51

52. Еще 
В CSS :active вместо :hover
Safari:
<body ontouchstart="" onmouseover="">
Перестаёт работать скорллинг в IE:
-ms-touch-action: auto !important;
И другие...
52

53. Events
В нормальных браузерах:
el.addEventListener("touchstart", function(){}, false);
el.addEventListener("touchend", function(){}, false);
el.addEventListener("touchcancel", function(){}, false);
el.addEventListener("touchleave", function(){}, false);
el.addEventListener("touchmove", function(){}, false);
53

54. Events
В IE:
if (window.navigator.msPointerEnabled) {
el.addEventListener("MSPointerDown", function(){}, false);
el.addEventListener("MSPointerMove", function(){}, false);
el.addEventListener("MSPointerUp", function(){}, false);
}
54

55. Hammer.js
55

56. Hammer.js
Hammer(el).on("tap", function(event) { });
56
— hold
— tap
— doubletap
— drag, dragstart, dragend, dragup,
dragdown, dragleft, dragright
— swipe, swipeup, swipedown,
swipeleft, swiperight
— doubletap
— transform, transformstart,
transformend
— rotate
— pinch, pinchin, pinchout
— touch
— release
— gesture

57. PreventDefault
Не работает:
Hammer(el).on("tap", function(event) {
event.preventDefault();
});
Работает, но не так:
Hammer(el, {prevent_defaults: true }).on("tap",
function(event){});
Костыль:
$(el).on('click', function(event){ event.preventDefault(); });
Hammer(el).on("tap", function(event){});
57

58. Оптимизация
— AJAX + прелоадеры
— Кешируем почти все
— Кешируем на сервере
— Кешируем на клиенте
— Если не можем кешировать, держим в памяти
— Не строим огромный DOM
58

59. Mozilla localForage.js
http://mozilla.github.io/localForage/
59

60. Mozilla localForage.js
60
Хранилище:
— IndexedDB
— WebSQL
— localStorage
localStorage-like API:
— localforage.setItem('key', 'value', function(){});
— localforage.getItem('key', function(value) {});
— localforage.removeItem('key', function() {});

61. Загрузка статики
— Не используем картинки в интерфейсе
— Минификация, минимизация CSS, JS
— Require.JS
— CDN
61

62. Require.js
— Быстро
— Зависимости
— Удобная структура
62
http://requirejs.org/

63. Angular.js
— Работает
— Работает быстро
— Touch events
— Повторное использование кода
— Но нужно быть аккуратнее с uglify
63
http://angularjs.org

64. Angular.js + Require.js
Вместе?
— Можно использовать
— Загрузка по требованию
64

65. Файл конфигурации
define(function (require) {
'use strict';
var angular = require('angular');
// Controllers
angular.module('myModule.controllers',
['myModule.services'])
.controller('controllerName',
require('modules/myModule/controllers/controller'))
.controller('controllerName',
require('modules/myModule/controllers/controller'))
;
65

66. Файл конфигурации
// Directives
angular.module('myModule.directives', [])
.directive('directiveName',
require('modules/myModule/directives/directive'))
.directive('directiveName',
require('modules/myModule/directives/directive'))
;
// Filters
angular.module('myModule.filters', [])
.filter('filterName',
require('modules/myModule/filters/filter'))
.filter('filterName',
require('modules/myModule/filters/filter'))
;
66

67. Файл конфигурации
// Services
angular.module('myModule.services', [])
.service('serviceName',
require('modules/myModule/services/service'))
.service('serviceName',
require('modules/myModule/services/service'))
;
angular.module('myModule', [
'myModule.controllers',
'myModule.filters',
'myModule.services',
'myModule.directives'
]);
angular.bootstrap(document, ['myModule']);
}); 67

68. Grunt.js
68
http://gruntjs.com/

69. grunt-webfont
webfont: {
icons: {
src: 'icons/*.svg',
dest: 'build/fonts',
destCss: 'build/styles',
options: {
stylesheet: 'styl',
relativeFontPath: '/build/fonts'
}
}
}
69

70. Спасибо, что пришли
70

71. Как мы делаем m.e96.ru
Коньшин Александр и Елькин Сергей
http://m.e96.ru
Twitter: @SashaShnur @yamaha252
Dev team Instagram: e96_dev