'

Вёрстка для iPhone

Понравилась презентация – покажи это...





Слайд 0

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


Слайд 1

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


Слайд 2

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


Слайд 3

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


Слайд 4

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


Слайд 5


Слайд 6

Don’t Build for Just One Device Flickr


Слайд 7

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


Слайд 8

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


Слайд 9

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


Слайд 10

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


Слайд 11

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


Слайд 12

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


Слайд 13

ОГРАНИЧЕНИЯ


Слайд 14

Почти Safari, кроме... Размер приложения не более 10Мб Кеш для файлов не более 25Кб Таймаут всего, что исполняется более 5 секунд Клик неточный, мышки нет Нет работы с файлами Flash


Слайд 15

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


Слайд 16

СЛАДКОЕ


Слайд 17

Хорошее Нет Internet Explorer Нет Internet Explorer и Nokia 1100!!! AJAX отлично работает В CSS возможно почти все что известно Canvas


Слайд 18

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


Слайд 19

Шрифты (Helvetica!)


Слайд 20

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


Слайд 21

Не работают


Слайд 22

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


Слайд 23

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


Слайд 24

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


Слайд 25

imoviemash.com (iUI)


Слайд 26

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


Слайд 27

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


Слайд 28

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


Слайд 29

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


Слайд 30

Как узнать iPhone? Handheld? CSS для iPhone: <link media="only screen and (max-device-width: 480px)" …/> CSS для всех остальных: <link media="screen and (min-device-width: 481px)” …/> JS: if (navigator.userAgent.indexOf('iPhone') != -1)


Слайд 31

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


Слайд 32

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


Слайд 33

Различать ориентацию JS: currentWidth = window.innerWidth; var orient = currentWidth == 320 ? "profile" : "landscape"; document.body.setAttribute("orient", orient); CSS: body[orient="profile"] {} body[orient="landscape”] {}


Слайд 34

landscape profile


Слайд 35

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


Слайд 36

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


Слайд 37

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


Слайд 38

Полезные мелочи Звонок по клику: <a href="tel:555-1212">Call Me</a> По умолчанию в эти поля вводятся числа: <input name="phone_whatever" <input name="zip" Тултипы


Слайд 39

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


Слайд 40

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


Слайд 41

СПАСИБО! Юрий Артюх, сайт: http://cssing.org.ua почта: akella.a@gmail.com


×

HTML:





Ссылка: