UI Optimisation For Mobile Web

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    10 Favorites & 1 Group

    UI Optimisation For Mobile Web - Presentation Transcript

    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

    + Ian HomerIan Homer, 1 month ago

    custom

    1239 views, 10 favs, 3 embeds more stats

    Use your existing web dev skills to master the mobi more

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 1239
      • 1229 on SlideShare
      • 10 from embeds
    • Comments 0
    • Favorites 10
    • Downloads 0
    Most viewed embeds
    • 5 views on http://tariqsobh.wordpress.com
    • 3 views on http://www.felgner.ch
    • 2 views on http://inbarajan.blogspot.com

    more

    All embeds
    • 5 views on http://tariqsobh.wordpress.com
    • 3 views on http://www.felgner.ch
    • 2 views on http://inbarajan.blogspot.com

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories

    Groups / Events