Особенности верстки под мобильные устройства World Usability Day 2010

Содержание: Введение Под какие браузеры верстаем Выбор языка разметки Viewports Media queries Формы Ссылки JavaScript Тестирование

Введение Зачем это нужно Что будет рассмотрено

Зачем это нужно Mobile internet растет быстрее чем desktop internet Рост продаж смартфонов Снижение продаж телефонов 3G – ключ к успеху мобильного интернета

Зачем это нужно Mobile internet растет быстрее чем desktop internet

Зачем это нужно Рост продаж смартфонов

Зачем это нужно Снижение продаж телефонов

Зачем это нужно 3G – ключ к успеху мобильного интернета

Что будет рассмотрено Как и какой стандарт языка выбрать? На что обращать внимание? Как проверять результат?

Под какие браузеры верстаем Виды браузеров Доля браузеров Совместимость браузеров

Виды браузеров: полнофункциональные рендеринг происходит непосредственно на устройстве WebKit Safari Apple, OS: iOS Android WebKit Google, OS: Android Dolfin Samsung, OS: bada BlackBerry WebKit RIM, OS: BlackBerry Palm WebKit HP, OS: WebOS Phantom LG, OS: S-class Symbian WebKit Nokia, OS: Symbian S40 WebKit Nokia, OS: S40 Presto Opera Mobile Opera, OS: Android, MeeGo, Symbian, Windows Mobile Gecko MicroB Nokia, OS: MeeGo Firefox Mozilla, OS: Android, MeeGo Mango BlackBerry old RIM, OS: BlackBarry old Trident IE Mobile Microsoft, OS: Windows Mobile NetFront Access, OS: LiMo, Windows Mobile Obigo Teleca, OS: Brew, LiMo, MeeGo

Виды браузеров: mini рендеринг происходит на сервере WebKit Bolt Bitstream, OS: BlackBerry, BlackBerry ol, Symbian, Windows Mobile Presto Opera Mini Opera, OS: Android, bada, BlackBerry old, Brew, iOS, S40, Symbian, Windows Mobile Gecko Ovi Nokia, OS: S40 UC UCWeb UC, OS: Android, bada, iOS, Ophone, Symbian, Windows Mobile

Доля браузеров: worldwide

Доля браузеров: North America

Доля браузеров: Europe

Доля браузеров: Russian Federation

Совместимость браузеров org/mobile/

Выбор языка разметки Какие стандарты поддерживаются Отличия стандартов Какой стандарт выбрать

Какие стандарты поддерживаются HTML5 XHTML HTML XHTML Mobile Profile (XHTML-MP) Wireless Markup Language (WML)

Отличия стандартов

Какой стандарт выбрать XHTML: Ориентирован на продвинутые мобильные устройства и смартфоны. Все больше мобильных браузеров поддерживают XHTML в дополнении к XHTML MP и WML. Однако XHTML не поддерживается большинством мобильных телефонов. XHTML-MP: Ориентирован на большинство мобильных устройств, как телефонов, так и смартфонов, за исключением iPhone. XHTML-MP – стандарт языка для разметки сайтов для мобильных устройств. WML: Ориентирован на старые мобильные устройства, с минимальной поддержкой графики, где малый размер документа является приоритетом.

Viewports Что такое viewport Visual, Layout and Screen Meta name=viewport Поддержка

Что такое viewport

Разница между CSS-точками и физическими точками

Visual, Layout, Screen Visual viewport – часть страницы, которая в данный момент отображается на экране. Пользователь может изменить видимую часть страницы, проскроллировав ее или увеличив масштаб отображения. Layout viewport – вся страница. Размер разный в зависимости от браузера. БраузерLayout ViewPort Safari iPhone980 Opera850 Android WebKit800 Internet Explorer974

Visual, Layout, Screen

Visual, Layout, Screen: как измерять Измеряется JavaScript: ViewportLayout ViewPort Visualwindow.innerWidth/Height Layoutdocument.documentElement.clientWidth/clientHeight Screenscreen.width/height

