Сайты на мобильных устройствах, Олег Ножичкин, лекция в Школе вебмастеров Яндекса
2 likes620 views
Документ анализирует состояние и тенденции мобильного интернет-рынка, подчеркивая важность адаптации сайтов для мобильных пользователей. Обсуждаются различия между мобильными сайтами и приложениями, а также даны рекомендации по улучшению мобильных интерфейсов для повышения конверсий. Также рассматриваются вопросы разработки мобильных версий сайтов и их значимость для бизнеса.
Сайты на мобильных устройствах, Олег Ножичкин, лекция в Школе вебмастеров Яндекса
- 2. Сайты на мобильных устройствах Олег Ножичкин, Мобильная кухня
- 3. Статистика и тренды по мобильному интернету Основные показатели мобильного интернет-рынка. Тенденции роста мобильной аудитории. 4
- 5. Больше трети транзакций с использованием мобильных
- 6. Мобильный трафик в России
- 7. Переход в мобильный интернет Источник: TNS Web Index, Q1 2015 Россия, 12+ лет, млн. человек
- 8. С каких устройств выходят в интернет Источник: TNS Web Index, Q1 2015
- 9. Чем дальше, тем мобильнее Источник: TNS Web Index, Q1 2015
- 11. Новые алгоритмы ранжирования поисковых систем Адаптация сайта к мобильным пользователям и её влияние на позиции в поисковой выдаче. 12
- 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
- 31. Преимущества мобильного сайта: Моментальная возможность использовать Совместимость Обновляемость Проще найти Возможность распространения по сети Цикл жизни Может стать приложением Время и деньги 32
- 32. Когда нужны приложения? Взаимодействие с пользователями Постоянное использование, персонализация Сложные вычисления и отчеты Использование функциональности телефона Работа без соединения с интернетом 33
- 33. Представление сайтов на мобильных устройствах Адаптивные сайты. Мобильные сайты. Сайты для десктопа. Чем они отличаются, какие преимущества у каждого типа и нужно ли переключаться между мобильной и десктоп- версиями? 34
- 34. Сайт используется с различных устройств 35
- 36. Преимущества мобильных сайтов Можно предоставлять разный контент для пользователей (Потенциал для оптимизации мобильного поиска) Возможность построить полноценный мобильный интерфейс 37
- 37. Недостатки мобильных сайтов Выше стоимость поддержки Более сложное SEO продвижение 38
- 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
- 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
- 66. Axure 67
- 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