Как мы делаем m.e96.ru

Коньшин Александр и Елькин Сергей

http://m.e96.ru

Dev team Instagram: e96_dev

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

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

4

Немного о нас

— 13 место в рейтинге «Forbes» среди интернет-магазинов в РФ по итогам 2013 года (ТОП-5 по обороту на одного сотрудника в РФ)

— 18 место в рейтинге крупнейших продавцов Рунета по итогам 2013 года (в составе IQ One Holdings) по мнению «Коммерсанта»

— 3 место в рейтинге эффективности интернет-магазинов электроники и бытовой техники (e-Commerce Website Rank 2014)

5

Цифры

— Оборот более 4,5+ млрд рублей

— Более 3 000+ заказов в день

— Более 1 000 000+ пользователей в неделю

— Более 400 000+ товаров в ассортименте:

бытовая техника, электроника, детские товары, сантехника, инструменты и многое другое

6

География

— 29 подразделений (собственные и франчайзинговые)

— 18 регионов в РФ

— 900+ населенных пунктов

7

Мобильный трафик растет

Мобильный трафик растет!— Рост проникновения интернета в РФ: телефоны +27% за год, планшеты + 147% за год*

— Каждый день 59% российских пользователей Рунета проводят время в мобильном Интернете**

— Лидеры роста мобильной аудитории – населенные пункты с населением меньше 1 миллиона жителей

е96 – не исключение: — Мобильный трафик в апреле 2014 вырос более чем в 3 раза относительно апреля 2013

* TNS Web Index УИ, Россия 100k+, сентябрь 2013, Monthly Reach, % от населения, 12+ лет

** NewMR, Online Market Intelligence (OMI) – Мобильная Россия, лето 2013

8

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

9

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

10

Трафик есть, но покупают ли?

Мобильные пользователи покупают!— Треть активности мобильных пользователей в США приходится на поиск товаров и услуг*

— В США 87% пользователей используют мобильный интернет для покупок**

— В РФ уже 15% пользователей используют мобильный интернет для оплаты товаров и услуг, а 5% пользуются именно ИМ***

е96 – не исключение: — Количество заказов с мобильных устройств в апреле 2014 выросло в более чем в 2,5 раза по сравнению с апрелем 2013.

* UserZoom - MOBILE BENCHMARK STUDY

** MarksWebb Rank&Report- e-Commerce User Index 2014

*** TNS Web Index УИ, Россия 100k+, сентябрь 2013, Monthly Reach, % от населения, 12+ лет

11

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

12

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

13

Проблемы есть у большинства

Любопытные заметки:— Вообще в РФ только 1% интернет-магазинов имеют мобильную версию*

— Лидирующие сегменты «мобилизации» - купонаторы и доставка еды. Хуже всего дела обстоят с продавцами автозапчастей.

— Даже крупный бизнес не до конца понимает как быть.

* по данным исследовательского агентства Data Insight

Кстати, нам тоже гневные письма пишут…

14

Будем делать!

Итак, решили делать мобильную версию,

но:

— А может сделаем приложения вместо мобильного сайта?

— Отдельный поддомен или общий адаптивный сайт?

— Может готовые решения использовать?

— А делать ли весь функционал?

— Какие браузеры и устройства поддерживать?

— А что будет с SEO-оптимизацией?

— На что обратить внимание при разработке?

15

Очевидно!

Очевидно, что все зависит от конкретной

ситуации… Мы лишь расскажем о своей.

16

Приложение для e-commerce?

Приложение лучше делать позже (если у вас покупают

не спонтанно)

Мобильный сайт –

4 млн

пользователей

Приложение –

1 млн

пользователей

17

Еще о приложениях!

Мобильная версия сайта приоритетнее:

— Если у вас значительная доля трафика из поисковых систем и партнерских каналов

— Если у вас недостаточно компетенций в области мобильных приложений

— Если у вас ограниченный бюджет или ресурсы

18

А может адаптив?

Мы решили делать отдельный поддомен.

Плюсы:— Скорость разработки

— Легче поддерживать

— Абсолютное большинство конкурентов делает именно так

— Отдельный robots.txt (и вообще SEO-особенности)

Минусы:— Потенциальные проблемы с кросс-доменными запросами

— Система редиректов (легко сломать)

19

Возьмем лучшее из адаптива

Но совсем от принципов адаптивности мы

не отказались Просто еще допиливаем

20

Готовые решения

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

21

И все-таки почему не готовое?

Плюсы:— Скорость внедрения

— Относительная дешевизна

Минусы:— Страдает скорость загрузки страниц, либо актуальность данных

— Сложность поддержки

— Нет сложного функционала

— Низкое качество интерфейсов

22

Какой нужен функционал?

MVP (Minimum Viable Product)— Определяем пользовательские сценарии

— Собираем статистику по существующим функциям

— Формируем список «фич» и определяем приоритетность

23

А на практике?

Пример базового функционала для ИМ:

— Каталог (+ листинг и простейшая карточка товара)— Возможность оформления заказа (можно без корзины)

— Базовые справочные страницы

— Поиск (если товаров много)

— Геопривязка

24

А что у е96?

Этапы развития мобильной версии е96:

— Каталог, простейшая карточка товара (с характеристиками),

фильтры, покупка в 1 клик, поиск, геопривязка— Корзина, отзывы о товарах, описания товаров, видео

— Справочные разделы (сервисы, производители, отзывы о магазине и др.), личный кабинет

— … Следующие итерации

25

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

26

Смотрим статистику

Решили

поддерживать:

— Safari 5+ (iOS 5.1+) — Android Browser 2.3+ (2.2*)

— Chrome

— Opera Mobile 11+*

— Opera Mini 6+*

