Sidan hoppar efter sidladdning (ibland)

Det finns få saker* på (seriösa) webbsajter som är så frustrerande som detta:

Så gör dock SweClockers. Den här videon (särskilt de första tio sekunderna) illustrerar det ganska bra:

Jag har bokstavligen klickat på fel länk tusentals gånger pga detta – trots att jag i mer än fem år skyddat mig så mycket som möjligt (kräver möjlighet att installera webbläsartillägg). Det var som allra mest påtagligt när jag surfade mycket på min surfplatta på väg genom skogen med bussen – då kunde det ta en halvminut efter att sidan var laddad och klar att användas innan den hoppade ner – men än idag händer det mig nästan dagligen på mobilen.

Förutom att man riskerar att klicka på fel länk ibland skapar blotta vetskapen om att sidan kan hoppa ner en känsla av oro vid varje sidladdning (för mig då; jag kan inte tala för någon annan): Hjärnan signalerar att jag måste hålla mig på tårna, ständigt vara beredd och anpassa mina klick så att det ska bli så lite fel som möjligt om innehållet hoppar ner just när jag klickar.

Min bedömning är att problematiken är tydligast på telefoner och surfplattor, i mitt fall då jag enkelt kan åtgärda problemet på mina datorer och i det allmänna fallet då det slår hårdare på sådana enheter än på vanliga datorer.

Reklamen högst upp är, skulle jag säga, viktigast att låsa höjden på, då den styr allt innehåll på hela sajten. De andra reklamrutorna trycker ner efterföljande innehåll betydligt mer (då deras initiala höjd är 0), men de påverkar en mindre andel av sajtens innehåll.

Med vänliga hälsningar,
Alling

* Fotnot: ”VI ANVÄNDER COOKIES!!! WE CARE ABOUT YOUR PRIVACY!!! WRUÄÄRGH!!!!!” är väl up there också. Där har ju SweClockers för övrigt en diskret och rimlig banner som inte går att klaga på.

OK, nu har jag funderat och experimenterat lite och kommit fram till några förslag.

Reklamen högst upp

Reklamen högst upp har överlägset störst negativ inverkan på användarupplevelsen i dagsläget, för den trycker ju ner allt innehåll på hela sajten om och när den känner för det.

 .header > .hfix > .banner {
-    min-height: 252px;
+    height: 285px;
     align-items: center;
 }

Ovanstående matchar (i Firefox utan zoom på Windows 10) perfekt de reklambanners som idag är för stora, till exempel Asus' ZenBook-reklam:

Mindre banners, som Månadens gamingdeal, hamnar utan vidare ändringar vertikalt centrerade, vilket verkar se bra ut (men jag har ju inte kunnat bedöma alla banners såklart):

Vill man istället att alla banners ska ha samma vertikala avstånd till flikarna och det övriga innehållet kan även det åstadkommas:

 .header > .hfix > .banner {
-    min-height: 252px;
-    align-items: center;
+    min-height: 285px;
+    align-items: end;
 }

Den för stora Asus-reklamen påverkas inte av någon av dessa ändringar, såvitt jag kan se.

Reklamen mellan innehållsrutorna

De mindre reklamrutorna som ligger utspridda mellan rubriker och dylikt är inte alls lika störande som den högst upp, för det är jämförelsevis sällan de trycker ner något innehåll man hade tänkt interagera med. När de väl gör det gör de det däremot tämligen våldsamt, eftersom deras höjd idag är noll, medan reklamrutorna som ska fylla dem är betydligt högre.

Rutorna i högerspalten kanske är enklast att åtgärda, då reklamen som fyller dem alltid verkar ha samma höjd: 360px. Således:

 .ad.adInsider {
+    height: 360px;
+    overflow: hidden;
     margin-bottom: 8px;
 }

Reklamen mellan rubrikerna verkar kunna variera mellan 360px och 398.33px (egentligen 400px, men deras bredd begränsas till 478px, vilket då ger 398.33px eftersom proportionerna ska bibehållas). Så kanske:

+.adModule .inner {
+    height: 400px;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+}

(Utan overflow: hidden; kan en reklam högaktningsfullt skita i vad dess container har för höjd.)

Med reservation för att jag varken har testat alla banners eller frågat annonsörerna är min bedömning att samtliga föreslagna ändringar ovan presenterar reklamen minst lika bra som idag. Det största kvarstående frågetecknet för min del är större kampanjer som är designade för att "passa ihop" över hela sidan. Spontant tänker jag att om annonsörerna vet vilka dimensioner som gäller (vilket borde vara lättare att kommunicera till dem om dimensionerna är fixerade) kan de designa sina annonser för att passa utan att det borde bli mycket svårare för dem än idag.

Om inte annat så tycker jag att vi får stå på oss och berätta för annonsörerna vad som gäller. Det får vara deras ansvar att bygga reklam som får plats i rutorna avsedda för ändamålet, och gör de inte det borde det inte gå ut över oss användare genom att vi får våra klick flyttade till helt andra länkar än vi egentligen klickade på och/eller att vi återkommande ska känna en mer eller mindre medveten oro över att det ska hända.

Tack för ordet!