ТОТАЛЬНАЯ МОБИЛИЗАЦИЯ САЙТА И РАБОТА С МОБ. АУДИТОРИЕЙ В 2015-2016 ГОДАХ http://kinza.pro - Кинза 2015

1. www.eski.mobi
Тотальная мобилизация сайта и
работа с мобильной аудиторией

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

3. Тезисы
● Краткая статистика за год
● Обновление Google для мобильного поиска
● Способы мобилизации сайта
● Как оповестить Google о мобильном сайте
● Как накосячить с мобильным сайтом
● 6 советов для лучшего мобильного UX

4. Краткая статистика за год
Источник — https://goo.gl/bgeFCw
2014 2015
Смартфоны
Планшеты
ПК

5. Смартфоны +85%
Планшеты +35%
ПК –15%
Краткая статистика за год

6. В два раза
больше,
Карл.

7. Прогноз
Увеличение смартфон
трафика в 10 раз до 2020 г.
Источник — Ericsson Mobility Report (June 2015)

8. Обновление Google
Получали уведомление? Проверьте свой
сайт в Google Webmaster tools.

9. Fix mobile usability issues found on...

10. Показатель “мобильности”
Для мобильных

11. Проверьте свой – eski.mobi/check
Отлично! Cтраница оптимизирована для мобильных устройств.

12. Для продвинутых – eski.mobi/speed

13. Скорость может быть не 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 часа)

14. Удобство должно быть 100%
Удобство для пользователей100/100

15. 2 способа мобилизации сайта
● Отдельный мобильный сайт
○ С отдельной CMS
○ Мобильный, связанный с основным по API
○ Отдельный шаблон для мобильных устройств
● Адаптивный сайт
○ Обычный адаптивный дизайн.
○ Dynamically-served JavaScript (технология
eskimobi).

16. 2 способа мобилизации сайта
● Отдельный мобильный сайт
○ С отдельной CMS
○ Мобильный, связанный с основным по API
○ Отдельный шаблон для мобильных устройств
● Адаптивный сайт
○ Обычный адаптивный дизайн.
○ Dynamically-served JavaScript (технология
eskimobi).
Ни в коем
случае!

17. 2 способа мобилизации сайта
● Отдельный мобильный сайт
○ С отдельной CMS
○ Мобильный, связанный с основным по API
○ Отдельный шаблон для мобильных устройств
● Адаптивный сайт
○ Обычный адаптивный дизайн.
○ Dynamically-served JavaScript (технология
eskimobi).
Подходит большим
проектам: facebook,
twitter

18. 2 способа мобилизации сайта
● Отдельный мобильный сайт
○ С отдельной CMS
○ Мобильный, связанный с основным по API
○ Отдельный шаблон для мобильных устройств
● Адаптивный сайт
○ Обычный адаптивный дизайн.
○ Dynamically-served JavaScript (технология
eskimobi).
Хорошее
решение

19. 2 способа мобилизации сайта
● Отдельный мобильный сайт
○ С отдельной CMS
○ Мобильный, связанный с основным по API
○ Отдельный шаблон для мобильных устройств
● Адаптивный сайт
○ Обычный адаптивный дизайн.
○ Dynamically-served JavaScript (технология
eskimobi).
Очень
хорошее
решение

20. 2 способа мобилизации сайта
● Отдельный мобильный сайт
○ С отдельной CMS
○ Мобильный, связанный с основным по API
○ Отдельный шаблон для мобильных устройств
● Адаптивный сайт
○ Обычный адаптивный дизайн.
○ Dynamically-served JavaScript (технология
eskimobi).
Ещё лучше,
но сложнее.

21. Оповестите поисковые системы
Адаптировали свой сайт? Не забудьте
добавить этот meta тег:
<meta name="viewport" content="
width=device-width, initial-scale=1.
0">

22. Оповестите поисковые системы

23. Как накосячить?
● Ничего не делать
● Не проверить на реальном устройстве
● Не проверить все страницы
● Блокировка файлов
● Flash
● Ошибки переадресации
● Плохая реклама
Источник — https://goo.gl/CqmH8u

24. 2014 2015 2016 2020132012
Не оптимизируйте под мобильные
За год количество мобильных юзеров
удвоилось. Что будет через пару лет?

25. Не проверяйте на реальном девайсе
Элементы сайта выглядят иначе в
мобильных браузерах.
OSX Chrome iOS Safari

26. Не проверяйте все страницы сайта
Оптимизируйте только главную страницу.
На остальные можно не смотреть...

27. Заблокируйте файлы
Запретите индексирование css, js файлов.
Не добавляйте эти строки в robots.txt
Allow: *.css
Allow: *.js

28. Не убирайте Flash контент
Калькуляторы, видео, баннеры и прочие
Flash-элементы не будут воспроизводиться
на iOS.
Ну и ладно...

29. Не делайте переадресацию

30. Не оптимизируйте рекламу
Оставьте desktop рекламу в мобильном,
пользователяем так удобнее…

31. Как улучшить мобильный UX
● Добавьте навигацию
● Увеличьте шрифт
● Увеличьте кликабельные элементы
● Используйте пространство разумно
● Добавьте скрол для таблиц
● Много тестируйте

32. Добавьте навигацию

33. Увеличьте шрифт

34. Увеличьте шрифт
Или добавьте —
<meta name="viewport"
content="width=device-
width">

35. Увеличьте кликабельные элементы

36. Используйте пространство разумно

37. Добавьте скрол для таблиц

38. Добавьте скрол для таблиц

39. Тестируйте на реальных девайсах
И эмуляторах:
BrowserStack
Chrome Dev Tools
Xcode (OSX)

40. Выводы
● За год мобильный трафик вырос вдвое
● Изучите гайдлайны Google для мобильных сайтов
● Выберите подходящий вариант адаптации
● Оповестите поисковые системы о мобильном сайте
● Не накосячьте с моби-сайтом
● Прислушайтесь к советам для лучшего UX

41. Артём Цымпов
Директор по технологиям eski.mobi
Сайт — www.eski.mobi
Email — hello@eski.mobi