riw 2015 / Русский e-commerce и мобильная аудитория
TRANSCRIPT
Артём ЦымповДиректор по технологиям eski.mobi
Команда эскимоби адаптировала 100+ сайтов для мобильных устройств.
Тезисы
● Краткая статистика● Обновление Google● Зачем адаптировать● Как не накосячить● Анализ рынка e-commerce● Способы адаптации сайта
Краткая статистика
2014 2015
Смартфоны
Планшеты
ПК
Источник — сайт с ежемесячной посещяемостью 300 000 юзеров
20132012
Краткая статистика
20152012
+280%Рост мобильной
аудиторииза 3 года
В четыре раза, Карл.
Прогноз
Увеличение смартфон трафика в 10 раз до 2020 г.
Источник — Ericsson Mobility Report (June 2015)
Обновление Google
Получали уведомление? Проверьте свой сайт в Google Webmaster tools.
Fix mobile usability issues found on...
Показатель “мобильности”
Для мобильных
Проверьте свой – eski.mobi/check
Отлично! Cтраница оптимизирована для мобильных устройств.
Скорость может быть не 100%
Это внешний шрифт с сервера Google.
Привет, Я.Метрика!
И Google Analytics...
Оптимизируйте работу CSS на следующих ресурсах:
http://eski.mobi/…/themes/sandbox/style.css
http://fonts.googleapis.com/css?family=Fredoka+One
Используйте кеш браузера для следующих ресурсов:
https://mc.yandex.ru/metrika/watch.js (60 минут)
http://www.google-analytics.com/analytics.js (2 часа)
Удобство должно быть 100%
Удобство для пользователей100/100
Зачем адаптировать сайт?
Среднее увеличение конверсии среди мобильной аудитории.
Результаты 2013 года.
+50%2013
Зачем адаптировать сайт? 2015
±30%Среднее увеличение конверсии
среди мобильной аудитории.Результаты 2015 года.
Почему результаты ухудшились?
● Количество очень кривых сайтов уменьшилось.● Аудитория привыкла к неудобствам.● Скорость мобильного интернета выросла.
Это не значит, что можно забыть про адаптацию. Чем хуже ваш дестопный сайт, тем выше будет конверсия после адаптации.
Посчитайте сами:
Ваша текущая конверсия на мобильных платформах
Конверсия при наличии
качественноймобильной версии
A × 1,3 = B
= BКонверсия при наличии
качественной мобильной версии
Что значит “качественно”
1. Удобная навигация
2. Телефоны click-to-call
3. Не WAP-стиль
4. Разумная группировка элементов
5. Контент в полном объёме (не урезан)
Неудобная навигация
Шапказанимает больше половины экрана.
Нет доступа к каталогу.
Кто-то догадался и исправился
20152013
Нет номера телефона.
Кто-то догадался и исправился
20152013
2. Телефоны click-to-call
Телефон не нажимается вообще.
Нажимается, но без кода (+7) или (8).
Дозвониться не получится.
Ссылка без кода города и (+7)
3. Не WAP-стиль
4. Разумная группировка элементов
Это не решение проблемы...
20152013
Это не решение проблемы...
20152013
5. Контент в полном объёме
На мобильной версии нет нужной информации
На мобильной версии нет нужной информации
Что значит “качественно”
1. Удобная навигация
2. Телефоны click-to-call
3. Не WAP-стиль
4. Разумная группировка элементов
5. Контент в полном объёме (не урезан)
Анализ рынкаТоп-200 крупнейших интернет-продавцов
Рунета (2013 год)
http://www.kommersant.ru/Doc/2181834
ТОП-200 интернет-магазинов
Интернет-магазинов имеют мобильную версию сайта
48 из 2002013
ТОП-200 интернет-магазинов
Качественная мобильная версия
2325Некачественная
мобильная версия
+2013
ТОП-200 интернет-магазинов
Интернет-магазинов конвертируют мобильную аудиторию эффективнее
остальных.
12,5%2013
В какой группе вы?
Высокая конверсия
12,5% 11,5%
Низкая конверсия
76%
Конверсия равна декстопу
У меня качественная мобильная версия
У меня кривая мобильная версия
У меня нет мобильной версии
2013
ТОП-200 интернет-магазинов
Интернет-магазинов имеют мобильную версию сайта
65 из 2002015
ТОП-200 интернет-магазинов
2013 2015
Хорошиймобильный сайт 12% 26%
Кривенькиймобильный сайт 11% 6%
Окей. Хочу сделать сайт удобным!
Какие есть варианты?
2 способа мобилизации сайта
● Отдельный мобильный сайт○ С отдельной CMS○ Мобильный, связанный с основным по API○ Отдельный шаблон для мобильных устройств
● Адаптивный сайт ○ Обычный адаптивный дизайн.○ Dynamically-served JavaScript (технология
eskimobi).
2 способа мобилизации сайта
● Отдельный мобильный сайт○ С отдельной CMS○ Мобильный, связанный с основным по API○ Отдельный шаблон для мобильных устройств
● Адаптивный сайт ○ Обычный адаптивный дизайн.○ Dynamically-served JavaScript (технология
eskimobi).
Ни в коем случае!
2 способа мобилизации сайта
● Отдельный мобильный сайт○ С отдельной CMS○ Мобильный, связанный с основным по API○ Отдельный шаблон для мобильных устройств
● Адаптивный сайт ○ Обычный адаптивный дизайн.○ Dynamically-served JavaScript (технология
eskimobi).
Подходит большим проектам: facebook,
2 способа мобилизации сайта
● Отдельный мобильный сайт○ С отдельной CMS○ Мобильный, связанный с основным по API○ Отдельный шаблон для мобильных устройств
● Адаптивный сайт ○ Обычный адаптивный дизайн.○ Dynamically-served JavaScript (технология
eskimobi).
Хорошее решение
2 способа мобилизации сайта
● Отдельный мобильный сайт○ С отдельной CMS○ Мобильный, связанный с основным по API○ Отдельный шаблон для мобильных устройств
● Адаптивный сайт ○ Обычный адаптивный дизайн.○ Dynamically-served JavaScript (технология
eskimobi).
Очень хорошее решение
2 способа мобилизации сайта
● Отдельный мобильный сайт○ С отдельной CMS○ Мобильный, связанный с основным по API○ Отдельный шаблон для мобильных устройств
● Адаптивный сайт ○ Обычный адаптивный дизайн.○ Dynamically-served JavaScript (технология
eskimobi).
Ещё лучше
Технология eski.mobi
● Все прелести адаптивного дизайна.● Без привлечения разработчиков заказчика.● Не требуется доступ к базе данных, API или CMS.● Срок запуска ±30 дней.● Нашу технологию рекомендует Google● и 100+ клиентов в портфолио.
Выводы
● За год мобильный трафик вырос вдвое● Изучите гайдлайны Google для мобильных сайтов● Выберите подходящий вариант адаптации● Оповестите поисковые системы о мобильном сайте● Не накосячьте с моби-сайтом● Прислушайтесь к советам для лучшего UX
Артём ЦымповДиректор по технологиям eski.mobi
Facebook — fb.com/tsympov
Сайт — www.eski.mobi
Email — [email protected]