Glem ikke de store skærme

Mobile first, men ikke mobile only. Udnyt hele skærmen, når du designer til web.


I det seneste år har vi oplevet en eksplosion af forskellige skærmstørrelser. I Bleau har det betydet, at vi har været optaget af at designe hjemmesider, som henvender sig til både smartphone- og tabletenheder, og at næsten alle projekter er endt ud i et responsive website, som egner sig godt til de mindre skærme.

Men hvad med de større skærme? Dem synes jeg vi glemmer i processen. I designfasen giver vi den mobile bruger rigtig meget opmærksomhed, men vi glemmer, at der er en hel masse ledig skærmplads, vi aldrig får brugt.

Mange websites bygger på det populære Twitter Bootstrap CSS-framework. Det giver et grid, som udviklere kan bruge, når de implementerer webdesign til forskellige typer af enheder:

  • Rigtig små enheder, (smartphones < 768px)
  • Små enheder (tablets ≥ 768px)
  • Mellemstore enheder (desktops ≥ 992px)
  • Store enheder (desktops ≥ 1200px) 

Som tallene i parentesen viser, har websites, der bygger på den nyeste udgave af Twitter Bootstrap, en forventet maxbredde på 1200px. Mange af de sites, der bygger på den gamle udgave af Twitter Bootstrap, må leve med en maxbredde 940px – simpelthen fordi frameworket ikke tillod en større bredde.

Langt de fleste brugere i dag sidder foran en skærm med en opløsning, der er noget højere end 940px.

Udvikling i skærmopløsninger – Kilde: W3Schools Browser Display Statistics

Grafen viser, at 93% af alle, der besøgte W3 Schools i januar 2014, havde en skærmopløsning på 1280x800px eller højere. 99% havde en opløsning på mere end 940px.

Hvis du ser på denne graf fra Statcounter, kan du se, at skærmopløsningen 1024x768px er på kraftig retur, og at det omvendte er tilfældet for de højere opløsninger. Desktopcomputere med en opløsning på 1024x768px gik fra 18% i maj 2013 til 10% i maj 2014, mens desktopcomputere med 1366x768px og 1920x1080px i samme periode gik fra hhv. 25 til 29% og 7 til 10%. Den mest populære skærmopløsning lige nu er altså 1366x768px.

Top 10 Desktopskærmopløsninger (Maj 2013 - Maj 2014) – Kilde: Statcounter

Hvad er løsningen så? Jeg selv plejer at give følgende anbefalinger, når jeg snakker med vores kunder:  

  • Du bør stadig have fokus på de små skærme. Flere og flere bruger smartphones og tablets til at surfe med, så design og funktionalitet skal derfor stadig optimeres til disse enheder.
  • At designe til en maxbredde på 1024px hører fortiden til. Langt de fleste desktopbrugere har skærmopløsninger, der er meget højere end det. Overvej i stedet, hvordan du bedst udnytter den ekstra plads.
  • Acceptér, at det er noget nær umuligt at forudse fremtidens skærmopløsninger, og at brugerne altid vil have alle mulige forskellige enheder med alle mulige forskellige opløsninger. Der er forskellige teknikker, du kan bruge til at håndtere skærmopløsningsproblematikken. Én af dem er fluid design, der tilpasser sig de forskellige skærme 100% - i modsætning til responsive webdesign hvor layoutet altid følger en foruddefineret logik.
  • Hvis ikke designet skal være fluid, bør du i stedet anvende et responsive grid, som også tilpasser sig de større skærme. Den nyeste udgave af Twitter Bootstrap gør netop det, og det bør også gælde for hele webdesignprocessen – nemlig at den tager højde for de større skærmstørrelser uden at gå på kompromis med de små.  

Dette blogindlæg er oversat fra Peter Terkildsens personlige blog.

Udgivet:
1. juli 2014
Tags:

Kontaktperson

Peter Terkildsen - Partner

Peter Terkildsen

Partner

E-mail:
Telefon: 38 40 05 31
Mobil: 29 47 91 09

Større digital forretningsforståelse? Kontakt os i dag