Responsive Design – studions tankar

Du läser detta förmodligen för att du hört talas om Responsive Web Design. Det pratas mycket om det inom webbdesign och webbutveckling idag och allt fler designers och utvecklare börjar använda sig av tekniken.

Med hjälp av lite CSS3 och Media Queries kan man idag anpassa sin layout till olika upplösningar/fönsterstorlekar. Tekniken är lätthanterlig och enkel att förstå…

Men det finns olika vägar att implementera tekniken, främst vad gäller kompatibilitet med dagens moderna webbläsare. Du kan läsa mer om vilket tillvägagångssätt som passar dig här.

Hur fungerar det?

Jo, med hjälp av mediaqueries anpassa du layoutens struktur till olika upplösningar. Du ställer in min- och maxvärden och så fort en webbläsare läser sidan i angiven storlek ändras layouten..Såhär ser koden ut:

@media only screen and (max-width: 480px) {
/*DIN CSS-KOD HÄR*/
}

Koden ovan appliceras på allt under 480px;

Man kan tillämpa denna teknik på två sätt, antingen med en s.k fluid layout, eller en fixed layout. Alltså flytande boxar och element angivna i procent, eller fasta bredder angivna i pixlar/em. Vilket av dessa ska man tillämpa och varför?

Fixed vs Fluid

Fixed – din design är konstruerad efter fasta bredder rakt igenom hela designen, även vid de olika fönsterstorlekarna. Det betyder att om du testar din layout så ”hoppar” den till den nya layoutstrukturen först när du når min/max-bredden som du angivit i din mediaquery…Exempelvis så här: http://www.fork-cms.com/

Fluid däremot anpassar sig efter skärmstorleken hela tiden eftersom den är konstruerad med flytande bredder, angivna i procent. Så fort du ändrar fönsterstorlek kommer du därför att se din layout ändras konstant. Någon verklig förändring i layouten sker dock först när fönsterstorleken når angiven min/max-bredd i mediaqueryn – samma princip. Exempelvis såhär: http://themetrust.com/demos/reveal/

Vilken ska man använda och varför?

I min mening är fluid bäst att använda – eftersom den är mer framtidssäker. Att ange sin layout i procentenheter gör den framtidssäker för kommande mobil/surfplatta som möjligtvis har en annorlunda storlek på skärmen – det kan mycket väl hända…

Men jag har bestämt mig att först och främst använda fixed layouts. Detta eftersom det är både enklare och snabbare att implementera, samt att med fixed layouts har du mer frihet i designen – det måste inte vara en alldeles för simpel design. Det blir även lättare att mobilanpassa befintliga hemsidor om man går på fasta värden, för då slipper man omvalnda alla fasta px till procent!

Med en fluid layout måste man ofta hålla det enkelt – om man inte vill ha alldeles för mycket att håla reda på…I min värld har jag alltid designat efter fasta värden och det tar väldigt lång tid att omvandla en av mina designs till en fluid layout eftersom jag måste räkna fram allt i procent – vilket inte är så praktiskt att göra…

Mycket låter bra i teorin – men är en annan sak vid praktisk tillämpning…
Givetvis går det att blanda fluid och fixed-layouts. Efter lite mer erfarenhet i tillämpningen kommer jag att göra det.