Кинза 2015, Адаптация для мобильных устройства (eski.mobi)
41
www.eski.mobi Тотальная мобилизация сайта и работа с мобильной аудиторией
-
Upload
artiom-tsympov -
Category
Technology
-
view
566 -
download
3
Transcript of Кинза 2015, Адаптация для мобильных устройства (eski.mobi)
www.eski.mobi
Тотальная мобилизация сайта и работа с мобильной аудиторией
Тезисы
● Краткая статистика за год● Обновление Google для мобильного поиска● Способы мобилизации сайта● Как оповестить Google о мобильном сайте● Как накосячить с мобильным сайтом● 6 советов для лучшего мобильного UX
Краткая статистика за год
Источник — https://goo.gl/bgeFCw
2014 2015
Смартфоны
Планшеты
ПК
Смартфоны +85%
Планшеты +35%
ПК –15%
Краткая статистика за год
В два раза больше, Карл.
Прогноз
Увеличение смартфон трафика в 10 раз до 2020 г.
Источник — Ericsson Mobility Report (June 2015)
Обновление Google
Получали уведомление? Проверьте свой сайт в Google Webmaster tools.
Fix mobile usability issues found on...
Показатель “мобильности”
Для мобильных
Проверьте свой – 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 часа)
Удобство должно быть 100%
Удобство для пользователей100/100
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.
Ну и ладно...
Не делайте переадресацию
Не оптимизируйте рекламу
Оставьте desktop рекламу в мобильном, пользователяем так удобнее…
Как улучшить мобильный UX
● Добавьте навигацию● Увеличьте шрифт● Увеличьте кликабельные элементы● Используйте пространство разумно● Добавьте скрол для таблиц● Много тестируйте
Добавьте навигацию
Увеличьте шрифт
Увеличьте шрифт
Или добавьте —
<meta name="viewport"
content="width=device-
width">
Увеличьте кликабельные элементы
Используйте пространство разумно
Добавьте скрол для таблиц
Добавьте скрол для таблиц
Тестируйте на реальных девайсах
И эмуляторах:
BrowserStack
Chrome Dev Tools
Xcode (OSX)
Выводы
● За год мобильный трафик вырос вдвое● Изучите гайдлайны Google для мобильных сайтов● Выберите подходящий вариант адаптации● Оповестите поисковые системы о мобильном сайте● Не накосячьте с моби-сайтом● Прислушайтесь к советам для лучшего UX