Meta name=viewport Устанавливает размер layout viewport

Meta name=viewport Пример 1: viewport не установлен Браузер отображает все содержимое страницы, увеличивая размер visual viewport до максимальных размеров.

Meta name=viewport Пример 2: Браузер отображает содержимое страницы в определенных размерах visual viewport.

Meta name=viewport Пример 3: Браузер отображает содержимое страницы в определенных размерах visual viewport.

Meta name=viewport Пример 4: Браузер отображает содержимое страницы в размерах visual viewport устанавливаемых устройством.

Meta name=viewport Пример 5: Содержимое шире размера visual viewport Браузер пытается отобразить все содержимое, несмотря на установленные размеры viewport.

Meta name=viewport Пример 6: Содержимое шире размера visual viewport Браузер отображает содержимое страницы в размерах visual viewport устанавливаемых устройством.

Meta name=viewport

Meta name=viewport Browser Opera Mobileyes Opera Minino iPhoneyes Androidyes Symbianno S40no BlackBerryyes Phantombuggy Boltno Firefoxno IE Mobileyes Opera Mobile – не позволяет изменять размер страницы iOS – ширина viewport 320.

Media queries Что это такое Кем поддерживается

Media query: что это CSS2 - позволяет указать таблицу стилей для конкретного типа носителей, таких как экран или принтер. CSS3 - вы можете добавить выражения к media type для проверки определенных условиях и применять различные стили.

Media query: что это Media query состоит из media type и url(color.css) screen and (color); Media query – это логическое выражение, соответственно должно принимать значения true или false Несколько выражений могут быть объединены в screen and (color), projection and (color) { … }, в этом списке – логическое OR, and – логическое AND not – логическое NOT only – позволяет спрятать выражение от старых user agent

Media query: что это FeatureValueMin/MaxApplies to WidthlengthYesvisual and tactile media types HeightlengthYesvisual and tactile media types Device-widthlengthYesvisual and tactile media types Device-heightlengthYesvisual and tactile media types Orientationportrait or landscapeNobitmap media types Aspect-ratioratioYesbitmap media types Device-aspect-ratioratioYesbitmap media types ColorintegerYesvisual media types Color-indexintegerYesvisual media types Monochromeintegeryesvisual media types ResolutionInteger (dpi or dpcm)Yesbitmap media types scanprogressive or interlacedNo"tv" media types gridIntegernovisual and tactile media types

Media query: совместимость Browser Opera Mobileyes Opera Miniyes iPhoneyes Androidyes Symbianstatic S40static BlackBerryyes Phantomyes Boltyes Firefoxyes IE Mobileno Static – media query не сработает при изменении размера экрана

