Varför optimerar man inte webbsidor för större skärmar?

Tobias Dokken
Skriven av Tobias Dokken, februari 7, 2017

Ingen som på något sätt är aktiv med att göra webbsidor kan väl ha missat vad responsiv design är?
Responsiv design innebär att webbsidans innehåll anpassar sig efter skärmens upplösning.
Det är viktigt att webbsidan ser bra ut på alla enheter, eller åtminstone är läsbar.

Alla minns väl hur det såg ut när det var helt nytt att använda mobilen för att surfa? Det var segt och man tvingades hela tiden zooma in för att kunna se texten och zooma in ännu mer för att lyckas träffa rätt när man naivt försökte klicka på en länk.

Sådana webbsidor stöter man med jämna mellanrum på än idag men de börjar bli sällsynta tack vare responsiv design.

Optimera skärmupplösning

Med åren har vi blivit ganska bra på att anpassa webbsidor så att de passar varje enhet, tyvärr diskriminerar vi större skärmar. Där ser jag att många sajter går miste om ökad konverteringspotential. Särskilt för e-handel tror jag att det finns stor potential. Jag återkommer till det lite längre ner.

Trots att tekniken tillåter oss att relativt enkelt optimera för såväl små som stora skärmupplösningar så gör vi det sällan för större upplösningar.
Optimeringen för mobila enheter har även den länge varit ganska lågprioriterad fram tills nyligen när den mobila användningen gick om datoranvändningen.

 

Vad är standard?

Maxbredden för en webbsidas innehåll brukar ligga kring 960 pixlar trots att många skärmar har upplösning med bredd på 1920 pixlar. Det vill säga hälften av sidan är luft.
960 pixlar kommer från forntida dagar när standardupplösningen låg på 1024×768 pixlar och webbsidor inte anpassade sig dynamiskt efter webbläsarens storlek.
Nästan alla webbsidor går att läsa relativt bra med hög skärmupplösning, även om det inte är optimerat för att passa just den storleken.

Det är just det som jag gissar är största orsaken till att man inte optimerar bättre – att det ändå har hög läsbarhet. Utveckling tar tid och vi utvecklare gör det som är avtalat.

Att optimera varje detalj på en sida blir nästan ett evighetsprojekt. Eftersom sidan ändå ser ok ut för de flesta storlekar så är alla glada och nöjda. Alla förutom gnällspiken Tobias.

 

Lite statistik på skärmupplösningar

Här är en lista på de skärmupplösningar vi använder i Sverige för datorer:

Statistik på skärmupplösningar för datorer

Och här är statistiken när man även inkluderar mobila enheter

Statistik på skärmupplösningar för alla enheter

Vi ser att totalt 19,77 % av alla besök görs med en skärm som har större upplösning än 1600 pixlar i bredd.

Sedan har vi den mystiska stapeln Other på 18,28 % där åtminstone en liten del är för skärmar som är ännu större. Det spelar inte någon större roll eftersom 19,77 % är en så pass stor siffra att man oavsett borde fundera på att optimera för större skärmupplösningar.
Nu ska vi inte lita på statistiken blint. Det är en uppskattning baserad på StatCounters egna mätningar men ger en bra fingertoppskänsla över hur det ser ut.

Varför är det ett problem att inte optimera för stora skärmar?

Egentligen är det inte ett problem så. Responsiv design har ju uppenbarligen flutit på bra ändå i 7 år utan att ha alltför många röster som kräver det.

Jag som bryr mig om konvertering av webbsidor ser problem i att man inte optimerar för alla storlekar.

Som användare av hög skärmupplösning är jag inte så förtjust i artiklar där läsytan är mindre än halva min skärmstorlek. För de sidor som använder sidomenyer och liknande blir läsytan ännu mindre. f

Fontstorleken är också ofta i minsta laget. De sidor som faktiskt optimerat kan jag vara mer produktiv på eftersom jag ser mer direkt utan att behöva skrolla.

Man behöver inte använda hela skärmytan, men att bara använda 50% känns lite extremt.

Hur ska man optimera?

