Du har hørt om 'mobile first', ikk'? Nu kigger vi nærmere på, hvordan du konkret kan optimere din shop til dette fænomen. Læs med i blogindlægget her.
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.
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.
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.
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.
Ø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.
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.
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.
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.
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.
Med Facebook Business Manager får du langt flere spændende annonceformater, så du kan få indsigt i, hvor guldet ligger begravet i netop din...
Indholdsoptimering er vigtigt, når du arbejder med SEO. Læs med her og få 5 tips til at nå til tops i søgeresultaterne.
Her kan du lære, hvordan du skriver nyhedsbreve, der sælger. Du får serveret 13 konkrete tips, der gør dig en mester i at skrive nyhedsbreve.