1. Tapping into Mobile UI
with HTML5
Luke Melia + Yael Sahar

2. Mobile UX
principles

3. Direct manipulation

4. Ergonomics:
Operated with a single hand.
Finger tip size.

5. Immediate feedback

6. Be consistent
with platform conventions

7. “I should always know
where I am”

8. “Show me what I want
to seewhen I need it”

9. “Don’t make me type”

10. The HTML5
tradeoff

11. You get a single code base
in exchange for implementing
all UI elements yourself

12. Mobile UI
patterns

13. Buttons
[ used for actions ]

14. Designer says:
Touch target size: 44px on iOS, 48px on Android
iOS
44px 30px
Android
----------------------------------
UI principles:
• Ergonomics

15. Designer says:
Position on screen
iOS Android
------------------------------------
UI principles:
• Be consistent with
platform conventions
• Immediate feedback

16. Designer says:
Visual appearance (frames on iOSvs. no frame on
Android, use system fonts)
iOS Android
------------------------------------
UI principles:
• Be consistent with
platform conventions
• Ergonomics
• Immediate feedback

17. Designer says:
Back / Cancel actions on iOSuse a button vs. the
hardware Back button on Android.
iOS Android
------------------------------------
UI principles:
• Be consistent with
platform conventions
• I should always know
where I am
• Immediate feedback

18. Designer tip: how to create an iOS looking button
Challenge: have a single button image background
across all app themes
Button background image:
• Button height: 60px (30px actual) -> image is double size
for high retina display
• Shape: rounded rectangle, 12px round corner (6px
actual)
• Drop shadow: white @45% opacity; Angle: 90; Blend
mode: normal; Distance: 2; Spread: 0; Size: 0
• Inner shadow: black @65% opacity; Angle: 90; Blend
mode: Normal; Distance: 3; Choke: 0; Size: 1
• Stroke: 1 px, black @65% opacity
• Gradient overlay: 30% opacity white to full transparency;
linear gradient; Angle: 90
Button font:
• Helvetica bold white, 11pt.
• Drop shadow: black @65% opacity; angle -90; distance 1;
spread 0; size 1

19. Developer says_
The #1 reason that many
mobile web apps feel
slow:

20. Developer says_
Instead,
respond immediately!

21. Developer says_
“What aboutdeveloping on my laptop???”
Implement a mouse-friendly path...
...or emulate!

22. Developer says_
Touch targets
Handle them case-by-case
with CSS

23. Developer says_
Cross-platform visual
conventions
Help yourself with some Javascript, and handle visual
differences in CSS.

24. Alternatives
Direct manipulation of content is usually better
Camera Flipboard Clear
Zoom In / Out with Pinch & Flip Pages with a swipe No Buttons. All actions are
spread gestures gesture done with gestures

25. Tab bars
[ used to navigate through
the sections of your app]

26. Designer says:
Position on screen
iOS Android
---------------------------
UI principles:
• Be consistent
with platform
conventions
• I should always
know where I
am
• Show me what I
need when I
need it

27. Designer says:
Bar height.50px on iOS, 48px on Android
iOS Android
50px
48px
------------------------------
UI principles:
• Ergonomics

28. Designer says:
#of tabs in view: 5on iOS, 3 words on Android
iOS Android
---------------------------------
-
UI principles:
• I should always know
where I am
• Show me what I
need when I need it

29. Designer says:
Do not use the tab
bar for actions

30. Developer says_
Position and size your tab bar for each platform
using CSS

31. Developer says_
@font-face
A custom web font for your icons
can be good, bro.

32. Developer says_
Tab bar icons works like
“push” buttons.
As soon as you tap
them, they highlight and
activate.
Easy, right?

33. Developer says_
Give the browser time to render the highlight.

34. Cross platform solution with CSS
Twitter
App UI implementation
on iOS and Android
Identifying common
elements and
positioning them in
consistency with
platform.

35. Cross platform solution with CSS
Yapp
UI implementation on
iOS and Android.
Identifying common
elements and
positioning them in
consistency with
platform.

