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.

Författare: Mårten Seiplax

Jobbar på svenska.yle.fi med det grafiska utseendet, kodning och sånt. Följ mig på Twitter eller Google +

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

  1. IE6 har vi inte stött det senast året, annat än på så sätt att materialet skall synas, men behöver inte se bra ut (i praktiken är det först på nya x3m.yle.fi som det har tillämpats fullt ut). IE7 och IE8 kommer via att stödja med http://code.google.com/p/html5shiv/ (i princip ett javascript som gör att IE7 och IE8 förstår att hantera HTML5 taggarna som DIV:ar). Sajten är inte responsiv i IE7 och IE8, utan låst till en fast bredd för desktops.

    I övrig kommer vi att använda oss av progressive enhancement – http://en.wikipedia.org/wiki/Progressive_enhancement så att de som kan få en bättre användarupplevelse får den. Sajten kommer därför att se olika ut på olika apparater inte enbart pga den responsiva designen, utan också beroende på vad deras webbläsare stöder.

Kommentarer kan inte lämnas på detta inlägg.