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


The Presentation inside:

Slide 0

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


Slide 1

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


Slide 2

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


Slide 3

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


Slide 4

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


Slide 5

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


Slide 6

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


Slide 7

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


Slide 8

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


Slide 9

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


Slide 10

Виды браузеров: полнофункциональные рендеринг происходит непосредственно на устройстве 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 NetFront Access, OS: LiMo, Windows Mobile Obigo Obigo Teleca, OS: Brew, LiMo, MeeGo


Slide 11

Виды браузеров: 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


Slide 12

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


Slide 13

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


Slide 14

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


Slide 15

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


Slide 16

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


Slide 17

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


Slide 18

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


Slide 19

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


Slide 20

Совместимость браузеров http://www.quirksmode.org/mobile/


Slide 21

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


Slide 22

Какие стандарты поддерживаются HTML5 <!DOCTYPE html> XHTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> XHTML Mobile Profile (XHTML-MP) <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN“ “http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> Wireless Markup Language (WML) <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN“ “http://www.wapforum.org/DTD/wml13.dtd">


Slide 23

Отличия стандартов http://www.w3c.org


Slide 24

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


Slide 25

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


Slide 26

Что такое viewport


Slide 27

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


Slide 28

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


Slide 29

Visual, Layout, Screen


Slide 30

Visual, Layout, Screen: как измерять Измеряется JavaScript:


Slide 31

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


Slide 32

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


Slide 33

Meta name=“viewport” Пример 2: <meta name=“viewport” content=“width=320”> Браузер отображает содержимое страницы в определенных размерах visual viewport.


Slide 34

Meta name=“viewport” Пример 3: <meta name=“viewport” content=“width=500”> Браузер отображает содержимое страницы в определенных размерах visual viewport.


Slide 35

Meta name=“viewport” Пример 4: <meta name=“viewport” content=“width=device-width”> Браузер отображает содержимое страницы в размерах visual viewport устанавливаемых устройством.


Slide 36

Meta name=“viewport” Пример 5: <meta name=“viewport” content=“width=device-width”> Содержимое шире размера visual viewport Браузер пытается отобразить все содержимое, несмотря на установленные размеры viewport.


Slide 37

Meta name=“viewport” Пример 6: <meta name=“viewport” content=“width=device-width”> Содержимое шире размера visual viewport Браузер отображает содержимое страницы в размерах visual viewport устанавливаемых устройством.


Slide 38

Meta name=“viewport” <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;">


Slide 39

Meta name=“viewport” Opera Mobile 10.10 – не позволяет изменять размер страницы iOS – ширина viewport 320.


Slide 40

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


Slide 41

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


Slide 42

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


Slide 43

Media query: что это


Slide 44

Media query: совместимость Static – media query не сработает при изменении размера экрана


Slide 45

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


Slide 46

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


Slide 47

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


Slide 48

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


Slide 49

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


Slide 50

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


Slide 51

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


Slide 52

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


Slide 53

Формы: примеры Пример 9: placeholder <input name="f1“ type="text" placeholder="Search Bookmarks and History"/>


Slide 54

Формы: примеры Пример 9: email <input name="f3" id="f3" type="email"/>


Slide 55

Формы: примеры Пример 9: URL <input name="f4" id="f4" type="url"/>


Slide 56

Формы: примеры Пример 9: tel <input name="f14" id="f14" type="tel"/>


Slide 57

Формы: примеры Пример 9: pattern <input name="f15" id="f15" type="text" pattern="[0-9]*"/>


Slide 58

Формы: примеры Пример 9: number <input name="f5" id="f5" type="number" min="0" max="10" step="1" value="1"/>


Slide 59

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


Slide 60

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


Slide 61

Ссылки: что нового <meta name = "format-detection" content = "telephone=no">


Slide 62

JavaScript Что нового?


Slide 63

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


Slide 64

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


Slide 65

JavaScript: touch events TOUCH != MOUSE


Slide 66

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


Slide 67

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


Slide 68

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


Slide 69

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


Slide 70

JavaScript: touch events http://quirksmode.org/touchevents 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. }


Slide 71

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


Slide 72

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


Slide 73

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


Slide 74

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


Slide 75

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


Slide 76

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


Slide 77

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


Slide 78

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


Slide 79

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


Slide 80

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


Slide 81

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


Slide 82

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


Slide 83

Тестирование: эмуляторы: где найти: iPhone http://developer.apple.com/iphone/index.action http://www.testiphone.com web based


Slide 84

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


Slide 85

Тестирование: эмуляторы: где найти: BlackBerry http://na.blackberry.com/eng/developers/


Slide 86

http://www.microsoft.com/downloads/details.aspx?FamilyID=a6f6adaf-12e3-4b2f-a394-356e2c2fb114&DisplayLang=en Тестирование: эмуляторы: где найти: Windows Mobile


Slide 87

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


Slide 88

Тестирование: эмуляторы: где найти: OpenWave http://developer.openwave.com/dvl/member/downloadManager.htm?softwareId=23


Slide 89

Тестирование: эмуляторы: где найти: Symbian S60 http://innovator.samsungmobile.com/index.do http://www.forum.nokia.com/


Slide 90

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


Slide 91

?


×

HTML:





Ссылка: