Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Кинза 2015, Адаптация для мобильных устройства (eski.mobi)

721 views

Published on

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

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

Published in: Technology
  • Be the first to comment

Кинза 2015, Адаптация для мобильных устройства (eski.mobi)

  1. 1. www.eski.mobi Тотальная мобилизация сайта и работа с мобильной аудиторией
  2. 2. Артём Цымпов Директор по технологиям eski.mobi
  3. 3. Тезисы ● Краткая статистика за год ● Обновление Google для мобильного поиска ● Способы мобилизации сайта ● Как оповестить Google о мобильном сайте ● Как накосячить с мобильным сайтом ● 6 советов для лучшего мобильного UX
  4. 4. Краткая статистика за год Источник — https://goo.gl/bgeFCw 2014 2015 Смартфоны Планшеты ПК
  5. 5. Смартфоны +85% Планшеты +35% ПК –15% Краткая статистика за год
  6. 6. В два раза больше, Карл.
  7. 7. Прогноз Увеличение смартфон трафика в 10 раз до 2020 г. Источник — Ericsson Mobility Report (June 2015)
  8. 8. Обновление Google Получали уведомление? Проверьте свой сайт в Google Webmaster tools.
  9. 9. Fix mobile usability issues found on...
  10. 10. Показатель “мобильности” Для мобильных
  11. 11. Проверьте свой – eski.mobi/check Отлично! Cтраница оптимизирована для мобильных устройств.
  12. 12. Для продвинутых – eski.mobi/speed
  13. 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. 14. Удобство должно быть 100% Удобство для пользователей100/100
  15. 15. 2 способа мобилизации сайта ● Отдельный мобильный сайт ○ С отдельной CMS ○ Мобильный, связанный с основным по API ○ Отдельный шаблон для мобильных устройств ● Адаптивный сайт ○ Обычный адаптивный дизайн. ○ Dynamically-served JavaScript (технология eskimobi).
  16. 16. 2 способа мобилизации сайта ● Отдельный мобильный сайт ○ С отдельной CMS ○ Мобильный, связанный с основным по API ○ Отдельный шаблон для мобильных устройств ● Адаптивный сайт ○ Обычный адаптивный дизайн. ○ Dynamically-served JavaScript (технология eskimobi). Ни в коем случае!
  17. 17. 2 способа мобилизации сайта ● Отдельный мобильный сайт ○ С отдельной CMS ○ Мобильный, связанный с основным по API ○ Отдельный шаблон для мобильных устройств ● Адаптивный сайт ○ Обычный адаптивный дизайн. ○ Dynamically-served JavaScript (технология eskimobi). Подходит большим проектам: facebook, twitter
  18. 18. 2 способа мобилизации сайта ● Отдельный мобильный сайт ○ С отдельной CMS ○ Мобильный, связанный с основным по API ○ Отдельный шаблон для мобильных устройств ● Адаптивный сайт ○ Обычный адаптивный дизайн. ○ Dynamically-served JavaScript (технология eskimobi). Хорошее решение
  19. 19. 2 способа мобилизации сайта ● Отдельный мобильный сайт ○ С отдельной CMS ○ Мобильный, связанный с основным по API ○ Отдельный шаблон для мобильных устройств ● Адаптивный сайт ○ Обычный адаптивный дизайн. ○ Dynamically-served JavaScript (технология eskimobi). Очень хорошее решение
  20. 20. 2 способа мобилизации сайта ● Отдельный мобильный сайт ○ С отдельной CMS ○ Мобильный, связанный с основным по API ○ Отдельный шаблон для мобильных устройств ● Адаптивный сайт ○ Обычный адаптивный дизайн. ○ Dynamically-served JavaScript (технология eskimobi). Ещё лучше, но сложнее.
  21. 21. Оповестите поисковые системы Адаптировали свой сайт? Не забудьте добавить этот meta тег: <meta name="viewport" content=" width=device-width, initial-scale=1. 0">
  22. 22. Оповестите поисковые системы
  23. 23. Как накосячить? ● Ничего не делать ● Не проверить на реальном устройстве ● Не проверить все страницы ● Блокировка файлов ● Flash ● Ошибки переадресации ● Плохая реклама Источник — https://goo.gl/CqmH8u
  24. 24. 2014 2015 2016 2020132012 Не оптимизируйте под мобильные За год количество мобильных юзеров удвоилось. Что будет через пару лет?
  25. 25. Не проверяйте на реальном девайсе Элементы сайта выглядят иначе в мобильных браузерах. OSX Chrome iOS Safari
  26. 26. Не проверяйте все страницы сайта Оптимизируйте только главную страницу. На остальные можно не смотреть...
  27. 27. Заблокируйте файлы Запретите индексирование css, js файлов. Не добавляйте эти строки в robots.txt Allow: *.css Allow: *.js
  28. 28. Не убирайте Flash контент Калькуляторы, видео, баннеры и прочие Flash-элементы не будут воспроизводиться на iOS. Ну и ладно...
  29. 29. Не делайте переадресацию
  30. 30. Не оптимизируйте рекламу Оставьте desktop рекламу в мобильном, пользователяем так удобнее…
  31. 31. Как улучшить мобильный UX ● Добавьте навигацию ● Увеличьте шрифт ● Увеличьте кликабельные элементы ● Используйте пространство разумно ● Добавьте скрол для таблиц ● Много тестируйте
  32. 32. Добавьте навигацию
  33. 33. Увеличьте шрифт
  34. 34. Увеличьте шрифт Или добавьте — <meta name="viewport" content="width=device- width">
  35. 35. Увеличьте кликабельные элементы
  36. 36. Используйте пространство разумно
  37. 37. Добавьте скрол для таблиц
  38. 38. Добавьте скрол для таблиц
  39. 39. Тестируйте на реальных девайсах И эмуляторах: BrowserStack Chrome Dev Tools Xcode (OSX)
  40. 40. Выводы ● За год мобильный трафик вырос вдвое ● Изучите гайдлайны Google для мобильных сайтов ● Выберите подходящий вариант адаптации ● Оповестите поисковые системы о мобильном сайте ● Не накосячьте с моби-сайтом ● Прислушайтесь к советам для лучшего UX
  41. 41. Артём Цымпов Директор по технологиям eski.mobi Сайт — www.eski.mobi Email — hello@eski.mobi

×