Responsive Webdesign ist ein neuer Begriff, der verwendet wird, um das Konzept zu beschreiben, dass sich das Layout einer Website in Reaktion auf die Bildschirmgröße und Auflösung des Benutzers ändert. Dies hat mit dem Aufkommen von Smartphones und Tablets an Bedeutung gewonnen, da sich ihre Bildschirme stark von denen herkömmlicher Laptops und Desktops unterscheiden. Ethan Marcotte prägte den Begriff Responsive Webdesign und schrieb ein Buch zu diesem Thema mit dem passenden Titel Responsive Web Design.

Viele Benutzer haben vielleicht bemerkt, dass Websites oft eine alternative mobile Website haben. In der Vergangenheit war dies ein separat gestaltetes Unternehmen, aber heute mit einer noch größeren Vielfalt an Geräten, Browsern und Bildschirmen ist es zunehmend ineffizient geworden, separate Websites zu entwerfen, und der Nutzen flexibler Layouts wurde erkannt. Das Problem ist, dass die Pflege verschiedener Websites für verschiedene Geräte zeitaufwändig und teuer ist. Außerdem erkennt eine Website häufig die Art des Geräts, mit dem darauf zugegriffen wird, und leitet sie um, wenn es sich um ein mobiles Gerät handelt. Durch die große Anzahl mobiler Geräte, die für den Zugriff auf Websites verwendet werden, werden die Ressourcen des Servers stärker belastet.

Die Lösung liegt in einem Layout, das flexibel ist und auf die Benutzer selbst reagiert. Eine wichtige Methode für responsives Webdesign ist die Medienabfrage, die in CSS3 eingeführt wurde. Eine Medienabfrage ermöglicht es der Website, das Gerät im Wesentlichen nach seinen Spezifikationen zu fragen. Die Medienabfrage besteht aus zwei wesentlichen Teilen. Der erste ist der Medientyp, der in diesem Fall die Art des Bildschirms ist, den das Gerät verwendet, und der zweite ist die Abfrage selbst, bei der das Gerät ein bestimmtes Merkmal des Geräts überprüft, z. B. seine vertikale oder horizontale Auflösung. Es gab frühere responsive Layouts auf der Basis von JavaScript, aber Medienabfragen sind leistungsfähiger, da sie mehr als nur die Bildschirmauflösung testen können und diese separaten Eigenschaften alle in einer einzigen Abfrage getestet werden können. Beispielsweise kann sogar die Bandbreite, die der Benutzer der Website verwendet, in das betrachtete Layout einfließen. Basierend auf der Antwort auf die Abfragen passt das CSS sein Markup der Website an das verwendete Gerät an. Responsives Webdesign ermöglicht es einem Webdesigner auch, zu ändern, wo oder ob Bilder in einem Layout erscheinen, alles in Anpassung an den Benutzer.

Marcotte erklärt in seinem Buch, dass es neben Medienabfragen zwei weitere Elemente des responsiven Webdesigns gibt, und dies sind flexible/flüssige Raster und responsive Bilder. Im Wesentlichen wurden früher Raster mit einer bestimmten Anzahl von Pixeln mit einer bestimmten Anzahl von Spalten erstellt. Um diese Flüssigkeit zu einer der ersten Möglichkeiten zu machen, über das Design nachzudenken, müssen Sie über Proportionen nachdenken und die Dinge skalierbar machen. Es gibt bereits vorgefertigte Fluid Grids, die heruntergeladen und für neue responsive Websites verwendet werden können. Das nächste Problem wird zu einem Problem mit festen Bildern in einem fließenden Raster, und dies wird durch die Verwendung von responsiven Bildern angegangen. Der Schlüssel liegt darin, die Größe des Bildes im Wesentlichen auf den Container zu beschränken, der auf der Website verwendet wird. Diese Themen sind einfach in Bezug auf Ideen, aber komplex in ihrer Ausführung. Diese Konzepte sind integraler Bestandteil des zukünftigen Webdesigns, da responsives Verhalten für Designer und Verbraucher immer wertvoller wird. Responsives Webdesign wird es einem Benutzer, der jedes Gerät verwendet, im Wesentlichen ermöglichen, eine persönlicher zugeschnittene und komfortablere Erfahrung zu machen.