fbpx

17. Juli 2019

Responsive Webdesign: Klassisch mit Pixel oder dynamischer Skalierung?

HTML5, CSS3, Media Queries und Viewport sind die häufigsten Begriffe die ein Webentwickler mit dem "Responsive Webdesign" in Verbindung bringt.

Für moderne Webseiten ist diese Art der technischen Umsetzung einer Webseite nicht mehr wegzudenken. Mit Hilfe dieser Technik wird gewährleistet, dass Inhalte auf einer Webseite einheitlich und unabhängig vom Ausgabegerät (PC, Tablet oder Smartphone) dynamisch angezeigt werden können.

Grundsätzlich kann man sagen, dass "Responsive Webdesign" eine reaktionsfähige Webseite darstellt, die sich an der Bildschirmauflösung des Endgerätes orientiert und dementsprechend anpassungsfähig ist.

Um dies bewerkstelligen zu können, werden für gewünschte Bildschirmauflösungen im CSS sogenannte Media-Queries gesetzt, die es ermöglichen, ab oder bis zu einer bestimmten Auflösung für jedes einzelne Element ein anderes Verhalten festzulegen.

Die klassischen Standardauflösungen orientierten sich dabei bis vor Kurzem noch an die folgenden Auflösungen:

Smartphones:

320px bis 480px

Tablets:

768px bis 1024px

Computer-Desktop:

1024px+

Durch die Vielzahl der mobilen Geräte, die in den letzten Jahren den Markt erobert und komplett neue Seitenverhältnisse und Auflösungen eingeführt haben, war es für Webentwickler zunehmend schwerer, Webseiten so zu programmieren, dass jedes Endgerät die Inhalte einer Webseite perfekt darstellt. Wer detailverliebt ist, hat sich entsprechend die Zeit nehmen müssen, um für die verschiedenen Geräte individuelle Media-Queries zu setzen.

Ein Lösungungsansatz

Wir haben für uns, als Webagentur, eine optimale Lösung gefunden, Webseiten so ziemlich für jedes Gerät perfekt darzustellen. Das Zauberwort heisst Skalierung.

dynamic

Wie skaliert man nunn eine komplette Webseite?

Wir haben recherchiert und sind fündig geworden. Nach einer gewissen Zeit des Einlesens haben wir diese Methode beispielhaft getestet und waren von der praktischen Anwendung überwältigt. Zu den üblichen dynamischen Masseinheiten %, em, rem kommt in diesen Ansätzen nun noch vw und vh hinzu. Eine Masseinheit die buchstäblich unseren kompletten Workflow und unsere Ansätze verändert hat.

Die Einheiten vw und vh definieren eine Breite beziehungsweise Höhe in Relation zur Fenstergrösse. Dabei steht vw für view width und vh für view height. Diese sogenannten Viewport Units ermöglichen es, Grössen in Relation zur jeweils aktuellen Grösse des Browserfensters zu definieren und verhindern ungewollte Textumbrüche oder Darstellungsfehler. Als Beispiel dient hierfür unsere eigene Webseite, die wir nach diesem Prinzip programmiert haben.

Für wen eignet sich die dynamische Skalierung?
Je nach Grösse des Projekts kann die klassische pixelbasierte Umsetzung ein sinnvoller Kompromiss sein, da die dynamische Skalierung etwas zeitaufwändiger ist und je nach Budget vermutlich nicht die erste Wahl sein sollte. Alt bewährte Techniken, in denen man geübt ist, fressen weniger Zeit und sind heute immer noch beliebt.

Einen Blick auf neue Techniken zu werfen, lohnt sich aber auf jeden Fall.

Haben Sie Fragen zu diesem Thema oder möchten solch ein Projekt realisieren?

Arbeiten Sie mit uns zusammen


Quellenangaben:
Fun with Viewport Units
Immer schön flexibel bleiben
CSS Units
Viewport units: vw, vh, vmin, vmax





Schreibe einen Kommentar

Bitte achte darauf, alle Felder mit einem Stern (*) auszufüllen. HTML-Code ist nicht erlaubt.

team work2