28 мая 2011, Я.Субботник в Киеве Владимир Гриненко "Верстка для touch-устройст (webkit)" О докладе: В докладе будет рассмотрена разработка сайтов для touch-устройств и разобраны особенности, с которыми пришлось столкнуться при создании touch-версии главной страницы Яндекса. Стоит ли делать отдельную версию сайта для touch-устройств? Какие особенности необходимо учитывать при проектировании интерфейса? Какие технологии можно использовать? С какими подводными камнями можно столкнуться и как их обойти? Какие перспективы можно ожидать в этой отрасли?

1. Верстка для touch-­‐устройств (webkit)
на примере главной страницы Яндекса
Владимир Гриненко
Разработчик интерфейсов
Я.Субботник, Киев, 28 мая 2011 года

2. www.yandex.ru
2

3. Привычно
3

4. Для телефонов
4

5. Для телефонов
5

6. Для смартфонов
6

7. Кому это нужно?
7

8. Продажи iPhone
2007
1 389 000
2008
11 625 000
2009
20 731 000
8

9. Продажи iPhone
2007
1 389 000
2008
11 625 000
2009
20 731 000
8

10. Продажи iPhone
2007
1 389 000
2008
11 625 000
2009
20 731 000
8

11. Продажи iPhone
2010
39 989 000
2011
11 625 000
И это только за два квартала!
9

12. Продажи iPhone
2010
39 989 000
2011
11 625 000
И это только за два квартала!
9

13. Продажи iPhone
2010
39 989 000
2011
11 625 000
И это только за два квартала!
9

14. 108 624 000
10

15. Android
Обогнали iPhone
+ 400 000 каждый день*
* h9p://googleblog.blogspot.com/2011/05/android-­‐momentum-­‐mobile-­‐and-­‐more-­‐at.html
11

16. Android
Обогнали iPhone
+ 400 000 каждый день*
* h9p://googleblog.blogspot.com/2011/05/android-­‐momentum-­‐mobile-­‐and-­‐more-­‐at.html
11

17. Что же делать?
12

18. Можно не париться
13

19. Можно использовать
отдельные стили
@media only screen and
(max-device-width: 480px)
{
}
14

20. И для Remna
iPhone 3Gs iPhone 4
15

21. И для Remna
@media
only 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)
{
}
16

22. Из JavaScript
var ios,
android,
match;
if (match = ua.match(/(Android)s+([d.]+)/)) {
android = match[2];
} else if (match = ua.match(/(iPhonesOS)s([d_]+)/)){
ios = match[2].replace(/_/g, '.');
}
17

23. Meta: настраиваем масштаб
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
18

24. Иконка для Home screen
iPhone 4
<link rel="apple-touch-icon-precomposed" sizes="114x114"
href="img/h/apple-touch-icon.png">
iPad первого поколения
<link rel="apple-touch-icon-precomposed" sizes="72x72"
href="img/m/apple-touch-icon.png">
iPhone , iPod Touch, and Android 2.1+
<link rel="apple-touch-icon-precomposed" href="img/l/apple-
touch-icon.png">
19

25. Или сделать отдельную версию
20

26. Зачем?
Другой user-­‐experience
― пальцы VS мышь
― 3.5" VS 22"
― два режима: portrait и landscape
21

27. Зачем?
Другой user-­‐experience
― пальцы VS мышь
― 3.5" VS 22"
― два режима: portrait и landscape
21

28. Зачем?
Другой user-­‐experience
― пальцы VS мышь
― 3.5" VS 22"
― два режима: portrait и landscape
21

29. Радость
― HTML5
― CSS3
― поддержка touch-­‐событий
― точная геолокация
― шрифты
― SVG
22

30. Радость
― HTML5
― CSS3
― поддержка touch-­‐событий
― точная геолокация
― шрифты
― SVG
22

31. Радость
― HTML5
― CSS3
― поддержка touch-­‐событий
― точная геолокация
― шрифты
― SVG
22

32. Радость
― HTML5
― CSS3
― поддержка touch-­‐событий
― точная геолокация
― шрифты
― SVG
22

33. Радость
― HTML5
― CSS3
― поддержка touch-­‐событий
― точная геолокация
― шрифты
― SVG
22

34. Радость
― HTML5
― CSS3
― поддержка touch-­‐событий
― точная геолокация
― шрифты
― SVG
22

35. Печаль
― Android
― Opera Mobile
― скорость рендеринга
23

36. Печаль
― Android
― Opera Mobile
― скорость рендеринга
23

37. Печаль
― Android
― Opera Mobile
― скорость рендеринга
23

38. Особенности
― очень ограничен кэш
― нет поддержки flash
― нет полноценного posi`on: fixed
24

39. Особенности
― очень ограничен кэш
― нет поддержки flash
― нет полноценного posi`on: fixed
24

40. Особенности
― очень ограничен кэш
― нет поддержки flash
― нет полноценного posi`on: fixed
24

41. Радости и печали на
www.yandex.ru
25

42. www.yandex.ru для iPhone
26

43. CSS3 100%
27

44. Тени, градиенты, уголки
Вендорные префиксы
Не нужны (пока!) -­‐moz-­‐, -­‐ie-­‐,…
Только
-webkit-
28

45. Круглые уголки
-webkit-border-radius: 8px;
-webkit-border-radius: 7px;
-webkit-background-clip: padding-box;
29

46. Иконки
― SVG
― data-­‐uri
― mul`ple background
30

47. Иконки
― SVG
― data-­‐uri
― mul`ple background
30

48. Иконки
― SVG
― data-­‐uri
― mul`ple background
30

49. o_0
background:
url(http://img.yandex.net/i/mobile/apps/
lentochka.svg) no-repeat right 0,
url(data:image/
png;base64,iVBORw0KGgoAAAANdkeXHJZTwAAAAASUVORK5CY
II=) no-repeat center 15px,
-webkit-gradient(linear, 0 0, 0 bottom, from
(#fff), to(#e5e5e5))
31

50. o_0
background:
url(http://img.yandex.net/i/mobile/apps/
lentochka.svg) no-repeat right 0,
url(data:image/
png;base64,iVBORw0KGgoAAAANdkeXHJZTwAAAAASUVORK5CY
II=) no-repeat center 15px,
-webkit-gradient(linear, 0 0, 0 bottom, from
(#fff), to(#e5e5e5))
31

51. o_0
background:
url(http://img.yandex.net/i/mobile/apps/
lentochka.svg) no-repeat right 0,
url(data:image/
png;base64,iVBORw0KGgoAAAANdkeXHJZTwAAAAASUVORK5CY
II=) no-repeat center 15px,
-webkit-gradient(linear, 0 0, 0 bottom, from
(#fff), to(#e5e5e5))
31

52. o_0
background:
url(http://img.yandex.net/i/mobile/apps/
lentochka.svg) no-repeat right 0,
url(data:image/
png;base64,iVBORw0KGgoAAAANdkeXHJZTwAAAAASUVORK5CY
II=) no-repeat center 15px,
-webkit-gradient(linear, 0 0, 0 bottom, from
(#fff), to(#e5e5e5))
31

53. «Найти»
.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;
}
32

54. Геолокация
navigator.geolocation.getCurrentPosition(
successCallback, errorCallback, timeout);
33

55. Геолокация
navigator.geolocation.getCurrentPosition(
successCallback, errorCallback, timeout);
33

56. Печаль
Отдельная модификация для Android
34

57. Печаль
Сравним
35

58. Рецепты
36

59. Рецепты
CSS
Отключить автоматическое изменение размера шрифта
-webkit-text-size-adjust: none;
Отключить цветную обводку активных элементов
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
37

60. Рецепты
CSS
Запретить выделять текст
-webkit-user-select: none;
Запретить всплывающие системные меню
-webkit-touch-callout: none;
38

61. Рецепты
Meta
Ограничить изменение масштаба до х2
<meta name="viewport" content="width=device-
width; initial-scale=1; maximum-scale=2; user-
scalable=1;">
Запретить изменение масштаба
<meta name="viewport" content="width=device-
width; initial-scale=1; maximum-scale=1; user-
scalable=0;" />
39

62. Рецепты
iOS Simulator: жизнь без iPhone
40

63. Где почитать?
Официальная документация
hop://developer.apple.com/
Подробно про viewport
hops://docs.google.com/a/tadatuta.com/present/view?
id=dkx3qtm_22dxsrgcf4
Touch events
hop://ross.posterous.com/2008/08/19/iphone-­‐touch-­‐
events-­‐in-­‐javascript
41

64. Вопросы?
42

65. Владимир Гриненко
Разработчик интерфейсов
tadatuta@yandex-­‐team.ru