!"#$%&'()"*&$+",(-".$"+$-/0(",(-
!"1&(2('.!./$'"-)"-(+$3$
!""#$%%&&&'()*+,-'+./%#!.".0%01-23*45%67879:;:;

what's in store?
1) the mobile web story
2) ota.bemoko.com deconstruction
3) lots of HTML, CSS, Javascript

$4(&"567"$*"
1($10(",$%08"
90!80)"2%-2./.%.("
.:(/&";<",(-"*$&"
+$-/0(",(-

=67"$*"1($10("!&("!0&(!8)"
!>>(22/'9".:(",(-"$'".:(/&"
1:$'(2
!""#$%%&&&'()*+,-'+./%#!.".0%52)<5.04%;=>7?:;

/
.:!.">:$$2(2",:('"
!'8",:(&(".$">$''(>.
!"#$%&'()&*+,&*-'()

/
.:!.">:$$2(2",:('"
!'8",:(&(".$">$''(>.
!"#$%&'()&*+,&*-'()
#+&./#0*)%

/
.:!.">:$$2(2",:('"
!'8",:(&(".$">$''(>.
!"#$%&'()&*+,&*-'()
#+&./#0*)%
!"%/%0%/&)"%1&2%)&#+3.#/%,

;<",/.:"!"2+!00"2>&(('

+$-/0(":!2"+$&("$11$&.%'/./(2".:!'")$%"+/9:.".:/'3

+$-/0(":!2"+$&("$11$&.%'/./(2".:!'")$%"+/9:.".:/'3
!0,!)2",/.:")$%"!'8"!0,!)2"$'
3'$,2"(?!>.0)",:(&("/."/2
-%/0."/'"8/9/.!0">!+(&!
>!'"10!)"&/>:"+(8/!
/'.(&'(."!>>(22
!'8"$*">$%&2(" .(0(1:$'(@

+$-/0(":!2"+$&("$11$&.%'/./(2".:!'")$%"+/9:.".:/'3
!0,!)2",/.:")$%"!'8"!0,!)2"$'
3'$,2"(?!>.0)",:(&("/."/2
-%/0."/'"8/9/.!0">!+(&!
>!'"10!)"&/>:"+(8/!
/'.(&'(."!>>(22
!'8"$*">$%&2(" .(0(1:$'(@
)$%&",(-2/.(2 +$-/0/2(".:(+@

2.&('9.:".:&$%9:"8/4(&2/.)
!""#$%%&&&'()*+,-'+./%#!.".0%124"2@)44%99>>>A9?A

8(2/9'"
*$&"
+$-/0(A
.&)"!'8"
2B%((C("
!"0!&9("
;<"2/.("
$'.$"!"
2+!00"
2>&(('

.:(",(-"3/00(8"+)"1:$'(
/."!02$"3/00(8"+)"*/&2."/+1&(22/$'2D"%2(&"(?1(&/('>("!'8"+)"1!./('>(
!"#$%&'()$(*#+()#$,-.(/(012&3
)$>&*#&2&(#&2&(!)(1(-$<!%(8,77$%@
*#+3(+$,(:%$*(*#$(/(1>?
)71273
!5(/()6,!%7(#12.'(7#!)(!)(1()7$2&(
-$017$24(8,7(),2&-+(7#&(9#$%&(:%$*)(
*#&2&(!7(!)( ;,)7(<!=&(>&(7#&(0-$)&)7(
)7$2&?( #&2&4
7#!)(*#$-&(91<&(*1)($=&2(ABC(DE'(
)$(>1%+(-!%:)'(&=&%(!5(/(0$,-.(
!7( 2&1.(7#&>'(#$*(>1%+(.$(/(2&1--+(
%&&.(*#&%($,7@1%.@18$,73

.$"-(".:/2",!)E
$97!$%($5(;,>9!%<(7$(7#&(5,--("G()!7&()#$,-.(/(%&&.(7$(.$(>$2&4
!>1<&)(.&-!=&2&.(7#&(0$22&07()!F&(5$2(>+(
)02&&%'()1=!%<(>&(7!>&(1%.(>$%&+4
<2&17'(7#&(91<&(!)($97!>!)&.(7$(71:&(5,--(1.=1%71<&(
$5(7#!)(&H9&%)!=&(9#$%&(/(;,)7(8$,<#7
0$%7&%7(9&2)$%1-!)&.(5$2(>&(*!7#$,7(
1):!%<(>&(7$(-$<!%
&1)+(7$(92&))(8,77$%)( 9&25&07(5$2(,)&($%(1(7$,0#)02&&%
9#$%&(-!:&(7#!)

A Mobile Challenge
The Multiple Dimensions of Capabilities
size
medium large
Capabilities
css
CSS Size
CSS
Blackberry 8200 Blackberry 8800 JavaScript AJAX
css enabled css enabled
As the number of targetted
Media
capabilities increases, the
complexity of UI
management can Vendor iPhone
no css
exponentially increase
without an appropriate
scalable UI development Forms
Blackberry 8200 Blackberry 8800
approach.
default default
Copyright bemoko 2009

site content context UI tweakers
User Interface (UI) ... one of
the five building blocks of
bemoko mobile web
development

UI inheritance
content
iPhone 320px basic

... store page fragments in the UI folders you want to target
content iPhone 320px basic
header header
menu menu
body
UIs
page fragments

... iPhone connects
content iPhone 320px basic
header header
menu menu
body
device
UIs
iPhone
page fragments

... bemoko UI fallback algorithm assembles optimal page
content iPhone 320px basic
header header
menu menu
body
header
menu
body
page
device
UIs
iPhone
page fragments

... optimal fragments assembled a 320px wide smartphone
content iPhone 320px basic
header header
menu menu
body
header header
menu menu
body body
page
device
UIs
iPhone 320px
page fragments

... and tuned for small screen
content iPhone 320px basic
header header
menu menu
body
header header header
menu menu menu
body body body
page
device
UIs
iPhone 320px
120px page fragments

... all mobiles delivered beautiful pages
content iPhone 320px basic
header header
menu menu
body
header header header header
header header
menu menu menu menu
menu menu
body
Easy, flexible and body body body
body body
unconstrained mobile
optimisation with
bemoko.
page
device
UIs
iPhone 320px iPhone 320px 240px
120px page fragments

mobile web is ...
Web
Apps Sites
Widgets

Tweakers
Site Context Content UI
Device Identity User Content
Profile Plugins
Location CMS UI Design
Parent
Site
Rich
e.g.
iPhone app Inherit
High
Basic

personalised schedule
public voting
ota.bemoko.com

OTA 2009 mobile web site
@
ota.bemoko.com
Search youtube for "bemoko" for
video of site on iPhone

... enough slides
Let's do some dev
HTML, CSS & JavaScript

DEV TEST
HTML Simulate
CSS Firefox
Safari
JavaScript
Geolocation Emulate
AJAX iPhone SDK
jQuery Android SDK
jQtouch Blackberry Simulator
Nokia RDA
Widgets
Tweakers Webtest
Site inheritance Real Devices

browser compatibility tests
@
test.bemoko.com

a journey from web to mobile web
a presentation by bemoko
http://www.flickr.com/photos/sgrazied/230319696