Post on 21-Feb-2017
www.eski.mobi
Тотальная мобилизация сайта и работа с мобильной аудиторией
Тезисы
● Краткая статистика за год● Обновление Google для мобильного поиска● Способы мобилизации сайта● Как оповестить Google о мобильном сайте● Как накосячить с мобильным сайтом● 6 советов для лучшего мобильного UX
Краткая статистика за год
Источник — https://goo.gl/bgeFCw
2014 2015
Смартфоны
Планшеты
ПК
Прогноз
Увеличение смартфон трафика в 10 раз до 2020 г.
Источник — Ericsson Mobility Report (June 2015)
Проверьте свой – 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 часа)
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).
Ещё лучше, но сложнее.
Оповестите поисковые системы
Адаптировали свой сайт? Не забудьте добавить этот meta тег:
<meta name="viewport" content="
width=device-width, initial-scale=1.
0">
Как накосячить?
● Ничего не делать● Не проверить на реальном устройстве● Не проверить все страницы● Блокировка файлов● Flash● Ошибки переадресации● Плохая реклама
Источник — https://goo.gl/CqmH8u
2014 2015 2016 201720132012
Не оптимизируйте под мобильные
За год количество мобильных юзеров удвоилось. Что будет через пару лет?
Не проверяйте на реальном девайсе
Элементы сайта выглядят иначе в мобильных браузерах.
OSX Chrome iOS Safari
Не проверяйте все страницы сайта
Оптимизируйте только главную страницу. На остальные можно не смотреть...
Заблокируйте файлы
Запретите индексирование css, js файлов. Не добавляйте эти строки в robots.txt
Allow: *.css
Allow: *.js
Не убирайте Flash контент
Калькуляторы, видео, баннеры и прочие Flash-элементы не будут воспроизводиться на iOS.
Ну и ладно...
Как улучшить мобильный UX
● Добавьте навигацию● Увеличьте шрифт● Увеличьте кликабельные элементы● Используйте пространство разумно● Добавьте скрол для таблиц● Много тестируйте
Выводы
● За год мобильный трафик вырос вдвое● Изучите гайдлайны Google для мобильных сайтов● Выберите подходящий вариант адаптации● Оповестите поисковые системы о мобильном сайте● Не накосячьте с моби-сайтом● Прислушайтесь к советам для лучшего UX
Артём Цымпов
Директор по технологиям eski.mobi
Сайт — www.eski.mobi
Email — hello@eski.mobi