36. Alternatives
Main Menu page: Facebook Pinterest:
Creates more drill downs Side menu. Still requires an Tab bar disappears when
I always need to go back in extra tap to go back to scrolling down and appears
order to navigate menu. I know where I was. when scrolling up

37. Drilling down
[ used to navigate to sub sections ]

38. [ Drill downs on iOS and Android]

39. Designer says:
Show user’s path and current location (title bar
and Back button)
iOS Android
----------------------------
UI principles:
• I should always
know where I am
• Immediate
feedback

40. Designer says:
#of drill downs (more than 2-3 feels like too much
drilling especially if you don’t use a tab bar to
navigate)
---------------------------
UI principles:
• I should always
know where I
am
• Show me what I
need when I
need it

41. Designer says:
• Animated feedback
• Information hierarchy
--------------------------------
UI principles:
• Immediate feedback

42. Developer says_
Title bar and body animate
differently
350ms
easeInOutQuint

43. Developer says_
Animation tips
1) Avoid DOM changes or other callbacks firing
during animation
2) Use hardware-accelerated animations

44. Developer says_
Show compositing
borders
defaults write
com.apple.SafariIncludeInternalDebugMenu 1

45. Alternatives
Facebook
Modal
Slide up to
Drill into
content

46. Segmented controls
/ tabs & spinners
[ used to show different vies
of the same content]

47. Designer says:
Use segmented controls to avoid a level of
drill downs
-------------------------------
UI principles:
• I should always know
where I am
• Immediate feedback

48. [ Tab controls or drop down menus on Android ]
Spinner

49. Designer says:
iOS: use on app’s main
sections where back
button is not needed
Highlight current
segment (no title bar)
-------------------------------
UI principles:
• I should always know
where I am
• Immediate feedback

50. Developer says_
Tab bar tips apply.
Use a scrolling library with snap-to for
horizontal scrolling on Android.

51. Interlude
A word about
Skeumorphic UI

60. Scrollbars

61. Designer says:
Scrollbars appear only
when you need them
-----------------------------------
UI principles:
• Show me what I want
to see when I need it

62. Designer says:
Make sure scrollbar is visible on any
background. (ios uses a semi transparent
black scrollbar with a white outline)
-----------------------------------
UI principles:
• Immediate feedback

63. Designer says:
Overshoot animation (ios) vs.
overscrollcolor (android). Overshoot on ios
created a new UI layer for actions and
messages that occur below the Zero line
-----------------------------------
UI principles:
• Show me what I want
to see when I need it
• Discoverability

64. Overshoot:below the ZERO line
Pull to refresh Yapp
Gesture action discovered Promo message
at overshoot

65. Developer says_
Duuuude, really?
Unfortunately, yes.
No usable native scrolling yet.

66. Developer says_
Use a library.
iScroll, Zyngascroller

67. Text Fields

68. Designer says:
• Auto-populate text field and auto-complete
• Use text field Clear button
-------------------------------
UI principles:
• Don’t make me type

69. Developer says_
No browser events for
keyboard hiding/showing.

70. Developer says_
Doesn’t work

71. Developer says_
Virtual keyboard
Resizes Overlays
viewport window

72. Developer says_
Clear field
Position the icon with CSS, clear
the text with Javascript

73. Developer says_
When you need to implement your own
autocomplete (iOS only):

74. Q&A

75. @lukemelia
@yaelsahar
@yapp
http://yapp.us
we are hiring!

76. Resources
Apple Human Interface Guidelines:
https://developer.apple.com/library/ios/#documentation/UserExperience/Conce
ptual/MobileHIG/Introduction/Introduction.html
Android Interface Guidelines:
http://developer.android.com/design/index.html
Luke Wroblewski
Blog: http://www.lukew.com/ff
Book: Mobile First: http://www.lukew.com/resources/mobile_first.asp
Touch Gesture Reference Guide: http://www.lukew.com/ff/entry.asp?1071
Quirksmode
http://caniuse.com/
Coachmarks:
http://pttrns.com/coachmarks