Вёрстка для iPhone 16 декабря, 2008, Москва

Август 29, 2022

Главная
Технология
Вёрстка для iPhone 16 декабря, 2008, Москва

Содержание

2. Продано более 10 000 000
3. За следующие 12 месяцев еще 40 000 000
4. За следующие 12 месяцев еще 40 000 000 85% владельцев ходили в интернет
5. И всё равно нельзя верстать только для iPhone
7. Don’t Build for Just One Device Flickr
8. Мобильные платформы Nokia (Symbian) – WebKit iPhone – WebKit Android – WebKit Не так важен сам
9. Чем отличается от других? Почти полноценный браузер
10. Чем отличается от других? Почти полноценный браузер Два режима (portrait+landscape)
11. Чем отличается от других? Почти полноценный браузер Два режима (portrait+landscape) Пальцы очень разные (хоккеисты и балерины)
12. Чем отличается от других? Почти полноценный браузер Два режима (portrait+landscape) Пальцы очень разные Нос
13. Расписание поездов? Одну минуту, посмотрю на сайте.
14. ОГРАНИЧЕНИЯ
15. Почти Safari, кроме... Размер приложения не более 10Мб Кеш для файлов не более 25Кб Таймаут всего,
16. Размер экрана
17. СЛАДКОЕ
18. Хорошее Нет Internet Explorer Нет Internet Explorer и Nokia 1100!!! AJAX отлично работает В CSS возможно
19. CSS3 и анимация .divSlide { -webkit-animation-name: "slide-me-to-the-right"; -webkit-animation-duration: 1s; } @-webkit-keyframes "slide-me-to-the-right" { from { left:
20. Шрифты (Helvetica!)
21. РАЗНЫЕ САЙТЫ ДЛЯ IPHONE
22. Не работают
23. Хотя бы открываются
24. Оптимизированы
25. Копируют интерфейс (iUI)
26. imoviemash.com (iUI)
27. По какому пути идти?
28. По какому пути идти? По правильному!
29. По какому пути идти? Вариант оптимизированного сайта Запоминающийся дизайн Не ограничены интерфейсом Красиво
30. ОПТИМИЗАЦИЯ САЙТА ДЛЯ IPHONE
31. Как узнать iPhone? Handheld? CSS для iPhone: …/> CSS для всех остальных: …/> JS: if (navigator.userAgent.indexOf('iPhone')
32. Размер экрана
33. 60px!: window.scrollTo(0,1)
34. Различать ориентацию JS: currentWidth = window.innerWidth; var orient = currentWidth == 320 ? "profile" : "landscape";
35. landscape profile
36. Трафик Уменьшение HTTP-запросов Меньше картинок Gzip Кеширование (файлы менее 25Кб) Аякс (грузить части сайта) Base64 Избегать
37. Оптимизация изображения Запретить пользователю увеличивать сайт: Одинаковый размер шрифта при поворотах:
38. Юзабилити Ссылки – кнопки. Большая кликабельная область. Рекомендуемый шрифт Helvetica Легкие странички
39. Полезные мелочи Звонок по клику: Call Me По умолчанию в эти поля вводятся числа: Тултипы
40. Тестировать iPhoney (дизайн) ySlow (производительность) Обычные инструменты веб-разработки iPhone
41. Ссылки Официальная документация: http://developer.apple.com/webapps/ Хороший «хакерский» ресурс http://www.iphonewebdev.com/ Фреймворк с интерфейсом под iPhone: http://code.google.com/p/iui/ Статья на
43. Скачать презентацию

Слайд 2

Продано более 10 000 000

Слайд 3

За следующие 12 месяцев еще 40 000 000

Слайд 4

За следующие 12 месяцев еще 40 000 000
85% владельцев ходили в интернет

Слайд 5

И всё равно нельзя верстать только для iPhone

Слайд 6

Слайд 7

Don’t Build for Just One Device
Flickr

Слайд 8

Мобильные платформы
Nokia (Symbian) – WebKit
iPhone – WebKit
Android – WebKit
Не так важен

сам iPhone как будущее.

Слайд 9

Чем отличается от других?
Почти полноценный браузер

Слайд 10

Чем отличается от других?
Почти полноценный браузер
Два режима (portrait+landscape)

Слайд 11

Чем отличается от других?
Почти полноценный браузер
Два режима (portrait+landscape)
Пальцы очень разные
(хоккеисты

и балерины)

Слайд 12

Чем отличается от других?
Почти полноценный браузер
Два режима (portrait+landscape)
Пальцы очень разные
Нос

Слайд 13

Расписание поездов? Одну минуту, посмотрю на сайте.

Слайд 14

ОГРАНИЧЕНИЯ

Слайд 15

Почти Safari, кроме...
Размер приложения не более 10Мб
Кеш для файлов не более

25Кб
Таймаут всего, что исполняется более 5 секунд
Клик неточный, мышки нет
Нет работы с файлами
Flash

Слайд 16

Размер экрана

Слайд 17

СЛАДКОЕ

Слайд 18

Хорошее
Нет Internet Explorer
Нет Internet Explorer и Nokia 1100!!!
AJAX отлично работает
В CSS

возможно почти все что известно
Canvas

Слайд 19

CSS3 и анимация
.divSlide {
-webkit-animation-name: "slide-me-to-the-right";
-webkit-animation-duration: 1s;
}
@-webkit-keyframes "slide-me-to-the-right" { from

{ left: 0px; }
to { left: 100px; }
}

Слайд 20

Шрифты (Helvetica!)

Слайд 21

РАЗНЫЕ САЙТЫ ДЛЯ IPHONE

Слайд 22

Не работают

Слайд 23

Хотя бы открываются

Слайд 24

Оптимизированы

Слайд 25

Копируют интерфейс (iUI)

Слайд 26

imoviemash.com (iUI)

Слайд 27

По какому пути идти?

Слайд 28

По какому пути идти? По правильному!

Слайд 29

По какому пути идти?
Вариант оптимизированного сайта
Запоминающийся дизайн
Не ограничены интерфейсом
Красиво

Слайд 30

ОПТИМИЗАЦИЯ САЙТА ДЛЯ IPHONE

Слайд 31

Как узнать iPhone? Handheld?
CSS для iPhone:

…/>
CSS для всех остальных:

Слайд 32

Размер экрана

Слайд 33

60px!: window.scrollTo(0,1)

Слайд 34

Различать ориентацию
JS:
currentWidth = window.innerWidth;
var orient = currentWidth == 320 ?

"profile" : "landscape";
document.body.setAttribute("orient", orient);
CSS:
body[orient="profile"] {}
body[orient="landscape”] {}

Слайд 35

landscape
profile

Слайд 36

Трафик
Уменьшение HTTP-запросов
Меньше картинок
Gzip
Кеширование (файлы менее 25Кб)
Аякс (грузить части сайта)
Base64
Избегать фреймворков

Слайд 37

Оптимизация изображения
Запретить пользователю увеличивать сайт:
Одинаковый размер шрифта при поворотах:

Слайд 38

Юзабилити
Ссылки – кнопки. Большая кликабельная область.
Рекомендуемый шрифт Helvetica
Легкие странички

Слайд 39

Полезные мелочи
Звонок по клику: Call Me
По умолчанию в эти поля

вводятся числа:
Тултипы

Слайд 40

Тестировать
iPhoney (дизайн)
ySlow (производительность)
Обычные инструменты веб-разработки
iPhone

Слайд 41

Ссылки
Официальная документация: http://developer.apple.com/webapps/
Хороший «хакерский» ресурс http://www.iphonewebdev.com/
Фреймворк с интерфейсом под iPhone:
http://code.google.com/p/iui/
Статья на

alistapart:
http://www.alistapart.com/articles/putyourcontentinmypocket