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.


(Multi-) Touch Me – the HTML5 way!

Session at the T3Con10
Reimar Kosack & Robert Zinner

  • Login to see the comments


  1. 1. (Mu lti-) Touch Me the HTML5 way – Reimar Kosack & Robert Zinner T3 C on 2 0 1 0
  2. 2. Robert Zinner • Head of Creation ART-KON-TOR Kommunikation GmbH • freelance Design-Consultant
  3. 3. Overview
  4. 4. What we want !
  5. 5. Things like this ! Web App
  6. 6. Things like this !
  7. 7. No PlugIn In any Browser
  8. 8. Challenges for a Designer
  9. 9. Multitouch vs. Multitouch
  10. 10. Indirect or direct Multitouch
  11. 11. indirect or direct Multitouch Cursor Mouseover Cursor Tooltips Mouseover Complex interaction Tooltips Complex interaction
  12. 12. Space
  13. 13. You need „large“ buttons … Apple-Guidelines for Application icon: Size for iPhone (in pixels): 57 x 57 or 114 x 114 (high resolution) Size for iPad (in pixels): 72 x 72
  14. 14. … or small fingers.
  15. 15. Flexible layouts
  16. 16. You have different sizes …
  17. 17. You have different sizes …
  18. 18. … and different orientations. • fit the layout or create other sights
  19. 19. Gestures
  20. 20. So many posibillitys …
  21. 21. So many posibillitys …
  22. 22. … but use only some of it. Gesture Action Tap To press or select a control or item Drag To scroll or pan. Flick To scroll or pan quickly. Swipe In a table-view row, to reveal the Delete button. Double tap To zoom in and center a block of content or an image. To zoom out (if already zoomed in). Pinch open To zoom in. Pinch close To zoom out. Touch and hold In editable text, to display a magnified view for cursor positioning. (Standard Gestures in the iOS, Source Apple iPhone Human Interface Guidelines)
  23. 23. Story / Concept
  24. 24. You need a concept ... • Applications • Web-only Content: Web applications, Optimized webpages, Compatible webpages •Hybrid applications
  25. 25. … and emotional Interfaces. • Interface should based on the way people think and work, not on the capabilities of the device. • Model your application’s objects and actions on objects and actions in the real world. • Direct manipulation means that people feel they are controlling something tangible, not abstract. • Applications should respond to every user action with some visible change
  26. 26. Challenges for a Coder
  27. 27. Tweaking performance
  28. 28. Performance Performance will increase within the near future
  29. 29. Tweaking performance
  30. 30. Tweaking performance • Hardware accelerated rendering is not always available • Avoid morphing shapes as these have to be rendered on each „frame“ (expensive) • Complex or finely structured shapes are more expensive to render than large simple shapes • Avoid large changes in scale • Avoid default bitmap fill mode • Simplify vector graphics • Avoid filters • Carefully picking bitmap sizes if content will need to be sized down… • …but ideally, the content would always be 'right-sized'
  31. 31. Know your target system
  32. 32. Different event-handlers (E.g. capture touch-events) Safari: FireFox: touchstart for finger MozTouchDown Sent when the first finger touches the surface. Sent when the user beings a screen touch action. gesturestart. Sent when the second finger touches the surface. MozTouchMove touchstart for finger Sent when the user moves his finger on the touch screen. Sent immediately after gesturestart when the second finger touches the surface. MozTouchUp gesturechange for current gesture. Sent when both fingers move while still touching the surface. Sent when the user lifts his finger off the screen. gestureend. Sent when the second finger lifts from the surface. touchend for finger Sent immediately after gestureend when the second finger lifts from the surface.
  33. 33. Feature Detection versus Browser Sniffing
  34. 34. Feature Detection versus Browser Sniffing
  35. 35.
  36. 36. Multi-Screen & Multi-Context
  37. 37. The explosion of web- connected devices - smartphones - „normal“ mobile devices - tablets - internet connected TVs - set-top boxes - gaming consoles
  38. 38. The explosion of web- connected devices - smartphones - „normal“ mobile devices - tablets - internet connected TVs - set-top boxes - gaming consoles
  39. 39. Use a framework
  40. 40. Use a framework
  41. 41. Loading-Orders Matter
  42. 42. Loading-Orders Matter
  43. 43. Loading-Orders Matter • Try to preload as much as you can • If not possible try at least „subjective“ loading with a loader- queue
  44. 44. Setup for TYPO3
  45. 45. Conclusion • The users expects a „snappy“ interface • Expect to spend a lot of extra time on this • Keep it simple and stupid • Try to preload data in a intelligent way • Do tests on the actual device
  46. 46. „If you want to adress touch-enabled devices today and aim at a „small“ application go for HTML5“ „For large, feature-rich (& responsive) apps go for native solutions (or think of crosscompiling)“
  47. 47. Follow me: Follow me: www.x rt_Zinner3 www.t or or r.zinn