Лекция Олега Ножичкина в Школе вебмастеров: «Сайты на мобильных устройствах» https://academy.yandex.ru/events/webmasters_school/yawebm2015/ Статистика и тренды по мобильному интернету Основные показатели мобильного интернет-рынка. Тенденции роста мобильной аудитории. Новые алгоритмы ранжирования поисковых систем Адаптация сайта к мобильным пользователям и её влияние на позиции в поисковой выдаче. Возможности для бизнеса в мобильном вебе Мобильный сайт позволяет воспользоваться дополнительными возможностями взаимодействия с пользователем. Рассмотрим конкретные примеры. Мобильный сайт и приложение — в чём разница Чем отличается мобильное приложение от мобильно сайта. Какие преимущества и недостатки у каждого варианта. Представление сайтов на мобильных устройствах Адаптивные сайты. Мобильные сайты. Сайты для десктопа. Чем они отличаются, какие преимущества у каждого типа и нужно ли переключаться между мобильной и десктоп-версиями? Удобный мобильный сайт для пользователя Поведение пользователей на мобильном сайте. Отличия от десктопа, достижение целей и простые правила увеличения конверсии. Специфика разработки мобильного сайта Особенности проектирования, разработки и тестирования сайтов. Инструменты для разработки мобильных сайтов Готовые инструменты для проектирования и тестирования. Примеры фреймворков.

2. Сайты на мобильных
устройствах
Олег Ножичкин, Мобильная кухня

3. Статистика и тренды по
мобильному интернету
Основные показатели мобильного интернет-рынка.
Тенденции роста мобильной аудитории.
4

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

5. Больше трети транзакций с использованием
мобильных

6. Мобильный трафик в России

7. Переход в мобильный интернет
Источник: TNS Web Index, Q1 2015
Россия, 12+ лет, млн. человек

8. С каких устройств выходят в интернет
Источник: TNS Web Index, Q1 2015

9. Чем дальше, тем мобильнее
Источник: TNS Web Index, Q1 2015

10. Эксклюзивные пользователи мобильного
интернета

11. Новые алгоритмы
ранжирования поисковых
систем
Адаптация сайта к мобильным пользователям и её влияние
на позиции в поисковой выдаче.
12

12. Мобильный поиск Google

13. Google mobile friendly
14

14. Нет мобильной версии

15. Мелкий текст

16. Контент шире экрана телефона

17. Неудобные формы

18. Мобильная или адаптивная версия

19. Было — Стало
20

20. Призыв к установке приложений
Если призыв к установке приложений перекрывает
существенную область мобильного сайта, он не считается
удобным для мобильных с 1 ноября
21

21. Что это значит для бизнеса
• Готовые к изменениям бизнесы получают преимущества
• Пользователи будут быстрее и удобнее взаимодействовать с
сайтами с мобильных устройств
• Бизнесы не подготовившиеся к изменениям потеряют часть
продаж

22. Возможности для бизнеса в
мобильном вебе
Мобильный сайт позволяет воспользоваться
дополнительными возможностями взаимодействия с
пользователем.
23

23. Continuity
Возможность продолжить работу с сайтом на разных
устройствах
Пользователи уходят, если им не удобно
24

24. Использование возможностей мобильных
устройств
25
Определение
координат
HandoffЗвонок в
1 клик
Построение
маршрута

25. Click to Call

26. Ближайший объект

27. Сделает бизнес видимым
Мобильный поиск
Мобильная реклама
28

28. Мобильный сайт и
приложение — в чём
разница?
Чем отличается мобильное приложение от мобильно сайта.
Какие преимущества и недостатки у каждого варианта.
29

29. Мобильный сайт это:
30

30. Мобильное приложение это:
31

31. Преимущества мобильного сайта:
Моментальная возможность
использовать
Совместимость
Обновляемость
Проще найти
Возможность распространения по
сети
Цикл жизни
Может стать приложением
Время и деньги
32

32. Когда нужны приложения?
Взаимодействие с пользователями
Постоянное использование, персонализация
Сложные вычисления и отчеты
Использование функциональности телефона
Работа без соединения с интернетом
33

33. Представление сайтов на
мобильных устройствах
Адаптивные сайты. Мобильные сайты. Сайты для десктопа.
Чем они отличаются, какие преимущества у каждого типа и
нужно ли переключаться между мобильной и десктоп-
версиями?
34

34. Сайт используется с различных устройств
35

35. Отдельный мобильный сайт
36

36. Преимущества мобильных сайтов
Можно предоставлять разный контент для пользователей
(Потенциал для оптимизации мобильного поиска)
Возможность построить полноценный мобильный интерфейс
37

37. Недостатки мобильных сайтов
Выше стоимость поддержки
Более сложное SEO продвижение
38

38. Адаптивный сайт
39

39. Преимущества адаптивных сайтов
Дешевле поддерживать
Один адрес для всех устройств
Нет необходимости в сложном определении устройств и
переадресации
40

40. Недостатки адаптивных сайтов
Большие страницы удобные для десктопа, могут быть
медленными на мобильных
Как правило не предоставляется полностью мобильный опыт
для пользователя
41

41. Динамические сайты
В рамках единого адреса сайта в зависимости от устройства
загружается необходимая версия.
Объединяет в себе преимущества двух вариантов, но еще
более сложный и дорогой в обслуживании.
42

42. Удобный мобильный сайт
для пользователя
Поведение пользователей на мобильном сайте. Отличия от
десктопа, достижение целей и простые правила увеличения
конверсии.
43

43. Определить роль мобильного сайта
Привлечение клиентов
Звонки
Мобильная торговля
Взаимодействие на нескольких
устройствах
Загрузка приложений
Посещаемость оффлайн точек

44. Увеличение конверсии интернет-
магазинов с мобильных устройств

45. Как увеличить количество покупок на
мобильном сайте?
Сделайте окно поиска по сайту заметным
Добавьте фильтры
Структура форм и ввод данных
Покупки без регистрации

46. Поиск по сайту

47. Окно поиска должно быть сверху

48. Релевантные результаты поиска
Сперва должны отображаться самые релевантные результаты

49. Фильтры и сортировки
Возможности фильтрации и сортировки

50. Возможность совершать покупки
без регистрации

51. Призывы к действию
Размещайте основные призывы к действию на самых видных местах

52. Продумайте структуру форм
Минимизируйте количество полей в форме. Отображайте прогресс
заполнения разделов.

53. Проверка введенных данных
Добавьте информативные подписи ошибок заполнения формы

54. Специфика разработки
мобильного сайта
Особенности проектирования, разработки и тестирования
сайтов.
55

55. Специфика производства
Проектирование
Работа с SVG
Поддержка многообразия разрешений
Внимание к скорости сайта
Тестирование

56. Проектирование
При проектировании структуры учитывать
требования к адаптивной верстке
Специализированные возможности устройств
▌ GPS, Touch, Click2Call, etc.
Material design

57. Работа с изображениями
Оптимизация изображений
SVG

58. Фрагментация устройств
Статистика
Целевая аудитория

59. Внимание к скорости сайта
Оптимизация js и css
Настройки хостинга
Размер страниц и изображений

60. Тестирование на реальных устройствах

61. Инструменты для
разработки мобильных
сайтов
Готовые инструменты для проектирования и тестирования.
Примеры фреймворков.
62

62. Полезные инструменты
Google mobile friendly test
Google Page insights
Webpagetest
Axure
Screenfly (Quirktools)
Adobe Edge Inspect
BrowserStack

63. Google mobile friendly test
https://www.google.com/webmasters/tools/mobile-friendly

64. Google page insights
https://developers.google.com/speed/pagespeed/insights/

65. Webpagetest
http://www.webpagetest.org

66. Axure
67

67. Adobe Edge Inspect
https://www.adobe.com/ru/products/edge-inspect.html 68

68. BrowserStack
https://www.browserstack.com 69

69. Мобильные эмуляторы
70

70. oleg.nozhichkin@mobikit.ru
+79036755262 nozh
nozhichkin
Олег Ножичкин
Исполнительный директор «Мобильная кухня»
http://www.mobikit.ru

71. Вопросы

72. Вопрос 1
У
меня
сложилась
такая
ситуация,
что
мне
пришлось
отыскать
на
полках
давно
забытый
телефон
с
операционной
системой
Bada.
Вот
прошла
уже
неделю,
как
в
интернет
выйти
я
могу
лишь
с
этого
устройства.
Знаете,
примерно
10%
сайтов,
которые
я
посещаю
каждый
день
адаптированы
под
мобильный
телефон.
У
меня
появился
закономерный
вопрос
-­‐
стоит
ли
при
разработке
сайта
учитывать
особенности
операционных
систем,
которые
давно
уже
не
пользуются
популярность?
Ведь,
возможно,
именно
с
такого
устройства
хочет
зайти
на
мой
сайт
покупатель/клиент.

73. Вопрос 2
На
сайте
metall-­‐energy.ru
пытаемся
внедрить
адаптивный
шаблон,
на
данный
момент
сделано
1/3.
Не
могли
бы
вы
дать
экспертную
оценку
сделаному,
(замечания,
недочеты,
ошибки)
74

74. Десктоп
75

75. Проверка удобства Google mobile-friendly
76

76. Вопрос 3
Интересует вот какой вопрос:
Необходимость разрабатывать мобильную версию сайта на
начальном этапе запуска проекта/бизнеса с не очень большим
бюджетом?
Может ли мобильная версия привлечь больше аудиторию с
поиска и иметь больше конверсию нежели основная площадка?
Есть ли такие e-commerce тематики, которым не нужен
полноценный сайт, а хватит мобильной версии?
77

77. Вопрос 4
Как обосновать необходимость разработки мобильной версии
сайта для клиента? Для каких сфер деятельности она нужна в
первую очередь, а для кого не особо актуальна?
78

78. Вопрос 5
Скажите пожалуйста, как быть с реализацией фильтров для
мобильных устройств в многотысячных каталогах?
79

79. Amazon
80

80. Вопрос 6
Когда будет в Яндекс вебмастере инструмент для тестирования
мобильности сайтов?
81

81. oleg.nozhichkin@mobikit.ru
+79036755262 nozh
nozhichkin
Олег Ножичкин
Исполнительный директор «Мобильная кухня»
http://www.mobikit.ru