Responsive design is een benadering van het maken van webpagina's die gebruik maakt van flexibele lay-outs, flexibele afbeeldingen en cascading style sheet media queries. Het doel van responsive design is het bouwen van webpagina's die de schermgrootte en oriëntatie van de bezoeker detecteren en de lay-out dienovereenkomstig veranderen.
Responsive design is een enigszins retro benadering van het ontwerpen van websites die veel ontwerpproblemen oplost die worden veroorzaakt door de proliferatie van nieuwe soorten mobiele apparaten. Responsive design-pagina's gebruiken x- en y-coördinaten op een raster voor de lay-out en wiskundige percentages voor afbeeldingen in plaats van parameters met een vaste breedte. Door het gebruik van percentages in plaats van vaste breedte parameters en een raster lay-out ontstaat een meer vloeiende lay-out die zichzelf aanpast aan de grootte van het scherm.
Media queries, een functie van cascading stylesheets (CSS), stellen de ontwikkelaar in staat om te specificeren wanneer een bepaalde stijl van kracht wordt. Met CSS2, bijvoorbeeld, zal een media query printer-vriendelijke stylesheets serveren indien daarom wordt gevraagd. CSS3 heeft de query-mogelijkheden uitgebreid, waardoor stylesheets kunnen worden afgestemd op het scherm van een apparaat en een stylesheet voor desktop, tablet of smartphone kunnen worden geserveerd, afhankelijk van het antwoord op de query.
Dit betekent dat ontwikkelaars in plaats van een speciale mobiele versie van een website te bouwen -- waarvoor vaak nieuwe code vanaf nul moet worden geschreven -- eenvoudig meerdere stylesheets voor dezelfde webpagina kunnen bouwen en misschien zelfs verschillende afbeeldingen aan elk van de stylesheets kunnen koppelen. As a result, HTML code can be repurposed instead of having to be rewritten, which saves considerable development time.
Chris Converse of Codify Design Studio demonstrates the basic elements of responsive design:
See also: mobile application development, Web app, native app, hybrid app, mobile browser, mobile OS,