Definition von Responsive Web Design

Was ist Responsive Web Design? Im Wesentlichen ist es, wenn das Design der Website auf die Abmessungen des Bildschirms reagiert. Mit anderen Worten, eine Website, die so gestaltet ist, dass sie reaktionsschnell ist, nimmt die Höhe und Breite des Bildschirms zur Kenntnis (tatsächlich ist der sichtbare Bereich normalerweise ein Browserfenster, wie in Internet Explorer) und passt das Layout der Webseite an den sichtbaren Bereich an angemessen (je nachdem, was der Webdesigner oder Creative Director für angemessen hält).

Obwohl dies am häufigsten in Weblayouts verwendet wird, kann responsives Webdesign weit über Layouts hinausgehen. Das reaktionsschnelle Webdesign wird hauptsächlich mithilfe von Code erreicht, der als Medienabfragen bezeichnet wird (siehe meinen Artikel Die Medienabfrage). Mit diesem reaktionsschnellen Webdesign können Sie Webseiten erstellen, die unabhängig vom sichtbaren Bereich sind.

Beispiele für Responsive Web Design-Fälle

Ein gutes Anwendungsbeispiel hierfür wäre eine Website, die sowohl für mobile Geräte als auch für Desktop-Computer optimiert ist, wobei die Links im oberen Menü besser als vertikale Liste und nicht als horizontale Leiste neu positioniert werden können über. Diese Art von Details wird durch responsives Webdesign unterstützt.

Wenn Sie ein Raster in Ihrem Layout haben, in dem 10 Miniaturansichten gut auf einen normalen Desktop-Computermonitor passen, müssen diese Miniaturansichten schrecklich klein sein, um 10 auf einem iPad oder iPhone zu passen. Mit einem ansprechenden Design können Sie es so ändern, dass bei einer Breite des Geräts von nur einem iPad nur 7 Miniaturansichten platziert werden. Dann vielleicht 4 für ein iPhone.

Viele Kontaktformulare für Websites werden mit einem Seitenleistenbereich (oder zwei) für den Verkauf und andere Zwecke versehen. Dies ist ideal für einen Desktop-Computer, aber auf einem Smartphone sind das Formular und die Seitenleiste standardmäßig zu klein, um gelesen zu werden. Mit Responsive Web Design kann das Formular so gestaltet werden, dass es den Bildschirm ausfüllt, und die Seitenleiste kann ausgeblendet, darunter platziert und durch eine andere kleinere Version mit derselben Nachricht “ersetzt” werden. Fast alles ist möglich.

Responsive Web Design vs. Liquid Layouts

Seit langer Zeit gibt es Webseitenlayouts, die sich an die Größe (normalerweise die Breite, insbesondere) des Browserfensters anpassen, die als flüssige Layouts bezeichnet werden. Diese werden heute noch verwendet, obwohl sie noch nie so häufig waren wie das typische feste Layout, das Sie auf den meisten Websites finden (wobei das Layout unabhängig von der Breite des sichtbaren Bereichs gleich bleibt). Flüssige Layouts werden sehr häufig für mobile Geräte verwendet, da sie für jede mobile Bildschirmgröße geeignet sind. Diese Art von Layout wird normalerweise sehr einfach gehalten, z. B. ein Raster mit Miniaturansichten oder eine Liste mit Schaltflächen. Wenn man jedoch dasselbe Layout verwendet und es die Breite eines Desktop-Monitors überspannen lässt, wird es normalerweise als zu dünn, zu gedehnt oder alles ist überdimensioniert.

Responsive Webdesign umfasst die Nutzung von flüssigen und festen Layouts für alle Bildschirmgrößen.


Inspiriert von Joe Rhoney

Passender Artikel

Warum responsives Website-Design in Ihren Augen liegen sollte

Es besteht kein Zweifel, dass Responsive Design in naher Zukunft ein Muss sein wird. Ab …

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

How to whitelist website on AdBlocker?