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

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

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

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

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

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

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

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

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

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

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

11 Виды браузеров: полнофункциональные рендеринг происходит непосредственно на устройстве 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

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

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

14

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

16

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

18

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

20

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

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

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

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

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

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

27 Что такое viewport

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

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

30 Visual, Layout, Screen

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

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

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

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

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

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

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

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

39 Meta name=viewport

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

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

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

43 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

44 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

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

46 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; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

63 JavaScript Что нового?

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

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

66 JavaScript: touch events TOUCH != MOUSE

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

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

69 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; }

70 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; }

71 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. }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

92 ?