Tips för responsiv design (och all annan webbutveckling)


Använd relativa enheter (% em, rem). Men kom ihåg att det ibland också är lämpligt att använda absoluta enheter som px.

Använd liquid/fluid design. Dvs tänk på webbplatsen som ett flytande ämne som hälls i webbläsarbehållare med olika dimensioner.

Tala om för webbläsaren att sajten är responsiv med hjälp av <meta name="viewport" content="width=device-width, initial-scale=1.0" />

Använd img {max-width:100%} för alla bilder så att de aldrig flyter utanför sina ramar

Använd *,:before,:after{box-sizing:inherit}html{box-sizing:border-box} för att inkludera padding och border i width på alla taggar

Använd css normalize för att säkerställa att alla taggar ser exakt lika ut i alla webbläsare

Håll dig till standards (xhtml, css, ecmascript, DOM och http). Använd inte browserspecifika utbyggnader av dessa.

Validera xhtml, css och js så att du har syntaktiskt korrekt kod och undviker bad practice

Använd jQuery för att överbrygga skillnader i DOM och event handlig i
Använd feature detection och inte browser detection

Använd polyfills, fallbacks eller graceful degradation för att hantera webbläsare som inte stödjer en viss teknik

Fatta kloka beslut om tillämpning av ny teknik med hjälp av caniuse.com