Responsive design - ett nytt modeord?

"Responsive Design" står för att designen anpassar sig till användarens utrustning och bildskärm. Alla vet hur besvärligt det är att titta på webbplats med bred design på en bildskärm som är smalare eller att besöka en ­en vanlig webbplats genom en mobiltelefon. Visst det går, men det är inte bekvämt!

Välgjord "Responsive Design" ger nya möjligheter till dynamisk design och kan vara ett sätt att lösa problemet. Så nej, "Responsive Design" är inte ett bara ett modeord.

Design som anpassar sig till skärmens upplösning

I den enklaste formen är ”Responsive design” en grafisk / teknisk design som anpassar sig till bildskärmens storlek. Om skärmen är smalare blir kolumnerna proportionerligt smalare och texten (eller bilderna) mindre.

Tyvärr räcker inte detta. Vi måste också göra om designen så att den tar hänsyn till vilken enhet som visar informationen.

Att anpassa sig till mediespelaren

Om vi enbart tar hänsyn till upplösningen av en bildskärm blir vi lätt lurade. En iPhone-telefon har t ex en upplösning på 960 x 640 pixlar, vilket är i stort samma upplösning som en webbsida. Alltså borde det vara lika lätt att se en webbsida i iPhone som det är på en datorskärm.

Men här spelar den fysiska storleken oss ett spratt. Om vi visar en webbsida i den lilla storleken blir den oläslig trots den höga upplösningen. Den är helt enkelt för liten för ögat.

Alltså måste designen också ta hänsyn till vilken enhet som ska visa den, enhetens proportioner och hur stor enheten är i verkligheten.

Kanske måste man även ändra hur delar av designen visas. Det kan t ex vara så att för visning på mobiltelefon innehållet på skärmen ska visas på höjden, inte på bredden, att bilderna ska göras mindre, texten större, eller något annat.

"Responsiv Design" i praktiken

Men hur löser man allt detta i praktiken? Vilka tekniker finns för att hantera en design som anpassar sig efter användaren?

Det finns naturligtvis inte en enda lösning utan många. Nedan ska vi titta på några tekniker och metoder som börjar bli vanligare.

Designstrategi & Grid

För att tillverka en sida som verkligen svarar till besökarens miljö, kan det vara bra att implementera en medveten designstrategi.

Det blir allt vanligare att man anpassar sina webbplatser till en "grid"-baserad strategi. En "grid" är ett tänkt kolumnsystem som används för att skapa standardiserade bredder för innehåll (t ex artikeltext). Genom att både designer och teknikleverantör arbetar utifrån samma system - sparar man mycket tid.

Det har dessutom fördelen att man kan ändra kolumnbredder automatiskt.

Befintliga grid-system

Det finns många olika gridsystem att hämta på nätet. Det spelar egentligen ingen större roll vilket system man använder, så länge designers och teknikimplementerare är ense om vilket system som ska användas.

Ett exempel är "960 grid", en grid som helt enkelt är 960 pixlar bred som bredast. 960-grid kan i sin tur innehålla 12 eller 16 kolumner. Kolumnerna kan disponeras på olika sätt på varje enskild sida.

Ett exempel: Överst på en sidan visa en bred bild som använda alla 12 kolumnerna. Under bilden finns tre separata textfält som vardera använder 4 kolumner. Längst ned på sidan finns fyra bildplattor visas som vardera använder 3 kolumner. Kolumnerna kan kombineras fritt och möjligheterna blir därför många.

Och - vad spelar det för roll?

Jo, om man sen låter systemet automatiskt skapa <div>:ar för designen, sparar man massor av tid. Det är helt enkelt väldigt bekvämt. Det finns olika grid-system med olika bredder som används.

Fluid design

En grid kan relativt enkelt byggas om så att proportionerna mellan kolumner och mellanrum behålls när man minskar visningsytan. Gridden - och därmed de tekniska <div>:arna anpassar sig till bredden på t ex webbläsaren. Minskar man storleken på webbfönstret, minskar griddens samlade bredd och varje ingående kolumns bredd.

HTML5 och CSS3

Genom att använda HTML5 och CSS3 kan en del av "Responsiv Design"-problemen lösas. Framförallt ger oss både HTML5 och CSS3 en möjlighet att i mycket högre grad anpassa vår design efter besökarens mobila eller fasta enhet.

Både HTML5 och CSS3 är standarder som inte ännu är officiellt accepterade av standardiseringsorganen. Även fast långt ifrån alla webbläsare kan använda standarderna idag, anpassas ändå de flesta moderna webbläsare till dem när det kommer nya versioner. Det är därför mest en tidsfråga innan de är (de facto-)standarder.

Media type

Genom CSS3 och de delvis nya funktionerna för "Media type" har vi fått ett sätt att ta reda på användaren typ av utrustning. Om vi t ex specificerar "media type" till "phone", kan vi skriva design så att den delen av koden enbart gäller för mobiltelefoner.

Dessutom har man möjlighet att specificera t ex maxbredd på en skärm, så att det blir möjligt att enkelt skriva kod som uppfyller vissa villkor:

T ex "OM det är en telefon - OCH maxbredden på visningsytan är 1024 - använde denna del"

Sen gäller det att designern för respektive enhet talar om precis vad som ska ske och var på skärmen informationsdelarna ska visas. Det kan ju t ex vara så att vissa delar inte alls ska visas om användaren kommer till webbplatsen via en t ex mobiltelefon.

God "Responsive Design" tar hänsyn till den visande enheten

Genom att kombinera fluid grid, flytande förändring av text och bild samt de nya möjligheterna i HTML5 och CSS3 - börjar vi närma oss något som kan fungera i de flesta enheter.

"Responsive design" tar längre tid att koda fram än design för en enda storlek, men det kan definitivt lösa problemet med många olika visningskanaler.

Hur långt räcker "Responsive Design"?

"Responsive design" är en väl fungerande metod när man designar, t ex när det gäller anpassade storlekar, positioner, vilka element som ska visas etc. Men den kan aldrig lösa problemet med för mycket information eller för rörig navigering

Därför kvarstår frågan  - ska vi också göra ett urval av information och ha olika navigeringsmodeller beroende på vilken enhet som användaren använder? Har t ex en besökare via en mobiltelefon ett annat behov än en besökare via en dator?

Hillar Loor

Senior Partner
2012-03-07