Jag menar inte att jag vill att texten ska löpa över hela skärmen på stora skärmar. Det är inte användarvänligt, eftersom vi då måste vrida på huvudet under läsningens gång.

Textytan är oftast tillräcklig på de flesta webbsidor, förutom när man klämt in massa sidomenyer och liknande som begränsar läsytan ännu mer.
Minimal läsyta. Utnyttjar inte hela skärmupplösningen

Här är ett exempel på där man tryckt ihop allt till en väldigt kompakt sida trots att det finns så mycket utrymme att använda.

Artikelbredden är 455 pixlar (!) bred. Det är inte användarvänligt att läsa på en stor skärm. Man tvingas hoppa ner till ny rad hela tiden och skrolla aktivt. Det är synd eftersom sidan har läsvärt innehåll.

I det här exemplet vore det en bra idé att låta reklam och sidomenyer täcka oanvänd yta istället för att förstöra användarvänligheten.

Till sidans försvar så är det att det är standard och många menar att det är den optimala bredden för läsbarhet. Jag kommer att behandla det mer i en kommande artikel.

Även om man inte har reklam och sidomenyer så kan man använda den lediga ytan till att visa upp mer av vad man gör och övrigt som man tycker är viktigt eller vill visa upp.

Man ska inte bara fylla ytan för att det är möjligt. Man måste ändå vara lite kreativ och ha en tanke bakom hur man fyller och vad man fyller med.

Många inom webbvärlden har länge pratat om att den viktigaste informationen ska visas synligt vid första anblicken, above the fold.

Ju längre ner på sidan som informationen visas desto mindre blir chansen att användaren ser det.

Trots det så optimerar man inte så att webbsidor visar mer innehåll istället för alldeles för mycket luft.

Det är samtidigt viktigt att känna till att alla sidor inte är lämpade för att använda hela sidbredden. Särskilt för landningssidor (ej lika med startsidan) brukar man vilja ta bort allt som distraherar.

En landningssida har som mål att konvertera, sälja, en produkt eller tjänst. Då bör den vara avskalad och bara visa sånt som är nödvändigt för att lyckas med målet.

Några exempel på hur det kan se ut

Det bästa sättet att få inspiration för hur man kan göra är att se hur andra gjort, så jag har valt ut ett antal sidor som utnyttjar hela skärmupplösningen. Alla skärmdumpar är av storleken 1903 x 943 pixlar.

Smashing Magazine

Skärmdump på smashing magazine

Smashing Magazine är sajten som alla som är intresserade av webbutveckling borde följa. De vet hur man optimerar en sida och deras egna sajt är inget undantag.

Som ni ser så använder de all yta väldigt smart.

I vänsterkolumnen har de två menyer, en för de tjänster de erbjuder och en för artiklar. Det är mycket bättre än att lägga allt i undermenyer, vilket är standard, för då syns det mycket tydligare och blir enklare för användaren att snabbt välja de områden som är intressanta.

I högerkolumnen finns förutom sök och fält för att anmäla sig till nyhetsbrev även presentation av böcker som de säljer.

Awwwards

Skärmdump på Awwwards

Awwwards är sidan där man listar de bästa webbsidorna baserat på deras användares bedömningar. I princip så är Awwwards en sida där man tittar på olika sajter och ger betyg. De vet med andra ord vilka webbsidor som går hem.

Personligen tycker jag visserligen att knapparna på deras överdel är spridda över hela längden vilket blir lite spretigt men överlag är det ändå helt okej och de lyckas bra med att använda hela bredden.

CSS-Tricks 

Skärmdump på CSS-tricks

CSS-Tricks är den ledande källan för att förbättra en webbsidas stilmallar, CSS. De gillar att experimentera och testa nya egenskaper och nya sätt att implementera CSS på. De har också valt att använda hela skärmbredden.

Hongkiat

Skärmdump på hongkiat

Hongkiat är en utmärkt källa för tips och inspiration inom webbdesign och webbutveckling. De använder hela skärmbredden för att visa innehåll.

Däremot är kolumnerna lite längre ner på sidan mer begränsade i bredd och håller sig till standard.

Entrepreneur, TheNextWeb och Techrepublic gör alla likadant.

