Mobile indkøbskurve bliver opgivet i 85,65 % af tilfældene, og på desktop er tallet lavere. En stor del af forskellen kan undgås med de rigtige designvalg. Her ser du, hvad der gør en webshop mobilvenlig, og hvordan du kommer dertil side for side.
Hvad er forskellen på mobilvenlig og mobiloptimeret?
Mobilvenlig betyder, at webshoppen ikke går i stykker på en lille skærm. Teksten ombrydes rigtigt, billeder skifter størrelse, og knapper kan trykkes på. Det er minimumskravet. Google betragter det som nødvendigt for at indeksere din shop.
Mobiloptimeret betyder, at webshoppen er bygget til at sælge på mobilen. Layout, rækkefølgen af oplysninger, trykflader, checkout og sidehastighed er sat op efter den måde, folk handler på med en telefon. En webshop kan være mobilvenlig uden at være mobiloptimeret. Det er mange.
Forskellen betyder noget, fordi mobilvenlig får dig med i spillet. Mobiloptimeret skaber omsætning. En shop, der ikke går i stykker på en telefon, men bruger 8 sekunder på at loade og har en checkoutformular lavet til mus og tastatur, er teknisk set mobilvenlig. Den er ikke mobiloptimeret. Hver forbedring ud over "ikke i stykker" er en forbedring af din konverteringsrate.
Derfor ændrer Googles mobile-first indexing alt
Google bruger mobile-first indexing. Det betyder, at Google rangerer din webshop ud fra mobilversionen og ikke desktopversionen. Hvis din mobilshop har mindre indhold, færre interne links eller billeder, der ikke loader, bygger Googles billede af din shop på de mangler.
Det får direkte følger for dine placeringer i søgeresultaterne. En shop, der ser komplet ud på desktop, men er skåret ned på mobil, rangerer efter det, mobilversionen viser. Hvis produktbeskrivelser er afkortet på mobil, indekserer Google den afkortede udgave. Hvis navigationslinks er skjult bag en lukket menu på mobil, crawler Google dem måske ikke lige så godt.
I praksis er mobilydelse ikke kun et spørgsmål om brugeroplevelse. Det er også et SEO-spørgsmål. Når du forbedrer din mobilshop, forbedrer du dine placeringer. Hver mobilforbedring virker to gange.
Core Web Vitals og hvordan de påvirker dine placeringer
Core Web Vitals er et sæt målinger, som Google bruger som rangeringssignaler. Largest Contentful Paint måler, hvor lang tid sidens vigtigste indhold er om at loade. Interaction to Next Paint måler, hvor hurtigt siden reagerer på det, brugeren gør. Cumulative Layout Shift måler, hvor meget layoutet flytter sig uventet, mens siden loader.
Alle tre tæller på mobil, hvor netværk og processorer er langsommere end på en computer. En score, der er fin i en desktopbrowser, kan dumpe på en mellemklassetelefon på 4G. Det er den telefon, en stor del af din trafik bruger.
Dårlige Core Web Vitals skader både placeringer og konverteringer, hver for sig. Hvert ekstra sekund i loadtid på en mobilside sænker konverteringsraten med 4,42 %, viser undersøgelser. En side, der bruger 5 sekunder i stedet for 2, kan allerede have mistet halvdelen af sine mulige konverteringer, før nogen har set dine produkter.
Mobildesign efter sidetype
Hver sidetype i en webshop har sine egne mobilprioriteter. Hvis du behandler alle sider ens, optimerer du ingen af dem godt.
Forside
På mobil skal forsiden fortælle, hvad shoppen sælger, og hvor man skal hen, allerede i første scroll. Forsider på desktop bruger ofte brede hero-sektioner med flere elementer. På mobil fylder den samme hero hele skærmen. Hvis den ikke med det samme viser værdi og inviterer til handling, scroller den besøgende videre eller går.
Hold hovedmenuen let at nå uden for mange tryk. En burgermenu er standard, men der bør kun ligge de kategorier i den, som en førstegangsbesøgende faktisk har brug for. Gemt navigation er usynlig navigation på mobil.
Kategorisider
Kategorisider på mobil skal balancere antallet af produkter med brugervenlighed. Gitre med to kolonner fungerer godt til de fleste produkter. Lister med én kolonne er bedre, når detaljerne i billedet betyder noget. Begge dele er bedre end tre kolonner, som gør produktbillederne for små til at kunne læses på de fleste telefoner.
Filtre og sortering er vigtige på kategorisider og svære på mobil. Et filterpanel, der åbner som et overlay over hele skærmen i stedet for en sidebjælke, gør filtrering brugbar på en lille skærm. Læs den fulde guide om hvad en kategoriside er, og hvordan du designer den, hvis du vil se nærmere på kategorisiders opbygning.
Produktsider
Produktsiden på mobil skal hurtigt svare på tre spørgsmål. Hvad er det? Hvad koster det? Er det nemt at få? Hovedbilledet skal loade med det samme og kunne swipes. Pris, valg af variant og knappen "læg i kurv" skal alle være synlige uden at scrolle.
Placer knappen "læg i kurv" over folden på mobil, eller brug som minimum en fastlåst knap, der følger med, mens brugeren scroller gennem produktbeskrivelsen. En kunde, der skal scrolle op igen for at lægge noget i kurven, får en ekstra chance for at fortryde.
Checkout
I checkout er frafaldet på mobil størst. Jo færre trin og felter, desto bedre. Mulighed for at handle som gæst fjerner kravet om at oprette en konto, som får mange mobilbrugere til at give op. Læs den fulde guide om hvordan du designer en checkoutside, der mindsker frafald for mere om at optimere checkout.
Tommelfingerzoner og ergonomisk design
Folk bruger telefonen med tommelfingrene, og tommelfingrene kan kun nå visse dele af skærmen behageligt. Midten nederst er nemmest at nå. De øverste hjørner er sværest. Det er ikke en detalje. Det er ergonomi, og den afgør direkte, om kunderne bruger de vigtigste elementer i din webshop.
Placer de vigtigste knapper, som "læg i kurv", "gå til checkout" og "brug filter", nederst i midten, hvor tommelfingeren naturligt hviler. Navigationslinjer nederst på skærmen er nemmere at nå end linjer øverst på store telefoner. Linjer øverst er en desktopvane, som passer dårligt til mobilbrug med én hånd.
Små trykflader er et almindeligt problem på mobil. Knapper og links, der er lette at ramme med en musemarkør, bliver svære at ramme præcist med en fingerspids. Google anbefaler trykflader på mindst 48 gange 48 pixel med god afstand til naboerne. Er de for små, giver det forkerte tryk, irritation og afbrudte besøg.
Mobil checkout og optimering af formularer
Formularer er en af de største kilder til besvær i mobil checkout. En formular lavet til tastatur og mus bliver langsom og fuld af fejl, når den udfyldes på en touchskærm, hvor autokorrektur blander sig. Flere konkrete forbedringer gør formularer meget lettere at udfylde på mobil.
Brug de rigtige tastaturtyper
HTML-inputtyper fortæller mobilbrowseren, hvilket tastatur der skal vises. Et e-mailfelt med inputtypen email viser et tastatur, hvor @ er lige ved hånden. Et telefonfelt med inputtypen tel viser et taltastatur. Et felt med standardtypen tekst viser det fulde tastatur til alt, også til telefonnumre og postnumre.
Den forkerte inputtype giver unødigt besvær. Kunden skal selv skifte tastatur eller taste på et layout, der ikke passer. Løsningen er at ændre en enkelt egenskab på hvert felt. Det er en af de forbedringer i mobil checkout, hvor du får mest igen for den mindste indsats.
Brug så få felter som muligt
Hvert felt i en checkoutformular er en bremse på mobil. Gennemgå din checkout og fjern alle felter, som ikke er nødvendige for at gennemføre købet. Felter til fornavn og efternavn kan som regel slås sammen. Titelfelter er sjældent nødvendige. Flere adresselinjer kan ofte erstattes af ét opslag på adressen.
Hvis du har brug for ekstra oplysninger til markedsføring eller analyse, så indsaml dem, når købet er gennemført, og ikke under checkout. En spørgeundersøgelse efter købet giver de samme data uden risiko for frafald.
Understøt autofyld
Moderne mobilbrowsere og adgangskodeprogrammer kan udfylde checkoutfelter automatisk, hvis din formular er bygget rigtigt. Egenskaben autocomplete på hvert felt fortæller browseren, hvilken slags data det er. Et felt med den rigtige autocomplete-værdi bliver udfyldt af browseren, hvis kunden har gemt sine oplysninger. Autofyld kan gøre checkout meget hurtigere på mobil, og det har reel betydning for, om kunden gennemfører købet.
Tilbyd mobile betalingsmetoder
Mobile betalingsmetoder som digitale punge gør, at kunden kan betale med biometrisk godkendelse i stedet for at taste kortoplysninger ind. For en kunde på en telefon er det en stor lettelse ikke at skulle taste et kortnummer på 16 cifre, en udløbsdato og en kontrolkode. Webshops, der tilbyder de metoder ved siden af almindelige kortbetalinger, har højere konvertering på mobil, fordi besværet fjernes på det mest følsomme trin.
Sidehastighed på mobil
Sidehastighed rammer mobilshops hårdere end desktopshops, fordi mobilforbindelser er langsommere, og processorerne er svagere. En side, der loader på 2 sekunder på bredbånd, kan bruge 6 sekunder på mobildata. Undersøgelser viser, at 53 % af de mobile besøgende forventer, at siderne loader på under 3 sekunder. De, der ikke får det, går.
Komprimer billeder
Billeder fylder mest og er den største enkeltårsag til lang loadtid på mobil. Hvert produktbillede, banner og livsstilsfoto bør komprimeres, før det når browseren. Moderne billedformater giver langt mindre filer end ældre formater ved samme visuelle kvalitet.
Lazy loading udsætter indlæsningen af billeder under folden, til kunden scroller hen mod dem. Den synlige del af siden loader med det samme. Alt det nedenunder loader først, når der er brug for det. Teknikken får siden til at føles hurtigere, selv når den samlede sidevægt er den samme.
Brug færre scripts
Scripts fra tredjepart som analysetrackere, chatwidgets, marketingpixels og anmeldelsesværktøjer øger loadtiden på hver side. Hvert script skal hentes, læses og køres. På mobil tager det længere tid end på en computer. Gennemgå de scripts, der kører i din webshop, og fjern dem, der ikke bidrager aktivt til omsætningen eller kundeoplevelsen.
Scripts, du har brug for, kan ofte indlæses asynkront. Det betyder, at de loader efter sidens hovedindhold og ikke før. Så kan siden bruges, før scripts er færdige med at loade, og det forbedrer både Core Web Vitals og kundens oplevelse.
Test på rigtige enheder
Browserens udviklerværktøjer har en mobilsimulator, hvor du kan se din webshop, som om du sad med en telefon. Simulatoren er god til at tjekke layout, men viser ikke præcist, hvordan en rigtig enhed klarer sig på et rigtigt netværk. En mellemklassetelefon på 4G opfører sig anderledes end det, simulatoren viser på en hurtig computer.
Test jævnligt på rigtige enheder. Problemer, du ikke ser i simulatoren, som forsinkelser ved tryk, problemer med skrifttyper og visse layoutfejl, er tydelige med det samme på rigtige enheder. Hvis du ikke har adgang til flere enheder, findes der gratis værktøjer online, som streamer din webshop fra rigtig hardware på rigtige netværk.
Mobil SEO ud over hastighed
Hastighed og Core Web Vitals er det, man oftest taler om i mobil SEO, men flere andre ting påvirker også, hvor godt din webshop rangerer i mobilsøgninger.
Undgå interstitials, der dækker hovedindholdet på mobil. Pop-ups og overlays, der blokerer siden lige efter, den er loadet, straffes af Googles mobilalgoritme. Hvis du bruger en pop-up til at indsamle e-mails eller et cookiebanner, må de ikke skjule hovedindholdet, før den besøgende har fået et glimt af siden.
Sørg for, at alt indhold, der er synligt i din desktopshop, også kan nås på mobil. Hvis indhold er skjult bag en "læs mere"-knap på mobil, indekserer Google måske den lukkede udgave frem for hele teksten. Til produktbeskrivelser og kategoriindhold, der bidrager til dine placeringer, bør hele teksten kunne læses på mobil uden ekstra tryk.
De interne links bør være de samme på desktop og mobil. Hvis din desktopshop har en tydelig sektion med relaterede produkter og links til andre kategorier, bør mobilversionen have de links med. Navigationslinks, som Google bruger til at forstå opbygningen af din shop, bør ikke forsvinde på mobil.
Sådan klarer WEMASY mobil
WEMASY's e-handelssystem laver responsive shopsider, der som standard tilpasser sig alle skærmstørrelser. Produktsider, kategorisider og checkout er designet, så de opfylder Googles krav til mobile-first indexing. Checkout understøtter mobile betalingsmetoder og felter med den rigtige type. Core Web Vitals er indbygget i systemets hosting og levering, så du ikke selv skal optimere manuelt. Se, hvad der er med i hver plan, på prissiden.
Ofte stillede spørgsmål
Hvordan tjekker jeg, om min webshop er mobilvenlig?
Googles Search Console har en rapport om mobilvenlighed, som markerer konkrete problemer på dine sider, fx tekst, der er for lille, elementer at klikke på, der sidder for tæt, eller indhold, der er bredere end skærmen. PageSpeed Insights viser Core Web Vitals-scores for mobil og desktop hver for sig. Begge værktøjer er gratis og giver konkrete resultater, du kan handle på, og ikke bare bestået eller ikke bestået. Med WEMASY's hjemmesidebygger kan du sætte det op direkte i din webshop.
Påvirker mobildesign mine placeringer på Google?
Ja, direkte. Google bruger mobile-first indexing, så din webshop rangeres ud fra mobilversionen. Core Web Vitals, som påvirkes af mobilfaktorer som loadhastighed og stabilt layout, er et bekræftet rangeringssignal. En webshop, der klarer sig godt på mobil, har en fordel i placeringerne over en, der ikke gør, selv om desktopversionerne er ens.
Hvad er det mest almindelige problem i mobil checkout?
Besværlige formularer er det mest almindelige problem. Checkoutformularer lavet til mus og tastatur kræver for stor indsats på en touchskærm. De løsninger, der gør mest, er disse: brug de rigtige inputtyper, så det rigtige tastatur kommer frem, skær antallet af felter ned, slå autofyld til, og tilbyd mobile betalingsmetoder, så kunden ikke skal taste kortoplysninger. Når du løser de fire ting, stiger andelen, der gennemfører checkout på mobil, som regel målbart.
Hvordan påvirker mobilhastighed salget?
Sammenhængen er direkte og veldokumenteret. Undersøgelser viser et fald i konverteringsraten på omkring 4 % for hvert ekstra sekund i loadtid. En webshop, der loader på 1 sekund, konverterer mærkbart bedre end den samme shop, der loader på 4 sekunder. For mobilshops i særdeleshed, hvor netværket svinger, og de besøgende hurtigere opgiver langsomme oplevelser, giver bedre sidehastighed ofte det hurtigste udbytte af alle tekniske investeringer.
Skal jeg bygge en særskilt mobilshop eller bruge responsivt design?
Responsivt design, hvor én webshop tilpasser layoutet efter skærmstørrelsen, er standarden og det, Google anbefaler. Særskilte mobilsider giver ekstra vedligeholdelse, kan give uens indeksering og er sværere at holde ens, når du opdaterer produkter og indhold. Medmindre der er en særlig driftsgrund til at køre en særskilt mobiloplevelse, er responsivt design på én URL det rigtige valg.
Hvordan mindsker jeg opgivne indkøbskurve på mobil?
Opgivne mobilkurve skyldes en blanding af besvær og distraktion. De strategier, der virker bedst, er: en enkel checkout med så få trin og felter som muligt, mulighed for at handle som gæst uden at oprette en konto, mobile betalingsmetoder, der fjerner manuel indtastning af kort, og en checkoutside, der loader hurtigt. Retargeting med e-mail til forladte kurve virker også godt til at hente de besøg tilbage, hvor kunden ikke gennemførte købet i ét besøg.