Hur bygger man en sajt som fungerar både på mobil, tablet och desktop – på respektive form factors villkor?

Svaret är: Responsiv design, med vilket vi bestämt att bygga nya svenska.yle.fi. Beslutet grundar sig på att vi vill tillgodose det behov som uppstår då sajten används på en allt större flora av apparater.

* När du tittar på demon, tänk på att den här versionen är en statisk html kopia, och att den saknar lösningar specifikt per apparat. Den är grunden med vilken vi börjar se vilka tilläggslösningar vi behöver göra för att få den att fungera optimalt i alla apparater.

Den modell vi gått in för betyder att vi byter utseende ‘on the fly’ med media querys beroende på hur stor skärm sajten visas på. För att det skall fungera lika smidigt för ngn som använder mobilen som för ngn vid sin dator behöver man utgå ifrån mobilens behov först.

Mobilen har förutom en liten skärm också långsammare nätförbindelse, och stöder inte alla nya tekniker. På en dator är det möjligt att lägga till saker som saknas i mobilen.

Vi har därför beslutat att leverera en liten bild som standard. Den laddas av alla apparater, som sedan byts ut till en större version beroende på vilken skärmstorlek som används. Problemet med den lösningen är att det uppstår en omritning av sidan, då den större bilden laddas in med viss fördröjning. Det problemet går att lösa genom att kombinera bild-utbytningsfunktionen med CSS (styr sidans utseende). Eftersom CSS:en är skild för varje skärmstorlek kan storlekarna för bilderna också anpassas korrekt.

Rent markup-mässigt vill vi inte ladda hela sökvägen för fem gånger, utan räknar med att lösa det med en egen bildutbytningsfunktion. Så här ser den dock ut i skrivande stund:

<img alt="Yle" src="http://www.yle.fi/ims/nyheter/2011/43/611054ea59521d6b15/611054ea59521d6b15_8.jpg" data-src-fluid="http://www.yle.fi/ims/nyheter/2011/43/611054ea59521d6b15/611054ea59521d6b15_8.jpg" data-src-narrow="http://www.yle.fi/ims/nyheter/2011/43/611054ea59521d6b15/611054ea59521d6b15_4.jpg" data-src-normal="http://www.yle.fi/ims/nyheter/2011/43/611054ea59521d6b15/611054ea59521d6b15_6.jpg" data-src-wide="http://www.yle.fi/ims/nyheter/2011/43/611054ea59521d6b15/611054ea59521d6b15_5.jpg">

Men layouten då?
I och med de fyra olika storlekar som sidan kan ses i måste man hitta på sådana layoutlösningar (layoutblock) som fungerar smidigt i alla storlekar. Detta för att redaktören som skriver artiklarna inte skall behöva kolla att textmängden inte ställer till problem i ngn viss skärmstorlek.

Ett utmaning uppstod i att omforma raden med fyra puffar bredvid varandra till en med två bredvid varandra. Lösningen ligger i att använda en CSS selector på varannat block för att bryta blocken annorlunda beroende skärmstorlek. Alternativet att krympa spaltbredden skulle ha lett till en allt för stor chans att orden skulle ha varit så långa att de inte rymts inom spaltbredden.

En annan är att ta bort bakgrundsfärger från layoutblocken då de visas i mobilen, då det inte längre är intressant att visa layouten som är gjord för större skärmar. Lösningen ligger i att använda media querys även för att lägga till bakgrundsfärgen i de större skärmstorlekarna, så att de aldrig ens finns i mobilversionen.

Vilka är nästa steg?
Nu går vi vidare och testar denna version, och bestämmer vilka specifika lösningar vi gör per apparat (dvs Android, Ipad, Nokia). Redan nu vet vi att demon inte fungerar så som vi vill på Android (Samsung Galaxy Tab) i och med att den inte visas i tablet läge. Javascript-lösningen är heller inte perfekt, i och med att den räknar skärmbredd annorlunda än media queryn, vilket gör att det i vissa skärmstorlekar blir fel bildstorlek i kombination med de fyra sidstorlekarna. En lösning vi ännu inte gjort, men kommer att ställas inför är hur vi visar och lägger in videon (istället för bilder). Då vi är nöjda med hur det fungerar kommer vi att bygga fler modeller för layoutblocken, och lägga på fler visuella stilar på de modeller som redan existerar.

What would be a good set of page widths with the current set of screen resolutions?

We have decided to work with responsive design and are in the process of setting the widths of the pages. I took a look at the screen resolutions our visitors are using at the moment.

The setup we are looking at right now would have four brackets:

  • Less than 740px (mobile or small tablet) – would see a fluid page
  • Less than 980px (tablets or notebooks) – would see a fixed-width page of 740px
  • Less than 1220px (smaller screens) – would see a fixed-width page of 980px
  • Wider than 1220px (big screens) – would see a fixed-width page of 1220px

When the current number of screen resolutions is applied to these brackets this is the outcome:

  • 2,5 % = Less than 740px
  • 2,2 % = Less than 980px
  • 16 % = Less than 1220px
  • 80 % = Wider than 1220px

These numbers represent 94 % of all visits to our site, the remaining 6 % are spread over 2,300 different screen resolutions.

If we would have a wider page for bigger screens, the result would be:

  • 2,5 % = Less than740px
  • 2,2 % = Less than 980px
  • 49 % = Less than 1360px – would see a fixed-width page of 980px
  • 45 % = Wider than 1360px – would see a fixed-width page of 1360px

It’s also possible to move the width bracket for smaller screen sizes, but that immediately creates a cascade effect. The tablet user is not happy when grouped with the mobile users, and someone using a screen resolution of 1192px is not happy being grouped with the users of a 768px screen.

Additionally, the numbers don’t tell the full story as they don’t take into account that a user might display the browser window in a smaller size than the screen resolution they have.

What brackets are you using, and any particular reasons why you chose them?