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


PyRy LeHdOnViRtA

YoUrS tRuLy

CEO, SC5 Online Ltd [email protected]

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


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