Мобильная
версия
сайта
Зачем?
- Трафик
(экономите деньги)
(экономите время, 50% ru-net не из дома)
themobileplaybook.com
Рекомендую:
- Размер экрана
- Нет лояльности
(не все готовы ставить приложение)
Давайте сделаем мобильную версию!
Особенности
Быстрый и мертвый нестабильный
- Мобильный интернет
Активности, песочницы
- Мобильные OS
Не обновляемые(!)
- Мобильные браузеры
Особенности OS
Активности, фрагменты. Жизненный цикл приложения в Android жестко контролируется системой.
- Android
Песочницы
- iOS
Не умеет работать с файлами из браузера
- Windows Phone
Особенности браузеров
Вначале scroll, потом отрисовка
- Однопоточность
Нет уверенности что ваша страница загрузилась с нуля
- BF Cache
Ваш сайт может запуститься и не в браузере, и не в WebView
- Standalone
- Прочее
Homescreen icons
- Баги навсегда!
Особенности браузеров
В Android 4.3+ браузер по умолчанию должен быть Chrome.
В реальности все гораздо хуже. Есть куча устройств со своими "Chrome".
И они не обновляются!
Баги браузеров
Status: Obsolete
- Падение Android браузера #53088
Status: Obsolete
- Забыли дописать код #39882
Status: Released
- Нет мультизагрузки #2519
- Ограничения в iOS лимиты
Кто о них знает?
- GPS не используется
- GPU только у Chrome
- Камеру подключает система
"Наши" браузеры
Браузеры:
Chrome (latest)
Firefox (latest)
Opera (latest)
Safari (6+)
IE (8+)
Мобильные браузеры:
iOS Safari (7+)
iOS Opera Mini (7+)
Android Browser (2.3+)
Android Chrome (latest-1)
Android FireFox (latest-1)
Android Opera Mobile (latest - 1)
Android Opera Classic (latest)
Android Opera Mini (7+)
UC Browser (latest)
YaBrowser (latest)
Symbian Opera Mini (latest)
Nokia Browser for Symbian (latest)
IE Mobile (10+)
"Наша" мобильная версия
- Две мобильные версии
- За 2 года это 4 версия
touch/no-touch
4 - с новым меню
"Наша" мобильная версия
public function getMobileType()
{
$type = SecretClassName::GENERIC;
if (!$this->isMobile()
|| (
$this->getBrowser() == 'AndroidApp'
|| $this->getDevice() == 'iPhone'
|| $this->getDevice() == 'iPad'
|| $this->getDevice() == 'iPod'
|| $this->getOS() == 'AndroidOS'
|| $this->getOS() == 'WindowsMobileOS'
|| $this->getDevice() == 'Nokia'
|| $this->isTizen()
) && $this->getBrowser() != 'OperaMini'
) {
$type = SecretClassName::TOUCH;
}
return $type;
}
{% set isTouchDevice = secretObject.getMobileType() == constant('SecretClassName::TOUCH') %}
{% set isNotTouchDevice = not isTouchDevice %}No-touch
- Основной представитель Opera Mini
- Ограничения:
- нет CSS3
- javascript ограничен по времени
- есть только click и change события
- Особенности:
- может не загрузиться iframe
- Server-side:
- скрытое поле no_server_validation
Touch
- Более 90% это Webkit, Chromium, Blink
- Особенности:
- Чтение картинок, сжатие, разворот и превью
- Отправка нескольких ajax запросов
- Есть tap событие
- Есть кеширование ajax запросов
Что возможно?
- Retina спрайт + background-size
- Base64
- Media Queries
- DOM Ready
- querySelector/querySelectorAll
- XMLHttpRequest
- JSON
- CSS 2.1 и CSS3 в будущем
Что возможно?
Что используем?
Все технологии общие с desktop:
- Gulp
- Stylus
- Bower
- jQuery
- ES5
- doT
- ngrok
Что делать если все сломалось?
- удалить node_modules
- phing build.dev clean
Макрос форм
Все 36+ форм идет через него
(есть версия 2.0 проще + документация)
{% extends "layout.html" %}
{% import "@common/macros/form.twig" as forms %}
{% block content %}
{{
forms.create({
'action' : formActionUrl,
'method' : 'post',
'name' : 'write',
'attributes' : {
'novalidate' : null
},
'rows' : [
....
]
})
}}
{% endblock %}
Описание проекта
Шаблоны:
- var/templates/mobile/
Вся статика:
- var/www/s/mobile/
Статистика:
- Flurry + DWH + еще 8 счетиков
Что хотим:
- Не блокирующую страницу
- Часть в SPA
- Начать работать в оффлайн
- Не сломать рекламу и VAS :)
- Первый запрос 14 КБ
- Отказ от jQuery
Что делаем:
- Есть ответственность перед тестированием
- Умеет снимать скриншоты
- В разработке доп. инструменты для тестирования
- В разработке тесты на CasperJS
- Фигачим код
С пятницей!
