1) The document discusses the mobile web and opportunities it provides compared to traditional websites. 2) It describes how Bemoko's approach to mobile web development uses techniques like UI inheritance and tweakers to optimize pages for different devices and capabilities. 3) The last few slides demonstrate this by showing an example mobile site and encouraging the reader to try development and testing on their own.

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

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

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

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

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

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

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

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

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

10. +$-/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:$'(@

11. +$-/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(".:(+@

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

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

14. .:(",(-"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

15. .$"-(".:/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#!)

16. 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

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

18. UI inheritance
content
iPhone 320px basic

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

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

21. ... 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

22. ... 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

23. ... 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

24. ... 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

25. mobile web is ...
Web
Apps Sites
Widgets

26. 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

27. personalised schedule
public voting
ota.bemoko.com

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

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

30. 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

31. browser compatibility tests
@
test.bemoko.com

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