Владимир Гриненко "Верстка для touch-устройст (webkit)"
DESCRIPTION
28 мая 2011, Я.Субботник в Киеве Владимир Гриненко "Верстка для touch-устройст (webkit)" О докладе: В докладе будет рассмотрена разработка сайтов для touch-устройств и разобраны особенности, с которыми пришлось столкнуться при создании touch-версии главной страницы Яндекса. Стоит ли делать отдельную версию сайта для touch-устройств? Какие особенности необходимо учитывать при проектировании интерфейса? Какие технологии можно использовать? С какими подводными камнями можно столкнуться и как их обойти? Какие перспективы можно ожидать в этой отрасли?TRANSCRIPT
Я.Субботник, Киев, 28 мая 2011 года
Разработчик интерфейсовВладимир Гриненко
Верстка для touch-‐устройств (webkit)на примере главной страницы Яндекса
www.yandex.ru
2
3
Привычно
4
Для телефонов
5
Для телефонов
6
Для смартфонов
Кому это нужно?
7
8
20071 389 000
200811 625 000
200920 731 000
Продажи iPhone
8
20071 389 000
200811 625 000
200920 731 000
Продажи iPhone
8
20071 389 000
200811 625 000
200920 731 000
Продажи iPhone
9
201039 989 000
201111 625 000
И это только за два квартала!
Продажи iPhone
9
201039 989 000
201111 625 000
И это только за два квартала!
Продажи iPhone
9
201039 989 000
201111 625 000
И это только за два квартала!
Продажи iPhone
10
108 624 000
11
Обогнали iPhone
+ 400 000 каждый день*
* h9p://googleblog.blogspot.com/2011/05/android-‐momentum-‐mobile-‐and-‐more-‐at.html
Android
11
Обогнали iPhone
+ 400 000 каждый день*
* h9p://googleblog.blogspot.com/2011/05/android-‐momentum-‐mobile-‐and-‐more-‐at.html
Android
Что же делать?
12
13
Можно не париться
14
Можно использовать отдельные стили
@media only screen and(max-device-width: 480px){ }
15
И для Remna
iPhone 3Gs iPhone 4
16
И для Remna
@mediaonly screen and (-webkit-min-device-pixel-ratio: 1.5),only screen and (-o-min-device-pixel-ratio: 3/2),only screen and (min-device-pixel-ratio: 1.5){
}
17
Из JavaScript
var ios,android,match;
if (match = ua.match(/(Android)\s+([\d.]+)/)) { android = match[2];} else if (match = ua.match(/(iPhone\sOS)\s([\d_]+)/)){ ios = match[2].replace(/_/g, '.');}
18
Meta: настраиваем масштаб
<meta name="viewport" content="width=device-width, initial-scale=1.0">
19
Иконка для Home screen
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/h/apple-touch-icon.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/m/apple-touch-icon.png">
<link rel="apple-touch-icon-precomposed" href="img/l/apple-touch-icon.png">
iPhone 4
iPad первого поколения
iPhone , iPod Touch, and Android 2.1+
20
Или сделать отдельную версию
21
Другой user-‐experienceЗачем?
―пальцы VS мышь
―3.5" VS 22"
―два режима: portrait и landscape
21
Другой user-‐experienceЗачем?
―пальцы VS мышь
―3.5" VS 22"
―два режима: portrait и landscape
21
Другой user-‐experienceЗачем?
―пальцы VS мышь
―3.5" VS 22"
―два режима: portrait и landscape
22
Радость
―HTML5
―CSS3
―поддержка touch-‐событий
―точная геолокация
―шрифты
―SVG
22
Радость
―HTML5
―CSS3
―поддержка touch-‐событий
―точная геолокация
―шрифты
―SVG
22
Радость
―HTML5
―CSS3
―поддержка touch-‐событий
―точная геолокация
―шрифты
―SVG
22
Радость
―HTML5
―CSS3
―поддержка touch-‐событий
―точная геолокация
―шрифты
―SVG
22
Радость
―HTML5
―CSS3
―поддержка touch-‐событий
―точная геолокация
―шрифты
―SVG
22
Радость
―HTML5
―CSS3
―поддержка touch-‐событий
―точная геолокация
―шрифты
―SVG
23
Печаль
―Android
―Opera Mobile
―скорость рендеринга
23
Печаль
―Android
―Opera Mobile
―скорость рендеринга
23
Печаль
―Android
―Opera Mobile
―скорость рендеринга
24
Особенности
―очень ограничен кэш
―нет поддержки flash
―нет полноценного posi`on: fixed
24
Особенности
―очень ограничен кэш
―нет поддержки flash
―нет полноценного posi`on: fixed
24
Особенности
―очень ограничен кэш
―нет поддержки flash
―нет полноценного posi`on: fixed
Радости и печали наwww.yandex.ru
25
26
www.yandex.ru для iPhone
27
CSS3 100%
28
Вендорные префиксыТени, градиенты, уголки
-webkit-
Не нужны (пока!) -‐moz-‐, -‐ie-‐,…
Только
29
Круглые уголки
-webkit-border-radius: 8px;
-webkit-border-radius: 7px;
-webkit-background-clip: padding-box;
30
Иконки
―SVG
―data-‐uri
―mul`ple background
30
Иконки
―SVG
―data-‐uri
―mul`ple background
30
Иконки
―SVG
―data-‐uri
―mul`ple background
31
o_0
background:
url(http://img.yandex.net/i/mobile/apps/lentochka.svg) no-repeat right 0,
url(data:image/png;base64,iVBORw0KGgoAAAANdkeXHJZTwAAAAASUVORK5CYII=) no-repeat center 15px,
-webkit-gradient(linear, 0 0, 0 bottom, from(#fff), to(#e5e5e5))
31
o_0
background:
url(http://img.yandex.net/i/mobile/apps/lentochka.svg) no-repeat right 0,
url(data:image/png;base64,iVBORw0KGgoAAAANdkeXHJZTwAAAAASUVORK5CYII=) no-repeat center 15px,
-webkit-gradient(linear, 0 0, 0 bottom, from(#fff), to(#e5e5e5))
31
o_0
background:
url(http://img.yandex.net/i/mobile/apps/lentochka.svg) no-repeat right 0,
url(data:image/png;base64,iVBORw0KGgoAAAANdkeXHJZTwAAAAASUVORK5CYII=) no-repeat center 15px,
-webkit-gradient(linear, 0 0, 0 bottom, from(#fff), to(#e5e5e5))
31
o_0
background:
url(http://img.yandex.net/i/mobile/apps/lentochka.svg) no-repeat right 0,
url(data:image/png;base64,iVBORw0KGgoAAAANdkeXHJZTwAAAAASUVORK5CYII=) no-repeat center 15px,
-webkit-gradient(linear, 0 0, 0 bottom, from(#fff), to(#e5e5e5))
32
«Найти»
.b-button:after{background: -webkit-gradient(linear, 0 0, 100% 100%, from(#fff), to(#c8c8c8));-webkit-transform: rotate(45deg) skew(18deg, 18deg);-webkit-box-shadow: 0 0 1px #aaa;}
33
Геолокация
navigator.geolocation.getCurrentPosition(successCallback, errorCallback, timeout);
33
Геолокация
navigator.geolocation.getCurrentPosition(successCallback, errorCallback, timeout);
34
Отдельная модификация для AndroidПечаль
35
СравнимПечаль
Рецепты
36
37
CSSРецепты
-webkit-text-size-adjust: none;
Отключить автоматическое изменение размера шрифта
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
Отключить цветную обводку активных элементов
38
CSSРецепты
-webkit-user-select: none;
Запретить выделять текст
-webkit-touch-callout: none;
Запретить всплывающие системные меню
39
MetaРецепты
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=2; user-scalable=1;">
Ограничить изменение масштаба до х2
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; user-scalable=0;" />
Запретить изменение масштаба
40
iOS Simulator: жизнь без iPhoneРецепты
41
Где почитать?
Официальная документацияhop://developer.apple.com/
Подробно про viewporthops://docs.google.com/a/tadatuta.com/present/view?id=dkx3qtm_22dxsrgcf4
Touch eventshop://ross.posterous.com/2008/08/19/iphone-‐touch-‐events-‐in-‐javascript
Вопросы?
42
Разработчик интерфейсов
tadatuta@yandex-‐team.ru
Владимир Гриненко