Особенности разработки мобильных сайтов

1. Особенности разработки мобильных сайтов Антон Герасимюк Ведущий разработчик Битрикс

2. Основная идея Bitrix Mobile 2.0 • Разработка под iOSи Android: дорого, сложно и долго • Зато мы умеем хорошо делать сайты • Выход: гибридное приложение • Front-end – Bitrix Mobile • Back-end – мобильный сайт

3. Платформы iOS 5.1+ и Android 2.3+ • Полноценный браузер c поддержкой HTML5 и CSS3 • Мечта верстальщика – один браузер WebKit • Небольшая ложка дегтя: популярность Android 2.3

4. Мобильный сайт в рамках CMS • Создаем новый шаблон сайта с подключением Bitrix Mobile • Создаем шаблоны компонентов • Настраиваем шаблон сайта на отдельную директорию (например, /mobile/)

5. Особенности верстки Понятие Viewport’а • По умолчанию, мобильный браузер отобразит страницу так же, как браузер на desktop-экране шириной 980 (800) пикселов • Затем страница масштабируется так, чтобы она умещалось на экране

6. Особенности верстки Понятие Viewport’а • Специальный мета-тег viewport позволяет указать, как браузер должен масштабировать страницу

7. Особенности верстки Понятие Viewport’а • Атрибут viewportможет содержать множественные значения, разделенные запятой: • initial-scale – коэффициент масштабирования, в котором пользователь изначально видит страницу • maximum-scale/minimum-scale – макс./мин. коэф-т масштабирования, до которого пользователь может увеличить/уменьшать страницу • user-scalable – может ли пользователь сам масштабировать страницу • width/height - ширина/высота viewport’а (окна браузера)

8. Альбомная и портретная ориентации • content="width=device-width"илиcontent="width=320"

9. Альбомная и портретная ориентации • content="initial-scale=1.0"при условии • html {-webkit-text-size-adjust:none}

10. Особенности верстки Работа с формами • Можно использовать следующие типы тега <inputtype=“тип”> • date/datetime • time • email • month • number • telephone • url • Range • В iOSполная поддержка, в Android частичная (зависит от версииОС и прошивки производителя) • Кроссплатформенно: использовать API Bitrix Mobile

11. Особенности верстки Запуск внешних программ • Поддержка протоколов tel:, mailto:, sms:, skype:

12. Особенности верстки Полезные CSS-свойства • Градиенты: • -webkit-linear-gradient, -webkit-radial-gradient • Тени: • text-shadow, box-shadow • CSS-трансформации • -webkit-transform • border-image – создание рамки вокруг элемента с помощью 9-grid картинки • background-size– растягивание фона • Главное не переборщить!

13. iPadи разные разрешения • Сложный путь: отдельные шаблоны для разных разрешений экранов • Простой путь: увеличение масштаба через мета-тег viewport, шлифовка через media queries • Bitrix Mobile приложение будет передавать на сервер: • Размеры экрана • Retina/Non-retina • Версия ОС • Версия приложения • Pixel Ratio • идр.

14. Особенности Javascript • В iOSвыполнение ограничено 10 секундами • В iOSсобытие onscrollсрабатывает только после того, как закончилось скроллирование и пользователь отпустил палец • Нативная поддержка alert(), confirm(), prompt() • Обработка касаний • ontouchstart, ontouchmove, ontouchend, ontouchcancel • Жесты (масштабирование и поворот) • gesturestart, gestureend, gesturechange • Смена ориентацииwindow.onorientationchange= function(){ • alert(window.orientation); }

15. Верстка под Android • Обводка текстовых полей зеленым или оранжевым бордюром не отключается • Увеличение текстовых полей по высоте не отключается • Особенности старых версий Android (2.3) • Градиенты через -webkit-gradient • Тени через -webkit-box-shadow • нельзя использовать multiplebackground (в айфоне можно) • для border-imageпо возможности использовать stretchвместо repeat • перед свойством box-sizingдобавляем -webkit-box-sizing

16. Retina Display • Retina-дисплей – маркетинговый слоган компании Apple • Пиксельное соотношение (pixel ratio) – отношение физического пикселя к виртуальному • iPhone’ы и iPad’ы имеют пиксельное соотношение 1.0 и 2.0 • Android от 1.5 до 2.25

17. Retina Display Оптимизация графики • Сложный путь: два комплекта графики

18. Retina Display Оптимизация графики • Простой путь: один комплект графики под Retina

19. Адаптивная верстка Media Queries • Другой подход к созданиюмобильного сайта:media queries

20. Адаптивная верстка Media Queries • Media Queries в CSS

21. Отладка • iOS 6.0+ • WebInpector Safari 6.0 • Android • WebInspector Chrome+ Android SDK • Универсально • Weinre – Web Inspector Remote • Используется в онлайн-сервисе http://debug.phonegap.com/

22. Полезные ресурсы • Safari Web Content Guide • iOS Human Interface Guidelines • Android Web Apps Guide • Видео-доклад про Retina-дисплеи http://events.yandex.ru/talks/363/

23. Заключение • Bitrix Mobile – новая платформа для разработки мобильных приложений • Разработчик создает мобильный сайт, тестируя его через демо-приложение • 1С-Битрикс компилирует приложение с нужными атрибутами бренда (название, иконки, логотип) и добавляет в AppStoreи Google Play • Клиент получает нативное приложение под iOSи Android для своего сайта

24. Спасибо за внимание! Вопросы? Антон Герасимюк e-mail:co@bitrix.ru twitter: @compote