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)
9. mobile is more
mobile web ≠ mobile + web
internet TV ≠ internet on TV
“Think outside the screen”
http://www.flickr.com/photos/philipbitnar/3158663791
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
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
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
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/
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
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)" >
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
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)
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
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
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
Editor's Notes
* First some questions to help me
- How many people have created designs for multiple devices for a single web site, e.g. created different photoshop comps for both an iPhone design and feature phones?
- How many people have hands on experience of delivering a single web site optimised for multiple mobile devices, e.g. coding up HTML, CSS, Javascript?
Depending on how these are answered ...
- How many people applied optimisation on the client side, e.g. javascript libraries, media queries
- How many people have applied optimisation on the server side, e.g. different CSS, different
* The why and the how of delivering mobile using web technologies
markup?
* First off I&#x2019;ll look at what I mean by multi-channel web and why mobile is unique
* Then I&#x2019;ll explain the methodology for mobile UI optimisation that we at bemoko follow
* In mobile web since 2000 and always loved it
* up until 2007, large proportion of time deploying mobile web portals for operators around globe
* created bemoko in 2007 with aim of making the delivery of high quality mobile experiences simple and quick
* right ...
* no ... not really
* These statements a little lazy - and I&#x2019;m guilty of having used them all ...
* Why do you want to take your web site mobile?
* It&#x2019;s not either / or - it&#x2019;s not what&#x2019;s hot / what&#x2019;s not
* We don&#x2019;t need mobile? What&#x2019;s the sizzle not the sausage?
* right ...
* no ... not really
* These statements a little lazy - and I&#x2019;m guilty of having used them all ...
* Why do you want to take your web site mobile?
* It&#x2019;s not either / or - it&#x2019;s not what&#x2019;s hot / what&#x2019;s not
* We don&#x2019;t need mobile? What&#x2019;s the sizzle not the sausage?
* right ...
* no ... not really
* These statements a little lazy - and I&#x2019;m guilty of having used them all ...
* Why do you want to take your web site mobile?
* It&#x2019;s not either / or - it&#x2019;s not what&#x2019;s hot / what&#x2019;s not
* We don&#x2019;t need mobile? What&#x2019;s the sizzle not the sausage?
* it&#x2019;s not simply about taking your web site mobile, we can enhance the whole cross-channel user experience with mobile. mobile is the catalyst, the connector, the central pivot
* mobile web and native apps can both provide excellent user experiences - how can both approaches be used to bring the best of both worlds to both users and and service providers
* we quickly learnt that web provided unique opportunities over print, and similarly we&#x2019;re learning that mobile can build on from the wired experience.
* the true value in internet TV will not be being able to simply access web content on a different screen, it&#x2019;ll be about encouraging genuine interactions from the TV media - social, sharing, calls to actions
* Consider both the web and in-store user experience -> e.g. buying a pair of trainers
* Now think how mobile can play a part
* Perhaps more value from enhancing in-store experience than simply enabling PC web experience on mobile.
* Consider both the web and in-store user experience -> e.g. buying a pair of trainers
* Now think how mobile can play a part
* Perhaps more value from enhancing in-store experience than simply enabling PC web experience on mobile.
* Consider both the web and in-store user experience -> e.g. buying a pair of trainers
* Now think how mobile can play a part
* Perhaps more value from enhancing in-store experience than simply enabling PC web experience on mobile.
* live big screen voting
* user can change their votes (and see effect immediately)
* we ran live voting at OTA to vote on best app from overnight dev session
* what is multi-channel?
* a user is free to choose which channel to connect over
* services that respond well on the chosen channel will encourage interaction
* what is multi-channel?
* a user is free to choose which channel to connect over
* services that respond well on the chosen channel will encourage interaction
* what is multi-channel?
* a user is free to choose which channel to connect over
* services that respond well on the chosen channel will encourage interaction
* what is multi-channel?
* a user is free to choose which channel to connect over
* services that respond well on the chosen channel will encourage interaction
* what is multi-channel?
* a user is free to choose which channel to connect over
* services that respond well on the chosen channel will encourage interaction
* what is multi-channel?
* a user is free to choose which channel to connect over
* services that respond well on the chosen channel will encourage interaction
* what is multi-channel?
* a user is free to choose which channel to connect over
* services that respond well on the chosen channel will encourage interaction
* what is multi-channel?
* a user is free to choose which channel to connect over
* services that respond well on the chosen channel will encourage interaction
* what is multi-channel?
* a user is free to choose which channel to connect over
* services that respond well on the chosen channel will encourage interaction
* what is multi-channel?
* a user is free to choose which channel to connect over
* services that respond well on the chosen channel will encourage interaction
* what is multi-channel?
* a user is free to choose which channel to connect over
* services that respond well on the chosen channel will encourage interaction
* what is multi-channel?
* a user is free to choose which channel to connect over
* services that respond well on the chosen channel will encourage interaction
* beautiful &#x2799; I want the users attention, I want the user to enjoy the experience, I want the user to share the experience
* effective &#x2799; I want to achieve my service goals, I want the user to be satisfied and I want then engage more
* HTML (HTML5) / CSS (CSS3) compliancy
* Geo location, offline storage ...
* Video format support - h264 / progressive download / HTTP streaming
* HTML (HTML5) / CSS (CSS3) compliancy
* Geo location, offline storage ...
* Video format support - h264 / progressive download / HTTP streaming
* HTML (HTML5) / CSS (CSS3) compliancy
* Geo location, offline storage ...
* Video format support - h264 / progressive download / HTTP streaming
* HTML (HTML5) / CSS (CSS3) compliancy
* Geo location, offline storage ...
* Video format support - h264 / progressive download / HTTP streaming