UI development for mobile and multi-channel web from bemoko

1. UI Development for Multi-channel Web
a presentation by Ian Homer @bemoko
http://www.flickr.com/photos/sgrazied/230319696

2. agenda
I’ll cover just two things
The Why?
The How?

3. hello
... a quick intro to us at bemoko
@ bemoko we live and
breathe mobile
we provide services and platform to
agencies to allow them to deliver
mobile web apps (and beyond)

4. missing the point
Taking your web site mobile
Mobile web vs native apps
We need mobile

5. missing the point
Taking your web site mobile
Mobile web vs native apps
We need mobile

6. missing the point
Taking your web site mobile
Mobile web vs native apps
We need mobile

7. missing the point
Taking your web site mobile
Mobile web vs native apps
We need mobile

8. hitting the point
Enhance interactions with mobile
Mobile web & native apps
Relevant mobile experience
“Mobilize, Don’t Miniaturize” - Ballard

9. mobile is more
mobile web ≠ mobile + web
internet TV ≠ internet on TV
“Think outside the screen”
http://www.flickr.com/photos/philipbitnar/3158663791

10. mobile user experience in retail
web in-store

11. mobile user experience in retail
mobile
web in-store

12. mobile user experience in retail
mobile
web in-store
Mobile can be closer to an in-store
experience than a web experience

13. l i v e fe e d b a c k
big
scre
votin en
g

14. multi‐channel
Game
PC mobile TV
Console
Signage

15. multi‐channel
Game
PC mobile TV
Console
Signage
iPhone

16. multi‐channel
Game
PC mobile TV
Console
Signage
iPhone
Android

17. multi‐channel
Game
PC mobile TV
Console
Signage
iPad iPhone
Android

18. multi‐channel
Game
PC mobile TV
Console
Signage
iPad iPhone
Android
Blackberry

19. multi‐channel
Game
PC mobile TV
Console
Signage
iPad iPhone
Android
Windows Blackberry

20. multi‐channel
Game
PC mobile TV
Console
Signage
iPad iPhone
Android
Windows Blackberry
Nokia

21. multi‐channel
Game
PC mobile TV
Console
Signage
app
iPad iPhone
store
Android
Windows Blackberry
Nokia

22. multi‐channel
Game
PC mobile TV
Console
Signage
tablet
app
iPad iPhone
store
Android
Windows Blackberry
Nokia

23. multi‐channel
Game
PC mobile TV
Console
Signage
tablet
app
iPad iPhone
store
Android SMS Facebook
Windows Blackberry Twitter
Nokia

24. multi‐channel
PC
tablet
mobile TV
Game
Console
Signage
?
app
iPad iPhone
store
Android SMS Facebook
Windows Blackberry Twitter
Nokia

25. what do I want?
Create beautiful & effective
experiences for users no matter
how they connect

26. my delivery challenges
The devices in people’s hands
change day-by-day
A user jumps from one touch-point
to another
I want to deliver reliable and
consistent experiences
throughout the journey

27. nitty gritty
Screen sizes are different

28. nitty gritty
Screen sizes are different
Screens rotate

29. nitty gritty
Screen sizes are different
Screens rotate
Touch ≠ keypad ≠ mouse

30. nitty gritty
Screen sizes are different
Screens rotate
Touch ≠ keypad ≠ mouse
Some devices have quirks

31. nitty gritty
Screen sizes are different
Screens rotate
Touch ≠ keypad ≠ mouse
Some devices have quirks
... some offer advanced features

32. design tweaks
ntro lled
co tion
deg rada
CSS Overlays
Carousel
Clickable divs (touch
friendly)

33. t o a c h i e v e m y g o a l , I n e e d t o . . .
Manage UI diversity across different
channels efficiently
Maintain 100% control
Keep it simple, easy to create,
manage and evolve

34. ... delivering to such diversity
needn’t be complex

35. ... delivering to such diversity
needn’t be complex (please
)

36. mmm!
... so what can we do about it

37. so, what can I do?
The Why?
The How?

38. STEP 1 : Resolve Context

39. context
Device
Location
Preference
All can influence how you
might want to deliver UI

40. context
Device
Location e.g. “I prefer PC
site on my
Preference phone”
All can influence how you
might want to deliver UI

41. STEP 1 : Resolve Context
STEP 2 : Resolve Intent

42. intent
What does the user what to do?
Define function with multi-
channel awareness, e.g.
“near me” - geo, zip entry, preference
“to do” - big screen, small screen

43. STEP 1 : Resolve Context
STEP 2 : Resolve Intent
STEP 3 : Resolve UI Groups