Media query: примеры Пример screen and (max-device-width: 320px) { DIV { background-color: yellow; color: black; screen and (min-device-width: 321px) { DIV { background-color: red; color: white; }

Media query: примеры Пример 7: Android ведет себя совершенно по другому, после обновления страницы media-query срабатывает.

Media query: примеры Пример screen and (orientation: portrait) { DIV { background-color: yellow; color: black; screen and (orientation: landscape) { DIV { background-color: red; color: white; }

Media query: примеры Пример 8: iPhone 3G не понимает orientation. Android понимает, так же как и iOS.

Media query: примеры Пример screen and (max-width: 320px) { DIV { background-color: yellow; color: black; screen and (min-width: 321px) { DIV { background-color: red; color: white; }

Media query: примеры Пример 8.1: Багов не замечено.

Формы Поведение Что нового Примеры

Формы: поведение Увеличение + экранная клавиатура

Формы: примеры Пример 9: placeholder

Формы: примеры Пример 9:

Формы: примеры Пример 9: URL

Формы: примеры Пример 9: tel

Формы: примеры Пример 9: pattern

Формы: примеры Пример 9: number

Ссылки Что нового Примеры

Ссылки: что нового tel: sms: mmsto:

Ссылки: что нового

JavaScript Что нового?

JavaScript: что нового? Способы взаимодействия: Клавиатура Мышь Touch screen

JavaScript: touch events Способы взаимодействия: Клавиатура keydown keypress keyup Мышь mousedown mouseup mouseover mouseout mousemove Способы взаимодействия: Touch screen touchstart touchend touchmove touchcancel

JavaScript: touch events TOUCH != MOUSE

JavaScript: touch events В теории touchscreen должен вызывать только touch события, а не события мыши. Однако, слишком много веб-сайтов используют события мыши, поэтому производители браузеров вынуждены поддерживать их.

JavaScript: touch events Поэтому, обычно события мыши и touch events вызываются вместе. Touch Action Test Page пример

JavaScript: touch events Drag & Drop пример element.onmousedown = function (e) { // initialise document.onmousemove = function (e) { // move } document.onmouseup = function (e) { document.onmousemove = null; document.onmouseup = null; }

JavaScript: touch events Drag & Drop пример element.ontouchstart = function (e) { // initialise document.ontouchmove = function (e) { // move } document.ontouchend = function (e) { document.ontouchmove = null; document.ontouchend = null; }

JavaScript: touch events Drag & Drop пример element.onmousedown = function (e) { document.onmousemove = etc. document.onmouseup = etc. } element.ontouchstart = function (e) { document.onmousedown = null; document.ontouchmove = etc. document.ontouchend = etc. }

JavaScript: touch events Drag & Drop 2 пример (iPhone) Потаскайте несколько элементов одновременно!

Тестирование Введение FireFox Эмуляторы

Тестирование Протестируйте ваш сайт сначала на обычном браузере (например FireFox), чтобы убедится что все работает как ожидалось. Как только вся функциональная часть сайта работает как надо, переходите на тестирование на эмуляторах. После этого можно переходить на тестирование на реальных устройствах.

Тестирование с загрузкой изображений и стилей без загрузки изображений без загрузки стилей с полностью отключенными стилями и изображениями

Тестирование: FireFox Что надо: Firefox Web browser Modify Headers add-on User Agent Switcher add-on

Тестирование: FireFox Для добавления user agent в Firefox Tools -> Default User Agent -> User Agent Switcher -> Options

Тестирование: FireFox Нажмите кнопку New и выберите New User Agent из выпадающего списка. Заполните предлагаемые поля.

/web/mobile_ids.html Тестирование: Список User Agents

Тестирование: FireFox подробнее story/testing-mobile-web- sites-using-firefox

Тестирование: эмуляторы Типы эмуляторов: Эмуляторы устройств Эмуляторы браузеров Эмуляторы операционных систем

Тестирование: эмуляторы Проблемы: Не всегда эмулятор полностью повторяет поведение устройства Размеры шрифтов могут отличаться (в основном это связано с физическим размером точки)

Тестирование: эмуляторы Популярные эмуляторы: Research in Motion (BlackBerry) Samsung Palm LG Motorola Эмуляторы операционных систем: Apple (iOS) Microsoft (Windows Mobile) Google (Android) Nokia (Series 40 and Series 60) Эмуляторы браузеров: Opera Mini Openwave

Тестирование: эмуляторы: где найти: iPhone hone/index.action web based

Тестирование: эмуляторы: где найти: Opera Mini /demo/ web based

Тестирование: эмуляторы: где найти: BlackBerry developers/

oads/details.aspx?FamilyID=a6f6a daf-12e3-4b2f-a e2c2fb114&DisplayLang=en Тестирование: эмуляторы: где найти: Windows Mobile

Тестирование: эмуляторы: где найти: Android sdk/index.html

Тестирование: эмуляторы: где найти: OpenWave m/dvl/member/downloadMana ger.htm?softwareId=23

Тестирование: эмуляторы: где найти: Symbian S60 mobile.com/index.do com/

Тестирование: эмуляторы подробнее story/a-guide-mobile- emulators

?