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

Содержание:
Введение
Под какие браузеры верстаем
Выбор языка разметки
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
NetFront
Access, OS: LiMo, Windows Mobile
Obigo
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

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

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

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

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

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

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

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

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

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

Какие стандарты поддерживаются
HTML5
XHTML
HTML html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML Mobile Profile (XHTML-MP)
Wireless Markup Language (WML)

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

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

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

Что такое viewport

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

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

Visual, Layout, Screen

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

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”
Opera Mobile 10.10 – не позволяет изменять размер страницы
iOS – ширина viewport 320.

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

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

Media query: что это
Media query состоит из media type и условия 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
only – позволяет спрятать выражение от старых user agent

Media query: что это

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

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

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

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

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

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

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

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

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

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

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

Формы: примеры
Пример 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 вызываются вместе.
http://quirksmode.org/touchevents
Touch Action Test Page пример

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

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

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

JavaScript: touch events
http://quirksmode.org/touchevents
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 из выпадающего списка.
Заполните предлагаемые поля.

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

Тестирование: FireFox подробнее
http://mobiforge.com/testing/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
http://developer.apple.com/iphone/index.action
http://www.testiphone.com
web based

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

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

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

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

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

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

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