If you've been tasked with designing or developing (or both) a cross-platform web application, you may have noted how difficult it is to add animation and interaction to the result. Designing for interaction is empathy in disguise, and it can can encourage modular, performant code. Let's tackle some of these ideas and apply them to real HTML and JavaScript examples.

1. Designing and Developing
Interactions for the Cross-
Platform Web
Matthew Keas
The Iron Yard
0

2. Welcome to Houston TechFest
Thank you for being a part of the
8th Annual Houston TechFest!
• Please turn off all electronic devices or set them to vibrate.
• If you must take a phone call, please do so in the lobby so as not
to disturb others.
• Thanks to our Diamond Sponsors:
1

3. Who Am I?
• Matthew Keas
• @matthiasak - http://mkeas.org
2
• The Iron Yard
(http://theironyard.com)
• http://codepen.io/matthiasak
• http://github.com/matthiasak
• Space City JS (http://spacecityjs.com)
• Houston.js Meetup
• Speaker, Author (http://mkeas.org)

4. Who Am I?
• I hold two security certifications from “the man”
– One of which is centered on health information
privacy and security
– The second of which is straight from the NSA: INFOSEC
• Paradoxically, I know write entire apps in
JavaScript
3

5. Previous Talks
4
• http://mkeas.org/#talks
• 3D Engines
– http://matthiasak.github.io/3D-svg-model-viewer/
• Caching Alternatives and High Performance Browser
Networking
– https://github.com/matthiasak/Loader
• Building Your Own JavaScript MVC Framework
• Building Fluid and Immersive Interactive Media
Applications
• The Power of Side Projects
• Cross Platform Interactions

6. Assumptions
• You are friends with JavaScript, HTML5, and
CSS3
• You may have a tendency to obsess over
little details -- like me
• You appreciate some scrappy DIY code-ethic
In other words… it’s a labor of love :-)
5

7. Interaction Design (IxD)
“… is about shaping digital things for
people’s use, alternately defined as the
practice of designing interactive digital …
[things] … with a primary focus on
behavior.”
6

8. Interaction Design (IxD)
“… it is synthesis and imagining
things as they might be, more
so than focusing on how things
are.”
In other words, “practicing imaginative
interfaces that aren’t cookie-cutter”
7

9. Interaction Design (IxD)
8
Not always a lot to
offer on this topic
:-(

10. 9

11. Interaction Design and Dev (IxDD)
Interaction Design & Development
10
(x)?

12. Interaction Design and Dev (IxDD)
11

13. Samples
• http://n12v.com/focus-transition/
• http://minimalmonkey.com/
• http://www.rei1440project.com/
• http://www.amplifon.co.uk/sounds-of-street-view/
12
index.html
• https://developer.mozilla.org/ms/demos/tag/tech
:multitouch
• http://www.atelier-serge-thoraval.com/en/
• http://lookfilms.co.uk/

14. Dominating Thoughts
“The price of being a sheep is boredom.
The price of being a wolf is loneliness.
Choose one or the other with great care.”
13
Hugh Macleod

15. Dominating Thoughts
• Q: When is enough design, enough?
• Use just enough code and tech to give a great
experience, then get out of the way
• Tools, libraries, and frameworks are great, but
using too many can overwhelm; instead use a few,
use them effectively, and use them to their
greatest flexibility
• Nothing I build will ever be done, because I am
never done improving myself
14

16. Designing + Developing Interactions
Cross-platform web apps
+ Custom UI controls
Notoriously Difficult, Unstable
15

17. Designing + Developing Interactions
16

18. It all starts somewhere…
So I’ve got this really awesome design idea…
17

19. And your dev team is all…
18
How do I even
start making
that!?!?

20. Increasingly Common Scenario
Edgy, fluid, unconventional designs and new
platforms (read: internet of things) continue to
shake up how the web is presented, how we
develop it, and how users interact with it.
19

21. Primary Topics of IxDD
20
1. Handling user input
– cross-browser/platform interaction code
(touchscreens, touch events, mouse events, pointer
events)
2. Non-standard UIs
– designing and developing non-standard UI, such as a
circular menu (like a rotary phone)
3. Putting it all together
– "try this, not that" – IxDD edition

22. Handling user input
21

23. Types of Events/Handlers
• Native (input tag, form, submit, textarea, etc)
• CSS touch action, pointer events
– https://www.youtube.com/watch?v=AjUpiwvIa5A
– http://caniuse.com/#feat=css-touch-action
– http://caniuse.com/#feat=pointer-events
– http://blogs.telerik.com/appbuilder/posts/13-11-
21/what-exactly-is.....-the-300ms-click-delay
• “Typical” mouse and touch events
• Keyboard events
22

24. 23
Part of the art of making
change happen is seeing
which cultural tropes are
past their prime and
having the guts to invent
new ones.
~ Seth Godin on the
clichés of visual
communication

25. “Natural language form”
http://tympanus.net/Tutorials/N
aturalLanguageForm/
increased conversions for
http://vast.com 25-40%
http://www.jroehm.com/2014/01/ui-pattern-natural-language-
24
form/

26. Slightly less contrived “Natural
language form”
http://www.codepunker.com/res
ources/natural-language-form/
25

27. Plan, Plan, Plan
For really big ideas/projects, it is
much cheaper to do it correctly the
first time than to redo it later on. The
sooner a problem is identified and
fixed, the cheaper it is to do so.
In other words… prototype!
26

28. Unconventional Events/Handlers
• Accelerometer and Gyroscope
– http://sense-js.jit.su/
– http://sense-js.jit.su/orientation
– http://matthiasak.github.io/starfield-test-3/
• Webcam / Face Detection / Movement with
getUserMedia()
– http://neave.github.io/face-detection/
27
• Google Glass JS API
– https://developers.google.com/api-client-library/
javascript/start/start-js
• LEAP Motion
– https://developer.leapmotion.com/leapjs/welcome
• PhoneGap
– http://phonegap.com/about/feature/

29. Experiments and Tidbits
28
• SVG Jello
– http://codepen.io/matthiasak/full/qIfcj
• More starfields
– http://codepen.io/matthiasak/full/tsjlh
– http://spacecityjs.com/
• Fastclick (300ms delay)
– https://github.com/ftlabs/fastclick
– touch-action:
– Pointer events: https://github.com/Rich-Harris/Points
• https://play.spotify.com/collection/songs (#context menus
in Spotify)
• on-hover dropdown menu
– http://www.mkeas.org/#/

30. Tips
• http://caniuse.com/
• Debounce scroll handler with rAF
• Apple’s Safari on iOS touch guidelines
– https://developer.apple.com/library/safari/documenta
tion/AppleApplications/Reference/SafariWebContent/
HandlingEvents/HandlingEvents.html
• Minimize input handling code (avoid handlers if
possible, costly on scroll and touch)
• It’s about what you animate, when you animate,
and how much you animate
29

31. Tips
• Bind late (don't bind to hidden elements)
• Bind low (in the DOM)
– avoid delegating to window or document too much,
browsers will always execute the handler
• Unbind ASAP (don't keep handlers around for
dead elements)
• Speed up the handlers you have
• scoped event contexts (trello example)
– like https://github.com/piranha/keymage#scopes
30

32. Tips
• touchstart and mousedown handlers
actually delay the compositor thread until they
are done (JANK)
31
Delays everything:
touchstart listener
mousewheel listener
Only adds some delay:
scroll listener
Compositor
Draw to screen
JS?
nope
Compositor Thread
Main Thread
Execute JS

33. Tips
• the holy grail: “multitouch”
– http://www.html5rocks.com/en/mobile/touch/
– http://hammerjs.github.io/touch-action/
– https://developer.mozilla.org/ms/demos/tag/tech:mul
titouch
– https://developer.cdn.mozilla.net/media/uploads/de
mos/z/l/zlatnaspirala/190bd9b2b6652ea7f2c6371593
73c8cd/mobile-multi-touch-h_
1370008835_demo_package/index.html
32

34. Takeaways
• Custom gestures and interaction is HARD
• Managing events and contexts is even HARDER
• Making it intuitive and habitual is the HARDEST
33

35. Non-standard UIs – Designing and Bringing
them to Life
34

36. Non-standard UIs
• RWD is largely composed of media queries,
responsive media, grids, etc
• core tenets are important, but to build the high-quality
sites that we aspire to create, we need to
keep pressing forward
• http://bradfrostweb.com/blog/post/designing-an-effective-
35
donate-form/

37. Non-standard UIs
• that means accounting for:
36
– feature detection
• Modernizr - http://modernizr.com/
• Polyfills - https://github.com/Modernizr/Modernizr/wiki/HTML5-
Cross-browser-Polyfills
– device and platform-specific APIs (gyroscope? Firefox OS?)
– Performance and Above-the-fold rendering
– conditional, lazy-loading
– Caching and storing assets/resources in Web Storage or
Local Storage
– touch, motion, movement, and other sensory input
– Validation and Feedback
– ”responsive interaction” and “fat-finger” scenarios

38. Never Build Large Apps: The secret to
building large apps is never build
large apps. Break your applications
into small pieces. Then, assemble
those testable, bite-sized pieces into
your big application.
Justin Meyer, author JavaScript MVC
37

39. Quality Matters: When I hear “just
bang out code that works” I think of
all the apps I don't use anymore
because they gradually lost the
ability to iterate.
38
Avdi Grimm

40. I would much rather build project
that really rocks than build five
mediocre ones. No one ever
remembers the “meh”.
39

41. 40

42. Established techniques for UI controls
41
• jQuery UI
– http://jqueryui.com/datepicker/#multiple-calendars
• Kendo and other libraries
– http://demos.telerik.com/kendo-ui/
• “Bootstrappy” tools and frameworks
– http://getbootstrap.com/javascript/
• Angular directives
– http://ngmodules.org/
• Skate / Web Components
– https://github.com/skatejs/skatejs
– document.registerElement() -
http://www.html5rocks.com/en/tutorials/webcomponents/customelements/
– http://customelements.io/
• HTML5 inputs (forms, input types, ranges, sliders, select box, search boxes,
datalist, etc) (see:
https://developers.google.com/web/fundamentals/input/form/choose-the-best-
input-type)
• -webkit-appearance - http://trentwalton.com/2010/07/14/css-webkit-appearance/

43. But don’t overwhelm…
42

44. Extra Tidbits
43
• Validation
– Serverside
– Classic JS validation
– HTML5 validation e.g. ”:required”
• https://developers.google.com/web/fundamentals/input/form/provide-real-time-validation
• AtoZCSS "required” http://www.atozcss.com/the-required-pseudo-class/
• https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
• http://codepen.io/matthiasak/full/gCzol
• automation and intuition
– Always use labels on form inputs, and ensure they're visible when the field is in
focus.
– Use placeholders to provide guidance about what you expect.
– To help the browser auto-complete the form, use established name's for elements
and include the autocomplete attribute.
• today's holy grail: "movie FUIs”
– http://www.noteloop.com/kit/fui/movie/
– http://www.lorcanoshanahan.com/ctmgui
– http://work.gmunk.com/OBLIVION-GFX

45. Start a new project as simple as it can
get and only add things if you really
need them.
44
Stephen Hay
http://bastianallgeier.com/notes/simplicity

46. In other words, it’s about strategy..
45

47. Creativity is within you and all you
need is a fast way to let it out. The
more direct, the better. For a web
developer the editor is the pen and
the browser is a piece of paper.
46
Bastian Allgeier

48. Pulling It All Together
47

49. The Dawn of Microlibs
“This is the Unix philosophy: Write programs that do
one thing and do it well. Write programs to work
together. Write programs to handle text streams,
because that is a universal interface”
48
Doug McIlroy
A Quarter Century of Unix. Addison-Wesley. 1994.

50. The Dawn of Microlibs
http://microjs.com/
49

51. The Dawn of Microlibs
50
Microlibs can help!
• If a problem is not completely
understood, it is probably best to
provide no solution at all.
• If you can get 90 percent of the desired
effect for 10 percent of the work, use
the simpler solution.
• Isolate complexity as much as possible.

52. There is no "one true way", experiment,
experiment, experiment!
51

53. … and set the bar high!
52

54. Agile design and agile development go
hand-in-hand; if design isn't on your
mind when you are coding, you've
already lost. Design won't settle for
being an afterthought.
53

55. “Masters return to this childlike state,
their works displaying degrees of
spontaneity and access to the
unconscious, but at a much higher
level than the child.”
54
Robert Greene
Mastery

56. It’s about fundamentals…
“When you first start to study a field, it
seems like you have to memorize a zillion
things. You don’t.
What you need is to identify the core
principles – generally three to twelve of
them – that govern the field.
The million things you thought you had to
memorize are simply various
combinations of the core principles.”
55
John T. Reed

57. You see? Mustache. Fundamentals!
56

58. #PerfMatters
Making awesome stuff really
requires intimate knowledge of
positioning, design, an insatiable
appetite for speed, and ruthless
attention to detail.
57

59. #PerfMatters
Delay Reaction
0 – 100ms Instant
100 – 300ms Feels sluggish
300 – 1000ms It atleast works
1s+ User forgets we’re here
10s+ I’m gonna’ come back later…
58

60. #PerfMatters
Animate as much as you can with CSS.
Browsers can better optimize simple,
declarative CSS animations and
transitions.
But these obviously only work for
"one-shot" transitions, like toggling UI
element states.
59

61. #PerfMatters
• simple animation patterns and offsets really
make a great impact
– http://aerotwist.com/tutorials/protip-stick-vs-ease/
– http://aerotwist.com/tutorials/protip-offsets-and-opposing-
60
motion/
• Sometimes to achieve buttery smooth UI you
have to do things that don't scale well – but
don’t go crazy!
• keeping graphic detail lo-fi, but animation detail
hi-fi is all the latest rage

62. #PerfMatters
4 things a browser can animate cheaply
(move all your visual effects into these four things.
Transition everything else at your own risk)
1. size -> transform: scale(n)
2. position -> transform: translateX(npx)
3. rotation -> transform: rotate(ndeg)
4. opacity -> opacity: 0...1
61

63. More Experiments
document.addEventListener(“contextmenu”, function(){…})
62

64. More Experiments
63
• Facing North
– incorporating sound and audio feedback
– "fat finger" scenarios
– simple or custom debounce and tweening methods
– “Responsive Interaction”
– maths, plenty of maths
– http://localhost:3000/#/

65. Facing North
64

66. Facing North
65

67. Facing North
66

68. Facing North
• Rendering is really hard to optimize.
– http://codepen.io/matthiasak/pen/ptHbw
– Use transforms only for animation
– “layer promote to the GPU” with translateZ, will-change,
and backface-visibility:hidden
• Audio and Video are hard
• Interactive is just plain hard
67

69. Facing North
But it’s incredibly fun
68

70. More Experiments
• parallax with device gyroscope API
– http://matthiasak.github.io/gravity-box/
69

71. More Experiments
70
• Chat Heads
– http://www.luster.io/demo-chat-heads/
• Responsive store-front UI: http://quiet-springs-
6093.herokuapp.com/
– Responsive inline-table grids
– SVG sprites
– Swipe to show
• http://itchingpixels.com/anatomy-of-a-touch-interaction-swipe-to-
peep/
– “Scroll-spy”
– Snap.svg library for any SVG animations
– Sliders built with JS/CSS3
– Flexible animations

72. KTHXBAI!
71

73. Please Leave Feedback During Q&A
72
If you leave session
feedback and provide
contact information in
the survey, you will be
qualified for a prize
Scan the QR Code to
the right or go to
http://bit.ly/1p13f3n

74. Thanks to all our Sponsors!
73