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