Rörelse som går att stänga av

Kort version. Både iPhone och Android har en inställning som heter reducera rörelse. Sajten kan läsa den. Gör den det ska animationerna inte bli långsammare, de ska försvinna helt. Och innehållet måste synas även om det som styr animationerna aldrig laddar, annars döljer sajten sitt eget innehåll för både skärmläsare och Google.

Saker som glider in när man skrollar är fint. Det ger en sida rytm och gör att den känns genomtänkt i stället för utskriven.

För några procent av besökarna är det också obehagligt på riktigt. Yrsel, illamående, huvudvärk. Det gäller särskilt personer med migrän eller vestibulära besvär, och de vet oftast om det.

Därför finns det en inställning i både iPhone och Android som heter ungefär ”reducera rörelse”. Den som behöver den har redan slagit på den, för länge sedan, och för hela telefonen.

Din sajt kan fråga efter den. De flesta gör inte det.

Regeln, och varför den är strängare än den låter

När någon har slagit på reducera rörelse ska sajten inte animera lite mindre. Den ska inte animera alls, för allt som inte är nödvändigt för att förstå innehållet.

Det är en distinktion jag ser missas ofta. ”Vi gör det lite snabbare” är inte att respektera inställningen, det är att ignorera den lite mjukare. Någon som blir yr av rörelse blir yr av snabb rörelse också.

På referensbygget hanteras det på varje ställe där något rör sig. Den rullande listan på startsidan står stilla. Korten som glider in ligger på plats direkt. Inget hoppar, ingenting saknas, sidan är bara stilla.

Den andra halvan, som är ett affärsargument

Det här är den del jag brukar behöva förklara två gånger, för den låter teknisk och är det inte.

En animation styrs av lite kod som körs i besökarens webbläsare. Det vanliga sättet att bygga en ”glid in när du skrollar”-effekt är att göra innehållet osynligt från början och sedan låta koden visa det när man skrollar dit.

Det fungerar utmärkt, ända tills koden inte kör. Och den kör inte alltid. Den kan blockeras, laddas långsamt, eller krocka med något annat.

Och när den inte kör är innehållet fortfarande osynligt. Sidan laddar, ser tom ut, och besökaren skrollar förbi en sektion som inte finns.

Google läser sidor på ungefär samma sätt som en skärmläsare gör. Båda kan missa innehåll som göms av kod som inte hann köra. Det innebär att en animerad sajt byggd på det vanliga sättet kan dölja sitt eget innehåll för både en synskadad besökare och för sökmotorn, samtidigt, av samma orsak.

Så jag bygger tvärtom: innehållet är synligt från början. Koden gömmer det först, och visar det sedan igen med en animation. Går koden inte igång händer ingenting, och allt syns. Sämre animation den gången, men aldrig en tom sida.

Det är samma mängd arbete. Det är bara en annan ordning.

Vad jag inte gör

Jag lägger inte till rörelse för att det ska se modernt ut.

När jag gick igenom femton restaurangsajter innan bygget var det tydligaste fyndet att de bästa knappt animerar alls. Noma kör inget animationsbibliotek över huvud taget. Ekstedt har karuseller och inget mer. Det var en enda av de femton som hade en riktigt genomarbetad scrolleffekt.

Slutsatsen jag drog: rörelse är inte det som gör de här sajterna bra. Innehållet och redigeringen är det. Rörelsen är krydda, och krydda är det enda man kan ha för mycket av utan att ha mer av något.

Testet du kan göra på din egen sajt

Slå på reducera rörelse i telefonens inställningar. På iPhone ligger den under Tillgänglighet och Rörelse. Ladda sedan om din sajt.

Rör sig fortfarande saker har din sajt inte frågat. Det är sällan ett tecken på att den är dåligt byggd i övrigt, men det är ett tecken på att den byggdes efter hur den ser ut och inte efter vem som ska använda den.

Nästa: Där människan fångade maskinen, fem fel som inget test hittade. Vill du att jag kollar hur din sajt beter sig med rörelse avstängt får du gärna höra av dig.

Exemplen kommer från Yèshì, en fiktiv demorestaurang byggd som referensprojekt. De femton restaurangsajterna är riktiga och publika. Riktiga kunduppdrag finns under Arbeten.

Johan Beijer, Hemsideproffset

Demosajterna är medvetet inte indexerade i sökmotorer — de är ett bevis att klicka på, inte en sökdestination.