Har du åbnet din hjemmeside på en telefon og set noget, der slet ikke ligner det, du har bygget? En hjemmeside, der ser ødelagt ud på mobil, er en af de mest almindelige klager fra ejere af brands, som har lavet deres side på en computer og aldrig har tjekket, hvordan den ser ud på en mindre skærm. Denne artikel handler om, hvad der giver problemet, hvordan du finder ud af, hvilken fejl der rammer din side, og hvad du gør for at rette den.
Mere end halvdelen af al trafik på nettet kommer nu fra mobile enheder. Andelen er steget i flere år og bliver ved med at stige. Hvis en besøgende lander på din side fra en telefon og møder tekst, der er for lille til at læse, billeder, der løber ud over skærmen, eller en menu, der ikke reagerer på et tryk, er der ikke stor chance for, at de bliver. En høj afvisningsprocent på mobil er ofte det første målbare tegn på, at noget er galt, og mange ejere kobler de to ting først sammen, når de tjekker deres analytics.
Det frustrerende er, at fejl i visningen på mobil ikke altid er til at se, når du styrer siden fra en computer. Fejlene viser sig som regel først, når du kigger på en rigtig telefonskærm, og det betyder, at de kan gå ubemærket hen i uger eller måneder, mens besøgende stille forlader siden.
Hvorfor ser en hjemmeside ødelagt ud på mobil?
Der er ikke én enkelt årsag til, at en hjemmeside ser ødelagt ud på mobil. Problemet er som regel et af fem underliggende forhold, og nogle gange er det flere på én gang. Når du ved, hvilken årsag der rammer din side, ved du også, hvilken rettelse der gælder.
Siden er ikke bygget med responsivt design
En responsiv hjemmeside tilpasser sit layout automatisk efter bredden på den skærm, den vises på. På en computer kan indholdet stå i tre kolonner. På en tablet i to. På en telefon i én kolonne, du ruller igennem. Den tilpasning sker med CSS-regler, der hedder media queries, som fortæller browseren, hvordan indholdet skal ordnes om ved forskellige skærmstørrelser.
Hvis en side er bygget uden responsivt design, viser den det samme faste layout, uanset hvor stor skærmen er. En side, der er lavet til en computerskærm på 1.440 pixel i bredden, vil forsøge at vise sig i den bredde på en telefonskærm, der er omkring 390 pixel bred. Resultatet er en skrumpet, udzoomet side, hvor teksten ikke kan læses, og knapperne er for små til at trykke på. Indholdet er der teknisk set, men det kan ikke bruges.
Ældre sider, især dem der er bygget med træk-og-slip-editorer, som ikke tænkte på visning på mobil, har ofte det problem. Sider, der er kodet i hånden uden at tænke mobil først, kan også høre til her.
Billeder har ikke den rigtige størrelse til mobilskærme
Et billede, der er uploadet i 3.000 pixels bredde og vist uden begrænsninger, vil forsøge at vise sig i fuld størrelse, uanset hvor det bliver set. På en computer kan browseren skrumpe det, så det passer. På en mobil uden regler for responsiv størrelse kan billedet skubbe ud over kanten af skærmen og give vandret rulning eller et layout, der falder sammen.
Selv når billeder ikke løber over, påvirker store billeder, der ikke er optimeret, hvorfor hastigheden på din hjemmeside er vigtig på mobil. Et billede, der indlæses langsomt og forhindrer resten af siden i at dukke op, er også en form for fejl, selv om layoutet teknisk set holder. Besøgende på mobilnet er især følsomme over for det.
Elementer med fast bredde løber ud over skærmen
Elementer med fast bredde er beholdere, divs, tabeller eller andre HTML-elementer, der har fået en bestemt bredde i pixel i stilarket i stedet for en procentdel eller en fleksibel enhed. En beholder på 900 pixel i bredden vises korrekt på en computer, men løber ud over kanten af en telefonskærm, så brugeren skal rulle vandret for at se hele indholdet. Vandret rulning på en hjemmeside er næsten altid et tegn på, at et element med fast bredde løber over.
Tabeller er ofte synderen. En pristabel eller en sammenligningstabel, der er bygget i HTML med faste kolonner, kan falde voldsomt sammen på mobil, så teksten stables på en måde, der er umulig at læse. Det samme gælder sidebjælker, indlejrede widgets og ethvert element, der er kodet med en bestemt bredde i pixel, som er større end den plads, telefonskærmen har.
Skrifterne er for små til at læse uden at zoome
Tekst, der læses godt i 14 pixel på en computerskærm, kan blive ulæselig på en telefon, især på skærme med høj tæthed, hvor det fysiske antal pixel er meget højere end den logiske størrelse. Hvis en besøgende skal knibe og zoome for at læse dit indhold, er oplevelsen ødelagt, selv om layoutet teknisk set er intakt.
Den anbefalede mindste skriftstørrelse for brødtekst på mobil er 16 pixel. Alt under det risikerer at være svært at læse på en stor del af enhederne. Mindre tekst fortæller også søgemaskiner, at siden ikke er optimeret til mobil, og det kan påvirke, hvordan siden bliver rangeret og indekseret.
Menuen falder dårligt sammen eller virker ikke med touch
Menuer til computere er ofte bygget som vandrette bjælker med punkter, der dukker op, når musen holdes over dem. Et touchskærm har ikke noget, der hedder at holde musen over. En menu, der afhænger af den slags, virker simpelthen ikke på en telefon. Besøgende trykker på menupunktet, og der sker ingenting, eller de bliver sendt til den forkerte side, fordi den visning, der skulle åbne en undermenu, aldrig bliver aktiveret.
Selv en menu, der teknisk set virker med touch, kan være ødelagt i praksis, hvis felterne, man skal trykke på, er for små eller ligger for tæt. Den almindelige retningslinje for felter til touch på mobil er mindst 44 gange 44 pixel. Mindre felter giver forkerte tryk, utilsigtet navigation og frustrerede besøgende, der synes, det er lettere at gå end at finde det, de kom efter.
Sådan tjekker du, om din hjemmeside er mobilvenlig
Det hurtigste tjek er at åbne din side på en rigtig telefon. Brug både din egen enhed og, hvis du kan, en anden model og et andet mærke. Det, der ser fint ud på én telefon, kan se anderledes ud på en anden på grund af forskelle i skærmens opløsning, browserens motor og versionen af operativsystemet.
Browserens udviklerværktøjer har en indbygget simulering af mobil. I de fleste browsere på computer åbner du udviklerpanelet med F12. Et ikon for enhedslinjen lader dig simulere forskellige skærmstørrelser og typer af enheder. Det er nyttigt til hurtige tjek, men det er ikke en fuld erstatning for at teste på rigtigt udstyr, fordi simulerede miljøer ikke gengiver rigtig touch, visning af skrift eller netværksforhold.
Googles test af mobilvenlighed, som du finder i Google Search Console, vurderer dine sider og markerer bestemte problemer med brugervenlighed på mobil. Den finder problemer som tekst, der er for lille til at læse, elementer, man kan klikke på, der ligger for tæt, og indhold, der ikke kan være i visningsfeltet. Rapporten viser detaljer for hver side, så du kan se, hvilke sider der fejler, og hvilke der består.
Når du tjekker data i din analytics, får du et lag af adfærd oven på det tekniske billede. Hvis din afvisningsprocent på mobil er væsentligt højere end på computer, peger den forskel ofte på et problem med visning eller brugervenlighed på telefoner. Artiklen om høj afvisningsprocent på mobil forklarer, hvordan du læser de signaler, og hvad der får besøgende til at forlade siden med det samme på mindre skærme.
Sådan retter du en hjemmeside, der ser ødelagt ud på mobil
Den rigtige rettelse afhænger af, hvilken årsag der giver problemet. Hver af de fem årsager ovenfor har en tilsvarende løsning.
Skift til et responsivt layout
Hvis siden slet ikke er responsiv, er løsningen enten at bygge den om på et responsivt framework eller at skifte til en platform, der som standard laver responsiv HTML. Det er muligt at tilføje responsiv opførsel til en side, der ikke er responsiv, bagefter, men det er ofte mere arbejde end at bygge forfra med et responsivt udgangspunkt. Hvis siden ligger på en moderne platform, der understøtter responsive temaer eller skabeloner, er det som regel hurtigst at skifte til en responsiv skabelon.
Tilpas og begræns billeder
Billeder bør uploades i den størrelse, de skal vises i, ikke i den oprindelige opløsning fra eksporten. For de fleste billeder på hjemmesider er en maksimal bredde på 1.200 pixel nok til skærme med høj tæthed og holder samtidig filerne på en fornuftig størrelse. CSS-regler, der sætter max-width: 100% på billeder, sikrer, at de aldrig løber ud over deres beholder, uanset skærmens bredde. Den ene regel løser de fleste problemer med billeder, der løber over, uden at du skal ændre størrelse på hvert billede for sig.
Skift faste bredder ud med fleksible enheder
Faste bredder i pixel på beholdere, tabeller og andre elementer i layoutet bør erstattes med bredder i procent eller fleksible CSS-enheder som em, rem eller vw. En beholder med width: 90% i stedet for width: 900px skalerer rigtigt på alle skærmstørrelser. For tabeller kan du tilføje en CSS-regel, der gør tabeller vandret rullebare inde i deres beholder, så de ikke ødelægger hele layoutet på smalle skærme.
Gør skrifterne større på mobil
Brødtekst på mobil bør være mindst 16 pixel. Hvis stilarket til computer bruger en mindre størrelse, kan en media query for bredden på mobilskærme overskrive den. Du bør også gennemgå størrelsen på overskrifter, for mange overskrifter, der ser fornuftige ud på en computer, bliver alt for store på en telefon og skubber andet indhold ned under skærmen, før den besøgende har nået at læse noget.
Erstat menuer, der bruger hover, med en mobilmenu
Den almindelige løsning til navigation på mobil er en menu, der kan foldes sammen, ofte kaldet en burgermenu, og som åbnes med et tryk i stedet for at holde musen over. De fleste responsive frameworks og hjemmesidebyggere har det mønster med som standard. Hvis sidens nuværende menu ikke har en tilsvarende til mobil, kræver det enten, at du ændrer stilarket og JavaScript, eller at du skifter til et tema, der har navigation til mobil indbygget. Du bør også gennemgå størrelsen på felterne, man skal trykke på, så alle menupunkter lever op til retningslinjen på mindst 44 pixel.
Hvis din side har ødelagte sider ud over fejl i visningen, bliver det ofte lettere at finde rundt til og teste hver side under gennemgangen, hvis du retter det visuelle layout først.
Sådan håndterer WEMASY mobil
WEMASY's hjemmesidebygger laver responsiv HTML på hver side uden at kræve opsætning. Layouts ordner sig automatisk om på mobile skærmstørrelser, billeder bliver holdt inden for deres beholdere, og menuen skifter til en touchvenlig menu på telefoner og tablets. Skriftstørrelser, felter til tryk og afstande er alle sat i platformens designsystem, så de lever op til standarderne for brugervenlighed på mobil, og brands, der starter på WEMASY, begynder med en side, der er klar til mobil, i stedet for at skulle rette den bagefter.
Se, hvad der er med, hos WEMASY hjemmesidebygger, eller se de tilgængelige planer på prissiden.
Ofte stillede spørgsmål
Hvorfor ser min hjemmeside fin ud på computer, men ødelagt på mobil?
Det sker typisk, fordi siden er bygget eller designet først og fremmest til visning på computer uden responsive CSS-regler, der tilpasser layoutet til mindre skærme. Browseren på computeren har bredde nok til at vise det faste layout, som det er tænkt. En telefonskærm har ikke, så elementer løber over, overlapper eller bliver skaleret ned, til de ikke kan læses. Det hurtigste er at tjekke siden i browserens simulering af mobil eller på en rigtig enhed, så du kan se, hvad besøgende på mobil oplever. Med WEMASY's hjemmesidebygger kan du sætte det op direkte på din hjemmeside.
Påvirker et ødelagt layout på mobil min placering på Google?
Ja. Google bruger mobile-first indexing, og det betyder, at mobilversionen af en side er det, Google først og fremmest vurderer, når siderne rangeres. En side med problemer i visningen på mobil, lille tekst eller indhold, der løber ud over visningsfeltet, får lavere score for brugervenlighed, og det spiller ind på den samlede søgeplacering. At rette fejl på mobil er både en bedre oplevelse for brugerne og en fordel for SEO.
Hvad giver vandret rulning på en hjemmeside på mobil?
Vandret rulning på mobil peger næsten altid på et element med en fast bredde i pixel, der er bredere end telefonens skærm. Almindelige syndere er tabeller, sidebjælker, indlejret indhold, billeder uden begrænsning af bredden og beholdere, der er sat til en bestemt bredde i pixel i stedet for en procentdel. Hvis du finder det element, der løber over, i browserens udviklerværktøjer og erstatter den faste bredde med en procentdel eller tilføjer regler for overløb til dets overordnede beholder, løser det som regel problemet.
Hvordan tester jeg, om min hjemmeside er mobilvenlig?
Åbn siden på en rigtig telefon og rul igennem alle de vigtige sider. Åbn den derefter i udviklerværktøjerne i en browser på computer og brug simuleringen af enheder til at se den i flere skærmbredder. Til en struktureret gennemgang kan du køre siderne gennem rapporten om brugervenlighed på mobil i Google Search Console, som markerer bestemte problemer som tekst, der er for lille, elementer, man kan klikke på, der ligger for tæt, og problemer med visningsfeltet. Når du bruger begge metoder sammen, får du det mest komplette billede.
Kan jeg rette en ødelagt mobilside uden at bygge det hele om?
Det afhænger af, hvordan siden oprindeligt er bygget. Hvis siden kører på en platform, der understøtter responsive temaer, er det ofte den hurtigste løsning at skifte til et responsivt tema, og du behøver ikke bygge indholdet op fra bunden. Hvis siden er kodet i hånden med et layout, der ikke er responsivt, kan målrettede CSS-ændringer med media queries løse enkelte problemer uden at bygge det hele om. Men hvis layoutet er bygget på tabeller eller bruger faste bredder overalt, er det som regel mere effektivt at bygge om på et responsivt fundament end at lappe på enkelte problemer.
Hvorfor forlader besøgende min hjemmeside efter få sekunder på mobil?
Når besøgende lander på en side med fejl i visningen, tekst, der ikke kan læses, en ødelagt menu eller billeder, der indlæses langsomt, forlader de den hurtigt, fordi siden ikke lever op til deres helt grundlæggende forventninger til brugervenlighed. Besøgende på mobil har mindre tålmodighed med besvær end besøgende på computer. Hvis layoutet er ødelagt eller langsomt, går de tilbage til søgeresultaterne og klikker på en konkurrents resultat i stedet. Artiklen om besøgende, der forlader din hjemmeside gennemgår alle de grunde, folk går hurtigt, og hvordan du finder ud af, hvilken der rammer din side.