How to Be a Mobile Developer - Giovanni Puntil

7/23/2019 How to Be a Mobile Developer - Giovanni Puntil

1/21

How to be a mobile web

developer

Giovanni Puntilmobile web developer @asos


2/21

Who Am I?

A web developer Focused on mobile web frst

25 Freelancer !sablenet Asos Italian


3/21

What e"actl# is a mobile webdeveloper?

A mobile websites addicted

$omeone who cares about Web%it asmuch as he cares about I&compatibilit#

$omeone who spend a lot o' timedoin( tests on a wide ran(e o'devices


4/21

First approach to mobile

Write some html)html* )head* )title*+obile Fashion),title* ),head* )bod#*

)h-*.race #oursel' winter is comin(/),h-* )im( src01model3p(1 alt011 st#le01width4 -61,* ),bod#*),html*

7pen chrome

7pen chrome inspector &nable mobile emulation 8oad #our pa(e


5/21


6/21

9on:t 'or(et the

viewport/

;;


7/21

What:s missin(?

>eWrite some html)html* )head* )title*+obile Fashion),title* ),head* )bod#* )h-*.race #oursel' winter is comin(/),h-* )im( src01model3p(1 alt011 st#le01width4 -61,* ),bod#*),html*

>e8oad #our pa(e


8/21


9/21

hat:s better/;B=C


10/21

Wh#? +obile screens are smaller than desDtopE tablets or

here are two Dind o' pi"els4 9evice pi"els4 ph#sical on the device screenE o' which thereare a f"ed amount on an# device irtual pi"els4 an abstraction la#er created specifcall# to

be used in $$ ;and 3avascript=

&ssential to desi(n with e"ibilit# ou should allow Joomin( dependin( on the content Kand I&?


11/21

7n I& the viewport properties are defnedwithin $$ usin( the @viewport rule

&( @viewportL Joom4 -N width4 devicewidthN O

!h #eah don:t 'or(et the pref" @msviewport

he metata( is 'ar more ele(ant


12/21

+edia ueries he# allows #ou to tar(et $$ rules based on Q 'or

instance Q screen siJeE deviceorientation ordispla# densit# ;cssmediaueriescom=

here are three cate(ories o' media ueries4- media t#pe ueries4 what Dind o' device is this?2 viewportrelated media ueries

R 'eaturerelated media ueries.ou can use as man# ueries as #ou liDe comma

separated


13/21

+edia t#pes

7ri(inall# intended to distin(uishdiSerent t#pe o' devices

he onl# worDin( media t#pes are allEscreenE speech and print

&( @media all L css rules O @media screen L css rules O


14/21

iewport related +ost used media uer# is width

Width and hei(ht media ueries (ive the width and hei(ht o' thecurrent la#out viewport

7rientation specifes whether the displa# is in landscape mode orportrait mode

ma"widthE minwidth speci'# the minimum or ma"imum width o' thedispla# area

&( @media screen and ;ma"width4 Rp"= L bod# L bacD(roundcolor4 blueN O O


15/21

>esolution he resolution media ueries are useless 'or

determinin( an#thin( about ph#sical siJe o' thedevice

he# can be used to determine hi(h screenresolution ;>etina liDe=

Web%it based browsers need QwebDitdevicepi"elratio while all other browsers need resolution

QwebDitdevicepi"elratio doesn:t e"pect a unitN

it:s 3ust an inte(er he best use o' resolution is with 9PI ;dot per inchE

TUp" in css= as it:s supported b# all browsers


16/21

he most used resolution mediauer# in this case is4

@media all and ;;webDitmindevicepi"elratio4-5=E;minresolution4 -VVdpi== L

,, st#lesO

Accordin( to PeterPaul %och in his booD he mobile webhandbooDX


17/21

ouch events

With the frst iPhone bacD in 2YApple introduced 3avascript touchevents

here are three main touch events4touchstartE touchmoveE touchend

his events are widel# supported


18/21

ouch events frin( order

As soon as the user touches the devicescreen the 'ollowin( events are fred4

- touchstart2 touchmove

R touchendV clicD


19/21

our personal device lab

est on widel# used devices Anal#se #our audience

9on:t 'ocus on #our 'avourite device &mulate throttlin( $ame device diSerent browser

diSerent results ; $a'ari UZE Android$tocD browser and hrome=


20/21

Further readin(

Goo(le web 'undamentalshttps4,,developers(oo(lecom,web,'undamentals,

$mashin( +a(aJine booD he +obile WebHandbooDX b# PeterPaul %noch

+oJilla 9eveloper [etworDhttps4,,developermoJillaor(


21/21

on(ratulations #ou arenow a mobile web

developer/

;\]B_=\

Documents

How to Be a Mobile Developer - Giovanni Puntil