html5, the mother of all confusion, finally explained

HtMl5 eXpErTiSe aT yOuR sErViCe  

HtMl5, tHe mOtHeR oF aLl cOnFuSiOn, fInAlLy eXpLaInEd

It aLl sTaRtEd fRoM tHe ApP sToRe lAuNcH

IpHoNe aPpS nOt oNlY rEaChEd bUt eXcEeDeD tHe dEsKtOp iN sOfTwArE sLiCkNeSs

ı 3

2005   2007   2009   2011   2013  

Web  

1G  Smartphone  

iPhone  

PC  

UsEr eXpErIeNcE  

mObIlEs bEcAmE fIrSt cLaSs cItIzEnS oVeRnIgHt

ToDaY, DiGiTaL sErViCeS aRe cOnSuMeD wItH a vErSaTiLe sEt oF dEvIcEs

ThE cOmBiNeD sAlEs oF sMaRtPhOnEs aNd tAbLeTs eXcEeDeD dEsKtOpS iN 2012

Source:  Business  Insider  –  The  Future  Of  Mobile  Development:  HTML5  vs.  NaAve  Apps  (h=p://www.businessinsider.com/html5-­‐vs-­‐naFve-­‐apps-­‐for-­‐mobile-­‐2013-­‐4)  

ThIs iS a hIsToRiCaL sHiFt tO tHe nExT eRa oF cOmPuTiNg

Internet  of  Things,  MulF-­‐Screen  World  

Source:  Allen  Wirfs-­‐Brock,  Mozilla  Research  Fellow:  The  Browser  is  a  TransiAonal  Technology    (h=p://www.wirfs-­‐brock.com/allen/posts/115)  

BuT aLsO tHe wOrLd iS nOw fRaGmEnTeD, bOtH iN dEvIcE cApAbIlItIeS aNd pLaTfOrMs

MaNaGiNg aLl tHe pErMuTaTiOnS hAs bEcOmE a gReAt bUrDeN

HtMl5 pRoMiSeS tO sOlVe tHe dEvIcE aNd pLaTfOrM fRaGmEnTaTiOn

BuT wHaT Is hTmL5?

“HtMl5 iS a mArKuP lAnGuAgE fOr sTrUcTuRiNg aNd pReSeNtInG cOnTeNt fOr tHe WoRlD WiDe WeB aNd a

cOrE tEcHnOlOgY oF tHe InTeRnEt.” -- WiKiPeDiA

hTmL5 sTaNdArDiZeS dEvIcE cApAbIlItIeS aNd pLaTfOrM fEaTuReS

ı 13

Video,  offline  storage,  geo  locaFon…  

EvErY mOdErN pLaTfOrM hAs a bRoWsEr, tHuS ThE wEb tEcHnOlOgIeS aRe sUpPoRtEd eVeRyWhErE

ı 14

sTiLl aDaPtInG yOuR sErViCe tO eVeRy dEvIcE iS a cHaLlEnGe

AdApTiVe dEsIgN iS a fOrM oF aRt

A gOoD eXaMpLe iS tHe rEsPoNsIvE dEsIgN tEcHnIqUe aPpLiEd tO aDdReSs tHe vArYiNg sCrEeN sIzEs

Ok, WhAt aBoUt tHe uSeR eXpErIeNcE?

iN tErMs oF sLiCkNeSs wEbSiTeS hErAlD a tImE wArP bAcK tO tHe pAsT fOr mObIlE uSeRs

ı 19

2005   2007   2009   2011   2013  

Web  

iPhone  

UsEr eXpErIeNcE  Why  does  my  app  have  pages?  

ThE wEb pArAdIgM oF oNe pAgE aT a tImE lImItS tHe Ux

To oPeN tHiS uP wE nEeD tO dRiLl dOwN tO tHe sYsTeM aRcHiTeCtUrE

*click*   *click*  

WeB vS. aPpS  *click*   *tap*   *swipe*  

Every  user  interacFon  leads  to  a  page  load  from  the  server  

The  server  is  contacted  

only  when  the  user  wants  to  interact  with  the  world  

tHe JaVaScRiPt tEcHnOlOgY eNaBlEs uPdAtInG pAgEs oN uSeR aCtIoN

*tap*   *swipe*   *tap*  

BuT As a jAvAsCrIpT-eNrIcHeD sErViCe gRoWs iT bEcOmEs vErY mEsSy tO mAiNtAiN

*tap*   *swipe*   *tap*  Am  I  an  app  or  a  website?  

AnD sO sInGlE-pAgE aPpS wErE iNvEnTeD

*click*   *click*  

WeB vS. aPpS  *click*   *tap*   *swipe*  

I’m  an  independent  app  with  no  page  changes  

fRaMeWoRkS tHaT eNsUrE a mAiNtAiNaBlE sTrUcTuRe fOr tHe sInGlE-pAgE aPpS aRe bOoMiNg

ThE sInGlE-pAgE aPpS cAn bE mAdE tO aDaPt tO aLl dEvIcEs aNd tO wOrK oN aLl pLaTfOrMs

Also  distribuFon  over  all  app  stores  

2005   2007   2009   2011   2013  

Web  

iPhone  

HTML5  

WhEn dOnE rIgHt tHe sInGlE-pAgE aPpS cAn aLsO cHaLlEnGe nAtIvE aPpS iN sLiCkNeSs

ı 27

UsEr eXpErIeNcE  

UFlizing  HW  accelerated  graphics,  

offline  assets,  advanced  gestures  and  high  perf  JS  

engines  

HtMl5 pRoMiSeS tO sOlVe tHe dEvIcE aNd pLaTfOrM fRaGmEnTaTiOn

AdApTiVe hTmL5 sInGlE-pAgE aPpS

HtMl5 eXpErTiSe aT yOuR sErViCe  

PyRy LeHdOnViRtA

YoUrS tRuLy

CEO, SC5 Online Ltd pyry.lehdonvirta@sc5.io

@pyryl @sc5io www.facebook.com/sc5.io

HtMl5 eXpErTiSe aT yOuR sErViCe  

pS. sUcCeSsFuL wEb dIsTrIbUtIoN rEqUiReS sOmE eXtRa eFfOrT tO mEeT tHe wEb eXpEcTaTiOnS

Support  for  links  and  SEO  

Providing  fast  first  load  

Downloading  data  dynamically