Hakker dine animation på mobilen? Det kan fikses!

Bruger du jQuery eller andre aldrende JS libraries til at lave dine animationer med, så er der stor sandsynlighed for at de ikke kører særlig godt på alle smartphones. Det kan i de fleste tilfældes godt fikses, men det kræver lidt kendskab til hvordan de forskellige CSS properties opfører sig når de skal animeres, og så kræves der lidt kendskab til browser debugging.

Jeg har luret lidt i motor rummet på to større hjemmesider, tv2.dk og lego.com. Begge to er nogle jeg kom ind på med min iPhone 5 og til min overraskelse virkede deres hovedmenu ikke særlig godt. TV2’s var dog stor slem og praktisk talt ubrugelig.

Mit første møde med iMovie

For begge hjemmesider har jeg først optaget hvordan siden opfører sig på min iPhone så man kan se hvordan det hakker og bagefter optaget hvordan det kan fikses. Det er første gang jeg har lavet videoer som disse, så bær over med mig, jeg er ingen iMovie haj – endnu.

Overraskende nok så er iMovie faktisk utrolig nem at gå til og man kan hurtigt for noget til at se lidt fancy ud. Men nok om det, se videoerne, forhåbentlig er der lidt læring i dem.

Tv2.dk

Der er virkeligt meget at tage fat i på tv2.dk, reklamerne gør nærmest siden ubrugelig på en mobil, men jeg holder fokus på den hakkende menu her:

Lego.com

Modsat TV2.dk så er der på Lego.com kælet meget mere for frontend delen på siden, meget af det er skarpt, men de formår ikke at ramme ordentligt performance på min iPhone og det kan sagtens skyldes at de ikke har testet på lidt ældre mobiler – Det kan ske for selv den bedste :)
Her er hvad jeg gjorde for at fikse det:

Konklusion

Husk at teste mobilen, også dem der har et par år på bagen :) Sørg for at bruge transitioner der kan afvikles på GPU’en og kan paint operationer ikke undgåes, så sørg for at hold det på et minimum.

Der findes en del gode tutorials af hvordan man performance checker sin hjemmeside i Chrome Developer Tools, check blandt andet Paul Lewis’s side ud, han ved en ting eller to om performance og jank free animation.

Smid en kommentar

Felter markeret med * skal udfyldes og din e-mail-adresse vil ikke blive offentliggjort.