1.
(Mu lti-) Touch Me
the HTML5 way
– Reimar Kosack & Robert Zinner
T3 C on 2 0 1 0

2.
Robert Zinner
• Head of Creation
ART-KON-TOR Kommunikation GmbH
• freelance Design-Consultant

3.
Overview

4.
What we want !

5.
Things like this !
Web App

6.
Things like this !

7.
No PlugIn
In any Browser

8.
Challenges for a
Designer

9.
Multitouch vs. Multitouch

10.
Indirect or direct Multitouch

11.
indirect or direct Multitouch
Cursor
Mouseover
Cursor
Tooltips
Mouseover
Complex interaction
Tooltips
Complex interaction

12.
Space

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.
… or small fingers.

15.
Flexible layouts

16.
You have different sizes …

17.
You have different sizes …

18.
… and different orientations.
• fit the layout
or create other sights

19.
Gestures

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

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

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.
Story / Concept

24.
You need a concept ...
• Applications
• Web-only Content:
Web applications, Optimized webpages,
Compatible webpages
•Hybrid applications

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.
Challenges for a Coder

27.
Tweaking performance

28.
Performance
Performance will increase within the near future

29.
Tweaking performance

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.
Know your target
system

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.
Feature Detection
versus Browser Sniffing

34.
Feature Detection
versus Browser Sniffing
http://www.modernizr.com/

35.
http://caniuse.com/

36.
Multi-Screen &
Multi-Context

37.
The explosion of web-
connected devices
- smartphones
- „normal“ mobile devices
- tablets
- internet connected TVs
- set-top boxes
- gaming consoles

38.
The explosion of web-
connected devices
- smartphones
- „normal“ mobile devices
- tablets
- internet connected TVs
- set-top boxes
- gaming consoles

39.
Use a framework

40.
Use a framework

41.
Loading-Orders Matter

42.
Loading-Orders Matter

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.
Setup for TYPO3

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.
„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.
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