I denne artikel skal vi se nærmere på en række praktiske aspekter i forhold til at få din side optimeret til mobil.
Du kan med fordel starte med at læse dette blogindlæg da den giver en indføring i tankegangen bag ”mobile first”-begrebet og en gennemgang af, hvorfor det netop nu er vigtigt.
Lad os komme i gang. Først skal vi se på fire tips, der har med brugervenligheden at gøre, og derefter fire tips vedrørende load-tid.
1) Vælg et responsivt design
I Googles egne guidelines for mobile-first lægger de primært vægt på, at det skal være let for brugeren at læse og fordøje indholdet, uden at brugeren skal zoome ind og ud. Det klares ved at anvende et såkaldt ”responsivt design”.
Som navnet antyder, responderer et sådant site aktivt i forhold til bredden af brugerens skærm. Når sitet vises på en stor skærm (laptop / ekstern skærm), kan der vises flere kolonner med indhold, men når sitet åbnes på en mobil, vil disse elementer pakke sig anderledes, så sitet bliver længere og smallere.
Du kan se eksempler på dette ved at klikke på live-demoerne nederst på Dandomains designs. Sidder du med en større skærm, kan du prøve at mindske sidens skærmbredde ved at tage fat i browser-vinduet og trække det sammen, så det bliver smallere, og hold så øje med, hvordan designet folder sig fint sammen.
2) Gør det let at navigere
Sørg for at lave plads mellem links og klikbare elementer. Står disse elementer for tæt, bliver det svært at ramme med tommelfingeren på mobilskærmen, som er væsentlig større end musepilen.
Vær ikke bange for at bruge ikoner, som virker store på mobilen. Det giver en god brugeroplevelse. Se fx, hvordan nextech.dk har gjort de klikbare elementer store på deres forside ved at lave et sæt ikoner, der ret præcist matcher størrelsen på en tommelfinger.
3) Linjeskift og formatering
Når du opretter nye produkter eller indholdssider, er det altid en god ide at åbne dem på mobilen, og se, hvor let teksten er at læse.
Sørg for at lave rigeligt med linjeskift, og anvend gerne formatering som fx lister, fed skrift osv., så der ikke kommer store lange tekstbidder, som hurtigt fylder hele mobilskærmen med tekst. Se fx, hvordan Telmore gør på denne side, hvor de har over 3000 ord, uden at det bliver for tekst-tungt.
Lav hellere siden længere fremfor at komprimere teksten sammen i store bidder. Det virker bedst for læsevenligheden på mobilen.
4) Vælg mobilvenlige video services
Ønsker du at anvende video på siden, bør du anvende en af de platforme, der fungerer godt på mobilen med god integration og lav loading-tid. Youtube er et godt valg, men vær opmærksom på at fravælge ”suggested videos” på slutskærmen, da Youtube ellers fylder hele mobilskærmen med click-bait felter, når videoen slutter.
Så risikerer du nemlig, at en stor del af dine besøgende hives over i Youtubes univers, når de er færdige med at se videoen på din side – i stedet for at blive på din side.
5) Optimer dine fotos
Når du lægger fotos på din hjemmeside, skal de være gemt i webkvalitet. Dvs. at de skal komprimeret mest muligt, så de lander på max 100 kb, og gerne omkring 30-60 kb. Det lyder ikke af meget, men det er faktisk muligt, uden at det bliver synligt for brugeren.
Rent praktisk gør jeg det med Photoshop Elements, som har en ”save for web”-funktion, og der får jeg langt de fleste fotos ned på omkring 50-100 kb, også selvom de er op til 500 x 1000 pixels. Der findes dog også gratis webservices, som kan klare opgaven.
Store fotos og video-klip er blevet meget populært til web-headers de seneste år, og vælger du et motiv uden alt for mange detaljer, kan du også få et meget stort foto på fx 1500 x 1000 pixels ned i størrelse. Se fx det store foto øverst på morningtrains side. Det loader stadig lynhurtigt, selvom det er meget stort og detaljeret. Ved vigtige sider som forsiden, kategorisider osv. kan det dog ofte være en fordel at sætte en grafiker til at komprimere det hele bedst muligt.
6) Vælg en hurtig hostingløsning
Anvender du en Dandomain løsning, er serverens hastighed ikke noget, du behøver at bekymre dig om, da loadtiden her er hurtig.
Kører du derimod på en anden løsning, bør du tjekke dette. Hvis din hostingudbyder ikke har et hurtigt setup på deres servere, kan det koste dig dyrt hos mobilbrugerne, som er mere utålmodige end nogensinde før, og ikke gider bruge tid på at vente på dit site.
Sørg for både at holde øje med ”time to first byte” (TTFB), som handler om hvor lang tid, der går, før siden starter med at loade, og hvor lang tid det tager, før hele siden er loadet.
Google anbefaler en TTFB tid på max 200 millisekunder.
7) Minimer antal af redirects
Sørg for at sende brugeren direkte til den URL, de skal lande på, når de klikker på dine links. Hvis du har opdateret eller slettet nogle sider gennem tiden, har du forhåbentligt husket at oprette redirects, så folk ikke havner på en 404 side.
Du skal også huske at opdatere dine interne links på shoppen, så de peger direkte til den nye URL. Derved sparer du også loadtid.
8) Minimer eksterne scripts
De fleste har en del eksterne webservices kørende på sitet som fx chat, A/B testværktøjer, mouse-tracking osv. Sørg for at fjerne de scripts, som du ikke længere bruger, for over tid kan det blive til mange ubrugte scripts, som stjæler dyrebar loadtid, hver gang en side skal loades.
Bruger du WordPress, skal du ligeledes sørge for at deaktivere (eller slette) alle plugins, du ikke aktivt bruger.
Og så til sidst: Husk nu at teste løbende på mobilen og ikke kun på den bærbare computer.
En god udfordring kan være at vælge kun at besøge jeres shop via mobiltelefonen i en uge eller to. Så bliver du hurtigt opmærksom på, hvilke ting der kan optimeres.