Responsiivisen web-suunnittelu tarkoittaa, että web-sivusto toimii työaseman lisäksi tabletilla ja älypuhelimella. Web-sivusto reagoi siihen mikä laitetyyppi on kyseessä.
Responsiivisen web-suunnitteluun on vaikuttanut voimakkaasti Ethan Marcotten artikkeli ”Responsive Web Design”.
Responsiivisen web-suunnittelun käsitteitä
Joustavat ruudukot (engl. fluid grids)
On responsiivisen suunnittelun avaintekijöitä, etenkin pienellä näytöllä.
Määrittelemällä arvot prosenteissa pikseleiden sijaan, ruudukko venyy ja kutistuu.
Esimerkiksi leiska, jossa 3 saraketta ei toimi pienellä näytöllä.
Laitetunnistus (engl. media queries)
CSS:llä tai JavaScriptillä tunnistetaan näytön leveys, korkeus, suunta (pysty tai vaaka) ja kuvasuhde, jolloin laitteelle voidaan CSS:llä tyylimäärittelyjä.
Esimerkiksi voidaan määritellä muotoiluja, jotka koskevat näyttöjä joiden korkeus on vähintään 600 pikseliä ja enintään 1200 pikseliä. Pieniltä näytöiltä voidaan piilottaa tiettyjä käyttöliittymäelementtejä.
Mobiili ensin -suunnittelu (engl. mobile first web design)
Yleensä web-sivusto rakennetaan tietokoneille, vasta sitten optimoidaan mobiililaitteille. Mobiili ensin -suunnittelussa tehdään päinvastoin.
Yleisimmät responsiivisen web -suunnittelut alustat