44. UI groups
640 480 320 240 128

45. UI groups
640 480 320 240 128
landscape

46. UI groups
640 480 320 240 128
landscape
ipad
iphone blackberry
android

47. UI groups
640 480 320 240 128
landscape
ajax
ipad
iphone blackberry
android

48. UI groups
640 480 320 240 128
landscape
ajax
ipad
iphone blackberry
pinch ‘n’
zoom maps
android

49. UI groups
640 480 320 240 128
landscape embedded
in app
ajax
ipad
iphone blackberry
pinch ‘n’
zoom maps
android

50. UI groups
640 480 320 240 128
landscape embedded
in app
ajax
ipad doing
iphone something
pinch ‘n’ blackberry new
campaign
zoom maps
android special

51. iphone
ajax
320
A device sits in many buckets
don’t worry about every combination
target design elements at individual buckets
http://www.flickr.com/photos/28481088@N00/670258156/

52. UI rules
Define UI groups by rules to encapsulate
our UI categorisaRon, e.g.
320 display width >= 320
android OS is ‘Android’
old blackberry vendor is RIM and version < 4.6

53. UI rules
Define UI groups by rules to encapsulate
our UI categorisaRon, e.g.
320 display width >= 320
android OS is ‘Android’
old blackberry vendor is RIM and version < 4.6
(typicall
quirky) y

54. UI target
How much you target UIs is a
design choice.
Driven by:
➙ soluRon requirements
➙ desired user reach
➙ brand direcRves

55. STEP 1 : Resolve Context
STEP 2 : Resolve Intent
STEP 3 : Resolve UI Groups
STEP 4 : Assemble UI

56. web page ingredients
A web page is an assembly of ...
HTML
CSS
JavaScript
media files

57. p a g e f ra g m e n t s
Break site into manageable
chunks ...

58. p a g e f ra g m e n t s
Break site into manageable
chunks ...
(snippets of HTML/CSS/
Javascript)

59. U I fo l d e r s
... and place these web content
fragments in UI folders (i.e. folder
named aYer UI group)

60. UI inheritance and page assembly

61. UI inheritance and page assembly
resource loading ‐
find the best page
component for the
current context

62. UI fallback

63. UI fallback
different devices may
have different fallback
paths, but can share
common elements

64. baseline HTML
Start with semanRcally clean HTML

65. baseline HTML
SemanRc HTML
Sensible class naming, c.f. Microformats

66. baseline HTML
SemanRc HTML
Class Naming with clarity
No HTML hacks, assume compliance

67. baseline HTML
SemanRc HTML
Class Naming with clarity
Assume compliance
... good founda7ons upon which we can
layer enhancements for different devices

68. target web content at UIs
Target baseline HTML
at root UI group
Target tweaks at other UI groups
to deliver cross‐device design
and handle device annoyances

69. target web content at UIs
Target baseline HTML
at root UI group
(& CSS, JS etc)
Target tweaks at other UI groups
to deliver cross‐device design
and handle device annoyances

70. l a y e r i n g o n d i f fe r e n c e s
Special menu for TV
Larger font on iPhone
New HTML5 features
Client side logic
CSS3 animations
HTML table hacks for old Blackberrries

71. e x t e n d i n g f ra g m e n t s
Often, we want to deliver to one device group in a
slightly different way to another group

72. e x t e n d i n g f ra g m e n t s
Often, we want to deliver to one device group in a
slightly different way to another group
We want design consistency so
differences tend to be small

73. e x t e n d i n g f ra g m e n t s
Example:
Add extra margin for 320px devices
div.section{
320
margin-left:10px;
}
div.section{
color:#222;
240
}

74. e x t e n d i n g f ra g m e n t s
Example:
Extra content for iPad.
<div id="wrapper">
ipad
<div>
Main page content
fallback
</div>
</div>
<div id="promotion">
Utilise extra screen space
</div>

75. e x t e n d i n g f ra g m e n t s
Example:
Convert simple anchor links into
jQuery AJAX refresh
$(function() {
$("a.action").live("click",function(e) { ajax
e.preventDefault();
$(this).parent().load($(this).attr('href'));
});
});
...
....
fallback
<a class="action" href="/favourite?action=add">
<img src="/images/star-off.png"/>
</a>

76. J a v a s c r i p t l i b ra r i e s fo r m o b i l e
(expected late 2010)
from Brian LeRoux
Touch (Phonegap)
- from Ext JS team
- based on

