UI Optimisation For Mobile Web

!"#$%&'()"*&$+",(-".$"+$-/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 ﬁve 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, ﬂexible 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 Proﬁle 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

http://inbarajan.blogspot.com	12
http://www.slideshare.net	11
http://tariqsobh.wordpress.com	5
http://www.felgner.ch	4
http://inbarajan.blogspot.in	1

UI Optimisation For Mobile Web

by Ian Homer on Oct 02, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

5 Embeds 33

Statistics

UI Optimisation For Mobile Web — Presentation Transcript