WriteaTouch-friendlyHTML5App HongboMin,IntelJunminZhu,IntelYongshengZhu,Intel Agenda •Background•Touchvs.Mouse•PartI:UILayout•PartII:EventHandling•TouchinHTML5Framework•Q/A
2 Background •TouchingExperience –FirstintroducedbyAppleiniOS2.0 –Widelysupportedonmobileplatformstoday –Supportedbybothnativeappandwebapp
3 Background •TouchEventAPI(W3CSpec) –Definelow-leveltoucheventsforwebapp–4toucheventsinVersion1(CR) •touchstart,touchend,touchmove,touchcancel –2moretoucheventsinVersion2(RawFile) •touchenter,touchleave •GestureEventAPI(Apple) –gesturestart,gestureend,gesturechange
4 Background •TouchEventHandling –FollowDOMLevel2eventhandlingstyle–AddtoucheventlisteneronaDOMelement varelem=document.getElementById(“canvas”);elem.addEventListener(“touchmove”,function(event){ //handletouchmoveevent},false);
5 Touchvs.Mouse •Touch-basedinteractionmode –Noprecise,fixedtouchpositiononthescreen–Requirelargespaceforselectableelement–Supportmultipletouchpositions–Supportgesturesliketap,pinch,swipe–Nodefaultfocusedelement–Nohovereventforelement(version1)
6 TouchFriendlyApp UserFriendly TouchFriendly = ReasonableUILayout + FastUIResponsiveness
7 PartI:UILayout •Makesuretheclickableareaislargeenough –Makeiteasierfortheusertoselectanitem–Forexample,theoptimalsizeofabuttonoralistitemis ~9x9mm2onsmalltouchscreen–OSvendorshavedesignguidelinesfortouchtargetsize
8 PartI:UILayout •Limitscrollingtoonedirection,verticalpreferred –Keepcontentinonesinglecolumn–Verticalscrollingispreferredona smallscreen
9 vertical knucklehorizontal PartI:UILayout •Auto-hidebrowser’saddressbar //Hidesmobilebrowser'saddressbarwhenpageisloaded.window.addEventListener('load',function(e){ setTimeout(function(){window.scrollTo(0,1);},1);},false); 10 PartI:UILayout •Targetingscreensize –ThemediatagdescribestheconditionsforapplyingtheCSSgiveninthehrefattribute –Thefollowingtargetsscreenwidthbetween600pxand800px: 11 PartI:UILayout •Fullscreenmode –PrefertotoggleFullscreenforwebapps,especiallyforHTML5games –W3CfullscreenAPIisstillnotwidelysupportedonmobilebrowser 12 PartI:UILayout •DisableZooming –Avoidtriggeringbrowserdefaultbehaviorforzooming 13 PartII:EventHandling •PreventDefaultBehavior –Avoidtriggeringbrowseritselfbehaviorforthetouchevents–SendmessagepreventDefaulttoeventobject–Forexample,topreventscrollingbybrowser //CallpreventDefaultontouchmoveortouchstartdocument.addEventListener(“touchmove”,function(event){event.preventDefault();},false);//Notethefollowingwillalsopreventmouseeventsfromdocument.addEventListener(“touchstart”,function(event){event.preventDefault();},false); firing 14 PartII:EventHandling •MultiTouchEvents –Anewtouchstart/touchmove/touchendeventistriggeredeachtimeafingerplacesdown/moves/liftsupscreen –Makeuseoftouches,targetTouchesandchangedToucheslists –Canberecognizedasgestureevents TouchEvent 3touchlists:•touches•targetTouches•changedTouches 15 PartII:EventHandling •Handlemulti-touchefficiently –Example:acanvasdrawertohandlemultifingersdrawing canvas.addEventListener('touchmove',function(event){drawCanvas(event.touches);},false); vartouches=[];canvas.addEventListener('touchmove', function(event){touches=event.touches;},false);functiondrawLoop(){ requestAnimationFrame(drawLoop);drawCanvas(touches);}drawLoop();
1.LessCPUoverhead2.Betterperformance 16 PartII:EventHandling •Handleorientationchanges –DifferentUIappearancesforlandscapemodeandportraitmode–iOScantriggeronorientationchangeevent –Tizencantriggerdeviceorientationevent window.addEventListener("deviceorientation",function(event){//processevent.alpha,event.betaandevent.gamma },true); –Androiddoesn’tsupportonorientationchange,pleaseresizeeventinstead 17 TouchinHTML5Framework •TouchEventabstraction –Hidethedifferencesofeventhandlingondifferentplatforms–Unifyevent-handlingmodelfortouchandmouseevents–Noneedtohandlerawtouchormouseevents 18 TouchinHTML5framework •jQueryMobileprovides –Highleveltouchevents •tap,taphold,swipe,swipeleft,swiperight –Virtualmouseeventstoabstractawaymouseandtouchevent •vmouseclick,vmousedown,vmouseup,... –Orientationchangeeventsupport–Nomulti-touchgesturessupport 19 Q/A 20 Reference [1]BuildingaTouch-FriendlyHTML5Site,ErikKlimczak[2]TheTouchEvents,Peter-PaulKoch[3]MultiTouchDevelopment,BorisSmus[4]TouchEvents,MozillaDeveloperNetwork[5]TargetSizeStudyforSmallTouchscreenDevices,PekkaParhi,etc[6]TouchTargetSize,LukeWroblewski[7]MobileWebBestPractices1.0,W3Cmendation[8]MobileWebApplicationBestPractices,W3Cmendation[9]SafariWebContentGuide-HandleEvent,iOSDeveloperLibrary[10]UsingGestureLibrary,[11]TouchandGestureoniPhone,AndroidandMore,ColinSnover[12]jQueryMobile-Events, 21