Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Верстка для iphone

1,920 views

Published on

Доклад Юрия Артюха на конференции "РИТ: Клиентские технологии" (http://www.clienttech.ru/)

Published in: Technology
  • Login to see the comments

Верстка для iphone

  1. 1. Вёрстка для iPhone  16 декабря, 2008, Москва  
  2. 2. Продано более 10 000 000 
  3. 3. За следующие 12 месяцев  еще 40 000 000 
  4. 4. За следующие 12 месяцев  еще 40 000 000  85% владельцев ходили в интернет 
  5. 5. И всё равно нельзя верстать  только для iPhone 
  6. 6. Don’t Build for Just One Device  Flickr    
  7. 7. Мобильные платформы  •  Nokia (Symbian) – WebKit  •  iPhone – WebKit  •  Android – WebKit  Не так важен сам iPhone как будущее. 
  8. 8. Чем отличается от других?  •  Почти полноценный                                   браузер 
  9. 9. Чем отличается от других?  •  Почти полноценный                                   браузер  •  Два режима                                                  (portrait+landscape) 
  10. 10. Чем отличается от других?  •  Почти полноценный                                   браузер  •  Два режима                                                  (portrait+landscape)  •  Пальцы очень разные     (хоккеисты и балерины) 
  11. 11. Чем отличается от других?  •  Почти полноценный                                   браузер  •  Два режима                                                  (portrait+landscape)  •  Пальцы очень разные  •  Нос 
  12. 12. Расписание поездов?  Одну минуту, посмотрю на сайте. 
  13. 13. ОГРАНИЧЕНИЯ 
  14. 14. Почти Safari, кроме...  •  Размер приложения не более 10Мб  •  Кеш для файлов не более 25Кб  •  Таймаут всего, что исполняется более 5 секунд  •  Клик неточный, мышки нет  •  Нет работы с файлами  •  Flash 
  15. 15. Размер экрана 
  16. 16. СЛАДКОЕ 
  17. 17. Хорошее  •  Нет Internet Explorer  •  Нет Internet Explorer и Nokia 1100!!!  •  AJAX отлично работает  •  В CSS возможно почти все что известно  •  Canvas 
  18. 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. 19. Шрифты (Helvetica!)
  20. 20. РАЗНЫЕ САЙТЫ ДЛЯ IPHONE 
  21. 21. Не работают 
  22. 22. Хотя бы открываются 
  23. 23. Оптимизированы 
  24. 24. Копируют интерфейс (iUI) 
  25. 25. imoviemash.com (iUI) 
  26. 26. По какому пути идти? 
  27. 27. По какому пути идти?  По правильному! 
  28. 28. По какому пути идти?  •  Вариант оптимизированного сайта  • Запоминающийся дизайн  • Не ограничены интерфейсом  • Красиво 
  29. 29. ОПТИМИЗАЦИЯ САЙТА ДЛЯ  IPHONE 
  30. 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. 31. Размер экрана 
  32. 32. 60px!: window.scrollTo(0,1) 
  33. 33. Различать ориентацию  •  JS:    currentWidth = window.innerWidth;                var orient = currentWidth == 320 ? "profile" : "landscape";    document.body.setA‰ribute("orient", orient);  •  CSS:  body[orient="profile"] {} body[orient="landscape”] {}
  34. 34. landscape profile
  35. 35. Трафик  •  Уменьшение HTTP‐запросов  •  Меньше картинок  •  Gzip  •  Кеширование (файлы менее 25Кб)  •  Аякс (грузить части сайта)  •  Base64  •  Избегать фреймворков 
  36. 36. Оптимизация изображения  •  Запретить пользователю увеличивать сайт:  •  Одинаковый размер шрифта при поворотах: 
  37. 37. Юзабилити  •  Ссылки – кнопки. Большая кликабельная  область.  •  Рекомендуемый шрифт Helve”ca  •  Легкие странички 
  38. 38. Полезные мелочи  •  Звонок по клику:  <a href="tel:555-1212">Call Me</a> •  По умолчанию в эти поля вводятся числа:     <input name="phone_whatever" <input name="zip" •  Тултипы
  39. 39. Тестировать  •  iPhoney (дизайн)  •  ySlow (производительность)  •  Обычные инструменты веб‐разработки  •  iPhone 
  40. 40. Ссылки  •  Официальная документация:                     h‰p://developer.apple.com/webapps/  •  Хороший «хакерский» ресурс                      h‰p://www.iphonewebdev.com/  •  Фреймворк с интерфейсом под iPhone:    h‰p://code.google.com/p/iui/  •  Статья на alistapart:    h‰p://www.alistapart.com/ar”cles/putyourconten”nmypocket 
  41. 41. СПАСИБО!  Юрий Артюх,  сайт: h‰p://cssing.org.ua  почта: akella.a@gmail.com 

×