RWD - Responsiv webbdesign
Traditionellt har det varit ganska enkelt att utforma en webbsida så att den passar för de flesta besökarna, då i princip alla har använt en stationär eller bärbar dator med liknande storlek på bildskärmarna. Med den växande marknaden för i-pods och smarta mobiler så har det skapat nya utmaningar för webbutvecklare: antingen att skapa ett flertal olika sidor med samma innehåll, eller att försöka hitta en kompromiss, som ofta innebar att hitta en design som blir halvbra för alla.
Som ett svar på de här problemen har Responsiv webbdesign (RWD) vuxit fram. Med RWD kan du skapa en webbsida som är flexibel och anpassar sig efter användaren.
Några tekniker som används inom Responsiv Webbdesign:
CSS3 Mediaförfrågningar [Media Queries]
Webbläsaren kan begära olika CSS-stilregler beroende på vilka egenskaper enheten har, t ex bildskärmens bredd. Det här används för att för varje skärmstorlek bestämma vad som ska visas och hur det ska se ut. Vid liten skärm kan designern t ex välja att minska antalet spalter eller att inte visa vissa ikoner.
Flytande rutnät [fluid grids]
Storleken på sektioner och kolumner bestäms med hjälp av relativa värden i procent.
Flytande bilder [Fluid images]
Även bilder får sina dimensioner angivna i relativa enheter. Görs i Javascript.
RESS
RESS = RWD + Server-side Components. Alla ovanstående tekniker är klientbaserade, dvs utförs hos den som tittar på sidan. För att få en bättre kontroll, fler funktioner och avsevärt snabbare nedladdning så lägger RESS vissa funktioner på servern. Istället för att behöva skapa ett flertal olika uppsättningar av CSS-regler så hämtar servern stilreglerna för varje webbläsare från en databas. Varje element på sidan kan på så sätt anpassas separat och kodens ordningsföljd anpassas för att ge snabbare visning.