Skärmdump på entrepreneur
Skärmdump the next web

Skärmdump på techrepublic

Unbounce

En till skärmdump på Unbounce

Unbounce är en av de ledande plattformarna för konvertering med fokus på landningssidor. De testar och mäter varenda detalj så man kan förvänta sig att om någon har koll på hur man skapar en sida som konverterar så är det dem. De har valt att vara sparsamma med att fylla ut sidan, däremot om man går längre ner på sidan så använder de hela bredden.

Det beror sannolikt på att de tänker i form av landningssidor där man vill ta bort allt som kan distrahera och endast fokusera på att konvertering. De visar ändå att de tror på att utnyttja hela skärmbredden, men inte överallt på sidan.

Skärmdump på Unbounce

Min sida

skärmdump från tobiasdokken.com

Den här sidan utnyttjar också hela skärmbredden. När skärmens bredd minskar (mindre än 1366 pixlar) så kommer den tredje kolumnen att gå över till en egen rad och då uppdelat i 4 kolumner.

Det kommer att byggas på allteftersom sidan får mer innehåll men en sak är säkert, det kommer alltid att experimenteras med den här sajten!

Hur kan en webbutik optimera för större skärmupplösning?

Jag tror att e-handlare är den grupp som kan dra mest nytta av att optimera sina webbsidor för större skärmupplösningar. Argumentet är att e-handlare ofta visar upp produkter i form av kolumner. Genom att utnyttja hela bredden kan de visa upp ännu mer av vad de erbjuder.

Det är inte oanvändarvänligt att fler produkter kan visas, alternativt större bilder, än vad som är möjligt på en mindre skärm. De besökare som använder stor skärmupplösning kan då använda sidan mer produktivt eftersom mer visas direkt.

Här ser ni hur Google gjort med Google Play.

Skärmdump från Google Play

De använder den mesta av bredden för att visa så många produkter som möjligt och har även en tydlig meny i vänsterkolumnen.

Nu vänder vi blickarna mot Halens, en av Sverige bästa webbutiker de senaste åren enligt Internetmagasinet InternetWorld.

Skärmdump från Halens

Vore det inte trevligare att visa upp fler produkter och eventuella erbjudanden på sidorna?

Kanske även visa upp herrkläder, barnkläder och skönhetsprodukter för att direkt tilltala fler målgrupper. Utrymme finns ju faktiskt!
Tänk också på att bara för att man idag oftast använder en mobil enhet när man använder Internet så betyder det inte att man ska försumma de som använder datorer.

En färsk undersökning visar att 80 % av alla konverteringar fortfarande sker från datorer. Trots mobilens övertag i användning så görs fortfarande de viktigaste besluten från datorn, vilket kanske inte är så konstigt eftersom man där bland annat har bättre översikt och större bilder.

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *

Related posts

LÄS ÄVEN

Vad är Amazon Go?

2017-02-09

Vad är Amazon Go och hur kommer det revolutionera sättet vi handlar på?

0

Skapar webbsidor lika långsamt som en sköldpadda

2017-01-23

Därför tog det 5 år att skapa min sajt – Sanningen bakom att skapa en webbsida

0

Vad är Web Beacon

2017-01-16

Vad är web beacon och hur hotar det vår personliga integritet?

0

2017-01-16

Hur gör svenska tidningar med utskrifter på webben

0

Skriva ut webbsidor med print style sheet

2017-01-06

Guide till utskrifter av webbsidor med print stylesheet

0

Kinesiska mobilappen WeChat

2016-12-27

Analys av WeChat och Kinas framfart på Internet

0

Därför borde kaklagen smulas sönder

2016-12-20

Därför borde kaklagen smulas sönder

0

Är kaklagen död?

2016-12-19

Är kaklagen död? Granskning av hur myndigheterna implementerat lagen

0

Säkerhetsbristen med Target blank

2016-12-12

Target _blank – Säkerhetsbristen som Facebook valt att inte åtgärda

0

Gå till bloggen
DelaDela Dela på Twitter Dela på LinkedIn Dela på Facebook Dela på Google plus
Kontakta
Nyhetsbrev