Вёрстка для iPhone 16 декабря, 2008, Москва. Продано более 10 000 000. - презентация

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

2 Продано более

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

4 85% владельцев ходили в интернет

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

6

7 Dont 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; "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 Ссылки Официальная документация: Хороший «хакерский» ресурс Фреймворк с интерфейсом под iPhone: Статья на alistapart: t

42 СПАСИБО! Юрий Артюх, сайт: почта: