0
(Mu lti-) Touch Me
                            the HTML5 way




                – Reimar Kosack & Robert Zinner
T3 C on 2...
Robert Zinner
• Head of Creation
  ART-KON-TOR Kommunikation GmbH
• freelance Design-Consultant
Overview
What we want !
Things like this !




   Web      App
Things like this !
No PlugIn
In any Browser
Challenges for a
   Designer
Multitouch vs. Multitouch
Indirect or direct Multitouch
indirect or direct Multitouch
Cursor

Mouseover
                          Cursor
Tooltips
                      Mouseover
...
Space
You need „large“ buttons …
            Apple-Guidelines for
            Application icon:

            Size for iPhone (in...
… or small fingers.
Flexible layouts
You have different sizes …
You have different sizes …
… and different orientations.

             • fit the layout
              or create other sights
Gestures
So many posibillitys …




   http://gestureworks.com/about/open-source-gesture-library/a
So many posibillitys …




   http://gestureworks.com/about/open-source-gesture-library/a
… but use only some of it.
Gesture          Action
Tap              To press or select a control or item
Drag             ...
Story / Concept
You need a concept ...
• Applications
• Web-only Content:
  Web applications, Optimized webpages,
  Compatible webpages
•H...
… and emotional Interfaces.
• Interface should based on the way people think and
 work, not on the capabilities of the dev...
Challenges for a Coder
Tweaking performance
Performance




Performance will increase within the near future
Tweaking performance
Tweaking performance
 • Hardware accelerated rendering is not always
   available
 • Avoid morphing shapes as these have t...
Know your target
    system
Different event-handlers
                                      (E.g. capture touch-events)

Safari:                       ...
Feature Detection
versus Browser Sniffing
Feature Detection
versus Browser Sniffing




   http://www.modernizr.com/
http://caniuse.com/
Multi-Screen &
Multi-Context
The explosion of web-
 connected devices
- smartphones
- „normal“ mobile devices
- tablets
- internet connected TVs
- set-...
The explosion of web-
 connected devices
- smartphones
- „normal“ mobile devices
- tablets
- internet connected TVs
- set-...
Use a framework
Use a framework
Loading-Orders Matter
Loading-Orders Matter
Loading-Orders Matter

   • Try to preload as much as you can
   • If not possible try at least
     „subjective“ loading ...
Setup for TYPO3
Conclusion
• The users expects a „snappy“ interface
• Expect to spend a lot of extra time on this
• Keep it simple and stu...
„If you want to adress touch-enabled devices today and
      aim at a „small“ application go for HTML5“


  „For large, fe...
Follow me:
Follow me:                 www.x ing.com/profile/Robe
                                                      rt_...
T3con10_html5_kosack_zinner
T3con10_html5_kosack_zinner
T3con10_html5_kosack_zinner
T3con10_html5_kosack_zinner
T3con10_html5_kosack_zinner
T3con10_html5_kosack_zinner
T3con10_html5_kosack_zinner
T3con10_html5_kosack_zinner
T3con10_html5_kosack_zinner
T3con10_html5_kosack_zinner
Upcoming SlideShare
Loading in...5
×

T3con10_html5_kosack_zinner

1,053

Published on

(Multi-) Touch Me – the HTML5 way!

Session at the T3Con10
Reimar Kosack & Robert Zinner

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,053
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
14
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "T3con10_html5_kosack_zinner"

  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 … http://gestureworks.com/about/open-source-gesture-library/a
  21. 21. So many posibillitys … http://gestureworks.com/about/open-source-gesture-library/a
  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 http://www.modernizr.com/
  35. 35. http://caniuse.com/
  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 ing.com/profile/Robe rt_Zinner3 www.t witter.com/reimark or or r.zinn er@brand-royal.de kosack@wwsc.de
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×