Så fungerar responsiv webbdesign

Om vi ska titta lite mer tekniskt på hur responsiv webbdesign fungerar så måste vi gå in under skalet. Hur fungerar det och vad är det egentligen som händer?

I grunden ritas alla webbplatser upp av ett taggspråk (märkspråk) kallat HTML (Hypertext Markup Language). Du stoppar in ”taggar” runt innehållet som sedan styr utseendet, enkelt förklarat. Om vi ska ta ett konkret exempel så representeras fetstil med taggen <b> och där fetstilen tar slut har man sluttaggen </b>. Sedan finns det mängder med andra taggar som har andra funktioner.

Vidare finns det något som heter CSS (Cascading Style Sheets) som är kopplat till HTML-koden. Det är stilmallar som förklarar hur taggarna ska se ut. Du kan exempelvis styra hur taggen för fetstil <b> ska bete sig när du använder den. Exempelvis att den ska ha ett visst teckensnitt.

De flesta webbsidor är uppbyggda av block ungefär som en tidning med olika spaltindelningar och rutor för artiklar. Dessa block skapar man ofta med taggen <div> som definierar var blocket börjar och </div> där blocket slutar. I CSS-koden finns delar som beskriver hur detta block positioneras. Exempelvis att det ska flyta till vänster på sidan.

Responsiv webbdesign

Hur får vi nu att sidan ser annorlunda ut om vi ändrar skärmbredden?

Jo, nu kommer vi till det magiska som är nyckeln till det responsiva och det kallas ”media queries”. Man stoppar in en särskild tagg kallad ”@media” i CSS-koden som läser av skärmens bredd och därefter talar om hur CSS-koden ska förändras i förhållande till den bredden. Hänger ni med?

Vi kan exempelvis tvinga blocket som flyter ”till vänster” i en viss skärmbredd att flyta ”till höger” i en annan.

Du bygger alltså lämpligen upp sidans block i normalbredd och skriver sedan media queries som beskriver hur blocken förändras i olika skärmbredder. Där har vi tekniken bakom responsiv webbdesign enkelt förklarat. Alltså en design som förändras i förhållande till skärmstorlek.

Märkta med: , , , , , ,
Publicerat i Allmänt
%d bloggare gillar detta: