En besøgende vil åbne menuen og trykker på det, der ligner det rigtige punkt. Så dukker et billede op over knappen, skubber menuen ned og sender fingeren mod et helt andet link. Irriterende? Jep. Det er også et godt billede på, hvorfor fix CLS handler om mere end en teknisk måling: Siden skal stå stille, mens brugeren prøver at gøre noget.
Forestil dig en kunde, der er ved at bestille en vare. Kunden har fundet formularen, udfyldt felterne og er på vej mod knappen. Pludselig indlæses en skrifttype, teksten ændrer bredde, og indholdet rykker sig. Når siden flytter sig lige dér, bliver næste handling usikker. Heldigvis kan du finde årsagen og rette den.
Find årsagen, før du ændrer siden
Hvor flytter siden sig egentlig? Se på den, mens den indlæses, i stedet for kun at vurdere den, når alt er faldet på plads. Hold øje med billeder, annoncer, indlejrede videoer og tekstområder. Det synlige ryk er ofte et godt spor, men årsagen kan være, at siden ikke har reserveret plads til elementet på forhånd.
Prøv at genskabe situationen, hvor forstyrrelsen opstår. På en opskriftsside kan en annonce dukke op mellem ingredienserne, mens læseren er midt i teksten. Selv hvis siden ser stabil ud på en hurtig forbindelse, så test den igen med langsommere indlæsning. Det minder lidt om et løst gulvbræt: Det knirker ikke nødvendigvis, når man står helt stille.
Når du har fundet skiftet, så spørg, hvad der udløser det. Kommer billedets mål først sent? Bliver der først gjort plads til videoen, når den indlæses? Eller ændrer skrifttypen tekstens linjer? Find det led, der faktisk skubber indholdet, i stedet for at lappe på resten af siden. Så får brugeren en mere rolig oplevelse.
Reserver plads til indholdet
Et godt første skridt er at reservere plads til elementer, der først bliver synlige senere. En annonce eller indlejret video bør have et område i sidens layout, før indholdet er klar. Så dukker elementet op på sin egen plads i stedet for at mase teksten væk. Det er ikke sidens mest spændende funktion, men det kan mærkes, når man læser eller prøver at trykke på noget.
Tag opskriften igen. Hvis annoncen mellem ingredienserne har en fast plads, kan læseren fortsætte uden at miste sin linje, når annoncen vises. Det betyder især noget for dem, der følger opskriften på telefonen med mobilen liggende på køkkenbordet og hænderne fulde af mel. Ingen gider lede efter saltet igen.
Billeder fortjener samme omtanke. Angiv deres dimensioner, så browseren ved, hvor meget plads de skal bruge, før filerne er hentet. Så kan teksten placeres rigtigt fra begyndelsen. Jeg synes, de uventede ryk kan få selv en flot side til at virke, som om den har sovet i timen.
Stabilisér tekst og indhold på små skærme
Skrifttyper kan også flytte rundt på tingene. En webskrifttype, der indlæses efter standardskriften, kan ændre bogstavernes bredde og dermed linjeskift, afsnit og placeringen af knapper. På en bestillingsside kan felter og knapper derfor ende et andet sted, netop som kunden prøver at komme videre. Vælg en reservefont, der minder om den ønskede skrifttype i bredden, og undgå unødige ændringer i tekstens form.
Du kan også læse guiden til fix CLS og et stabilt layout, hvis du vil have flere konkrete idéer til at finde årsagen og vælge det rette indgreb. Fejlfinding behøver ikke være mystisk. Følg brugerens vej, og læg mærke til, hvor siden pludselig flytter målstregen.
Tag til sidst en prøvetur på mobilen. Åbn siden med en langsom forbindelse, rul gennem indholdet, og prøv de ting, folk faktisk besøger siden for: Åbn menuen, læs opskriften, eller gå gennem bestillingen. Tjek, at billederne har plads, at annoncer og videoer ikke skubber teksten, og at knapperne bliver stående, når skrifttypen er indlæst.
Hvis et element stadig hopper, så find sporet igen og test i den situation, hvor det drillede. Så bliver fix CLS en praktisk måde at skabe ro omkring brugerens næste klik på. Resultatet er ikke bare en pænere måling, men en side, man bedre kan stole på.
Se mere hos hurtigere-hjemmeside.dk.