Wenn wir über Websites sprechen, hören wir oft "Ja und das muss natürlich responsiv sein!".  Aber was bedeutet das eigentlich? Und was zieht das für Konsequenzen mit sich?

Definitionen: Adaptiv und Responsiv

Eine Webseite ist responsiv, wenn sie sich dynamisch an die Größe des Clients, also des Endgerätes auf dem sie dargestellt wird anpasst, ohne, dass eine neue Version der Seite geladen wird. Adaptives Design ist schon ein wenig älter, möchte aber das selbe Problem lösen. Hier wird vorher abgefragt welche Größe das Zielgerät hat und je nachdem die passende Version der Anwendung ausgeliefert.

Die Unterscheidung heutzutage gestaltet sich jedoch ein wenig komplexer. Ist eine Website, in der feste Grenzen für Auflösungen gesetzt werden, an denen sich scheinbar das gesamte Layout einmal ändert wirklich responsiv?
Oder ist das eher eine neue, verbesserte Art eine adaptive Webseite auszuliefern?

Oft werden für Websites statische PDFs als Design entworfen, die keinen Aufschluss über die Responsiveness einer Seite geben können. (Und zoomen Sie beim Betrachten derer eigentlich so nah heran, dass Sie wirklich nur den eigentlichen Bildschirm Ausschnitt sehen, den der Browser darstellen würde?)
Diese PDFs sind sehr selten "einfach" auf kleine Endgeräte übertragbar. Statt mittels statischen Layouts, die noch aus den Hochzeiten des Prints kommen, sollten wir Layouts und Designs dynamischer denken. Wenn man so arbeiten möchte ist es wichtig, stehts von Beginn auch eine Version für kleinere Geräte zu bedenken... Aber sind wir dann nicht eher wieder beim adaptiven Design?

Web vs. Print

Spätestens seit der Einführung der flexboxen, sollten wir im Webdesign nicht mehr in festen Spalten denken. Geben wir dem Browser freie Hand den content anzuordnen, kann er dies für verschiedenste Größen an Geräten tun, ohne, dass wir Breakpoints und Layouts setzten müssen. Das Layout kann sich kontinuierlich und dynamisch anpassen, auch an Geräte, deren Seitenverhältnis wir nie bedacht hatten. 
Das kann zu unerwünschten Nebeneffekten führen?
Ja, haben wir dann nicht eher ein zugrundeliegendes Design Problem?
Es wird Zeit, sich von den strickten Gestaltungsregeln einer Print Seite zu verabschieden. Warum? Hat Ihr Rechner etwa DIN A4 Format? Verändern Sie nie die Seitenverhältnisse Ihres Browsers?
Weiterhin möchte ich Sie Fragen; ähnelt die Funktion Ihrer Homepage eher der eines Plakates oder eines Dokuments? (Warum halten wir uns dann hier nicht auch an Gestaltungsregeln, die für Plakate gelten statt Dokumente?)

Was wäre wirklich responsives Design?

Robustes responsives Design sorgt dafür, dass Webseiten auf allen Endgeräten angezeigt und verwendet werden können. Es überlässt dem Client welcher Content unter einander angeordnet wird und wo umgebrochen werden muss.

Wie können wir das umsetzten?

Robust bedeutet hier, Abstände sind so gesetzt, dass Sie unabhängig vom Endgerät funktionieren. Das bedeutet vielleicht auch, dass mal etwas nicht perfekt unter einander anordnet. (Wenn Sie den Gestaltungsregeln eines Plakates folgen - Ist das wirklich so dramatisch?)
Wie kann das dennoch funktionieren? Verwendet werden sollten ausschließlich Maße, die sich relativ zur Schriftgröße (css: z.B. rem) und zur Breite und Höhe der Seite in Prozent verhalten (css: vh und vw).
Es sollte keine maximale Seitenbreite festgelegt werden. Das bedeutet; Ihre Headerbilder müssen auch in so großen Auflösungen hinterlegt werden, dass Sie auf einem 4k Monitor noch ok aussehen. (Dazu müssen sie aber keine so große Auflösung haben.
Außerdem: Verwenden Sie Vektorgrafiken wo es geht. Also im Logo, im Favicon, für sämtliche Icons, ...

Die Welt wird immer dynamischer und bunter? Ihre Webseiten auch?