77. media queries
media types - e.g. braille, handheld, projection
media query - e.g. “screen and (min-height: 20em)”
<link>, @import & target (@media) CSS at media
queries
<link href="my.css" media="handheld and (orientation: portrait)" >

78. media queries
media types - e.g. braille, handheld, projection
media query - e.g. “screen and (min-height: 20em)”
<link>, @import & target (@media) CSS at media
queries
A dding content to
optimise mobile?
in practice
<link href="my.css" media="handheld and (orientation: portrait)" >

79. UI assembly summary
Create fragments of web
content in UI folders
Assemble page using the
best fragments based upon
the UI group resoluRon

80. but, to really tame
device diversity
http://www.flickr.com/photos/tambako/494118044/sizes/l/in/photostream/

81. but, to really tame
device diversity
identify patterns
encapsulate
reuse
http://www.flickr.com/photos/tambako/494118044/sizes/l/in/photostream/

82. STEP 1 : Resolve Context
STEP 2 : Resolve Intent
STEP 3 : Resolve UI Groups
STEP 4 : Assembly UI
STEP 5: Paaerns & Reuse

83. patterns
UI Objects
UI Controls
Design patterns

84. UI objects
Define elements of page...
input box
select
menu
map
survey

85. UI objects
Define elements of page...
input box encapsulate
and
select reuse cross
device
menu behaviour
map
survey

86. reuse
d
con trolle on
degr adati
non
ajax
ite
encapsulat e behaviour so s
es
develo per simply includ
ger”
“select dat e” or “select inte
object

87. bundles
A bundle can encapsulate :
UI group rules
UI objects
(including cross-channel rendering)
Code behind
(content access / page flow)

88. bundles
A bundle can encapsulate :
UI group rules
UI objects
(including cross-channel rendering)
Code behind
(content access / page flow)
e .g. in bemoko site
render survey
with ... [@survey.display "my.css"/]

89. s e p a ra t i o n o f c o n c e r n s
Encapsulation and reuse
➙ simplify sites
➙ simplify maintenance
➙ hide complexity

90. s e p a ra t i o n o f c o n c e r n s
Encapsulation and reuse
➙ simplify sites
➙ simplify maintenance
➙ hide complexity
w orry about one
thing at a time

91. b u n d l e s b e m o ko u s e d a y i n d a y o u t
Surveys
Forms Conferences
Maps Flickr
Geolocation Twitter
Wordpress
Image
adaptation Video
optimisation

92. web apps
native apps
hybrid apps

93. web apps
native apps
hybrid apps
harmonise

94. e m b e d d i n g w e b c o n t e n t i n a p p
web
content

95. e m b e d d i n g w e b c o n t e n t i n a p p
na7ve app wrapper
this is simply
web another UI
content group
embed web site
opRmised for app in
site naRve app
wrapper

96. g e n e ra t i n g n a t i v e a p p s f r o m w e b c o n t e n t
web
content
Titanium

97. g e n e ra t i n g n a t i v e a p p s f r o m w e b c o n t e n t
... and yet
another UI
group
web
content
feed HTML,
CSS,
Javascript
into ..
Titanium

98. where are we heading?
More access to device functions from browser
W3C DAP (Device APIs and Policies)
HTML5 common place
More touch points - TV / Signage
Continued innovation from device / OS /
browser providers (standards trailing latest and
greatest)

99. future design challenges ...
supporting more than one screen
from a single device
multi-person, simultaneous use of
touch screens
accessing single service from
multiple touch points

100. future design challenges ...
supporting more than one screen
from a single device
MEX 2010
Agenda multi-person, simultaneous use of
touch screens
accessing single service from
multiple touch points
I access RTM from
both phone and PC
at same time

101. b e m o ko L i v e
bemokoLive implements this methodology
downloadable from http://bemoko.com
enabling agencies to deliver comprehensive
mobile solutions

102. so we’ve covered
The Why?
The How?
...

103. benefits
What are the benefits of this methodology?

104. quality control
Specialise for one UI without risking another UI

105. u s e s t a n d a r d s
Create sites in standard HTML, CSS, Javascript
Use JS libraries of choice
Build on top of (mobile) web best practice you follow

106. r e d u c e d e f fo r t
Only need to configure
the difference between UIs

107. full control
Total device control means
you can deliver to the max capabilities of a device

108. quality of service
Quick to respond to and fix device quirks

109. creative freedom
Design without compromise

110. thanks
more info + download
@ http://bemoko.com
http://twitter.com/ianhomer | ian.homer@bemoko.com

111. thanks
thanks for your
time
more info + download
@ http://bemoko.com
http://twitter.com/ianhomer | ian.homer@bemoko.com