— IE 10+*

* По возможности, но это боль…

конец 2013 года

27

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

28

Купить мультиварку Екатеринбург

Просто знайте, что:

— Google сам поймет, что у вас и как, если вы соблюдаете их требования к мобильным версиям (легко найти в поиске)

— Яндекс интереснее: для «красивой» выдачи нужно писать Платонам (ручное добавление в некий каталог мобильных сайтов)

— Наш опыт показал, что частично открывать мобильную версию для индексации не страшно (если у вас поддомен с редиректами)

29

На что обратить внимание?

Основные требования:

— Скорость загрузки страниц (<9 секунд)

— Кэширование (серверное и локальное)

— Минимум запросов

— Снижение объема трафика

— Учитывать Touch-особенности

— Размеры объектов («правило» 44 пикселей)

— Адаптированный контент

— Лишнее убирать

30

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

31

Тестирование

Чем можно проверять верстку и

быстродействие:

— Реальные устройства (у нас уже 7 тестовых девайсов + свои)

— Эмуляторы устройств (в средствах разработки)

— Специализированный софт (Keynote MITE, Opera Mobile Emulator)

— Внешние сервисы (PageSpeed Insights)

32

PageSpeed Insights

33

Первые результаты

Уже при выпуске первой версии:

— Серьезно снизили среднее время загрузки страницы (~5 сек)

— Увеличили конверсию на телефонах более чем на 40%

— 72% мобильных пользователей используют мобильную версию

Хотя есть проблемы:

— 40% заказов мобильных пользователей все еще оформляется на обычной версии

— Есть некоторые проблемы с дублирующими заказами

34

Дубли -> отказы

Появилась

корзина

35

Сейчас

Что хорошо:

— Среднее время загрузки страницы (~4,5 сек)

— Большинство функций доступны в мобильной версии

— 82% мобильных пользователей используют мобильную версию

Все еще есть проблемы:

— 37% заказов мобильных пользователей все еще оформляется на обычной версии

— Мелких багов все еще много

36

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

37

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

38

Дорого и неэффективно?…

CPO мобильной рекламы сопоставимо с

обычной!

Вот некоторые результаты:

— CTR = 0,4% (особо не оптимизировали)

— Конверсия близка к обычной конверсии для смартфонов

— Доля отказных заказов значительно ниже средней

39

Еще немного аналитики

— Большинство заказов совершается в ту же неделю

— Действительно, часть пользователей используют мобильные устройства для уточнения информации, заказывая потом на обычном сайте

40

Ложка дегтя

Не все в наших руках:

— Нужно оперативнее реагировать на мобильные заказы

— Качество мобильного интернета желает лучшего

— Другие сервисы не всегда адаптированы под мобильные устройства

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

Часть 2. История разработчика

В главной роли – Елькин Сергей

43

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

44

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

Версии ОС:

— Android 2.3 / 4.0/ 4.1 / 4.2 / 4.4— iOS 6 / 7— Windows Phone 8

45

Android 2.3.6 (webkit 533.1)

46

Android 2.3.6 (webkit 533.1)

— Нет HTML5 — Нет CSS3— Тормоза— Старый JS

47

Windows Phone 8 (IE 9-11)

48

Windows Phone 8 (IE 9-11)

— Internet Explorer— Свои events— Глюки браузера (WP)

49

Проблемы?

50

Проблемы?

Большинство проблем решит

MOBILE BOILERPLATE★http://html5boilerplate.com/mobile/

Но не все…

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);

}

52

Еще

В CSS :active вместо :hover

Safari:<body ontouchstart="" onmouseover="">

Перестаёт работать скорллинг в IE:

-ms-touch-action: auto !important;

И другие...

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);

54

Events

В IE:

if (window.navigator.msPointerEnabled) { el.addEventListener("MSPointerDown", function(){}, false); el.addEventListener("MSPointerMove", function(){}, false); el.addEventListener("MSPointerUp", function(){}, false);}

55

Hammer.js

56

Hammer.js

Hammer(el).on("tap", function(event) { });

— 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){});

58

Оптимизация

— AJAX + прелоадеры

— Кешируем почти все

— Кешируем на сервере

— Кешируем на клиенте

— Если не можем кешировать, держим в памяти

— Не строим огромный DOM

59

Mozilla localForage.js

http://mozilla.github.io/localForage/

60

Mozilla localForage.js

Хранилище:

— 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

62

Require.js

— Быстро

— Зависимости

— Удобная структура

http://requirejs.org/

63

Angular.js

— Работает

— Работает быстро

— Touch events

— Повторное использование кода

— Но нужно быть аккуратнее с uglify

http://angularjs.org

64

Angular.js + Require.js

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

65

Файл конфигурации

define(function (require) {'use strict';var angular = require('angular');

// Controllersangular.module('myModule.controllers',

['myModule.services']).controller('controllerName',

require('modules/myModule/controllers/controller')).controller('controllerName',

require('modules/myModule/controllers/controller'));

66

Файл конфигурации

// Directivesangular.module('myModule.directives', [])

.directive('directiveName', require('modules/myModule/directives/directive'))

.directive('directiveName', require('modules/myModule/directives/directive'))

;

// Filtersangular.module('myModule.filters', [])

.filter('filterName', require('modules/myModule/filters/filter'))

.filter('filterName', require('modules/myModule/filters/filter'))

;

67

Файл конфигурации

// Servicesangular.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']);});

68

Grunt.js

http://gruntjs.com/

69

grunt-webfont

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

70

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

Как мы делаем m.e96.ru

Коньшин Александр и Елькин Сергей

http://m.e96.ru

Twitter: @SashaShnur @yamaha252

Dev team Instagram: e96_dev