UI Optimisation For Mobile Web

3,825 views

Published on

Use your existing web dev skills to master the mobile web, without getting bogged down in device diversity

* Web developer to mobile web developer – use the same skills, it’s just one small step
* Use standard markups
* Design for mobile
* Advantages of mobile web over normal web
* Demonstration using the OTA mobile website built on the bemoko platform

We’ll have plenty of demo’s from widgets to websites.

Ian is Tech director at bemoko, a software house that provides an agile web development framework which enables web developers to easily and quickly deliver mobile websites across all devices. Ian’s passion is for all things mobile, web, tech and good UX. He’s spent much of the last decade helping major mobile operators around the globe deliver mobile web portals and, now, settled back in the UK is driving bemoko forward to make mobile web dev easier and faster...

Published in: Technology, Business

UI Optimisation For Mobile Web

  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

×