Web

Responsive Webdesign

Responsive Webdesign ist mittlerweile in aller Munde und entwickelt sich dank des wachsenden Markt von mobile devices zu einem zukunftsweisenden Trend. Doch was genau ist ein responsive Webdesign?

Responsive bedeutet reagierend und das beschreibt es auch sehr gut. Eine Website im responsive Webdesign reagiert quasi fließend auf sich ändernde Größen und Anforderungen des Ausgabegeräts. Während noch vor einigen Jahren Webseiten in einer starren unveränderbaren Größe hauptsächlich für die Darstellung auf Desktop-PCs gestaltet wurden, werden heute Webseiten auch von Smartphones, Tablets oder Laptops in verschiedensten Größen aufgerufen.

Damit eine Website für jeden Benutzer so übersichtlich und funktional wie möglich ist, muss die Anordnung und Darstellung einzelner Elemente, wie z.B. Seitenspalten und Texte, neu überdacht werden. Auch die Eingabemethoden unterscheiden sich nun von Nutzer zu Nutzer: Während am Desktop noch mit der Maus geklickt und sich die Navigation durch Mouseovereffekte entfaltet, fordert ein Touchscreen wischbare und antippbare Menüpunkte und Inhaltselemente.

Die Vorteile eines responsive Webdesigns liegen neben der Benutzerfreundlichkeit auch in der Kosteneffizienz. Durch ein reagierendes Design muss nur eine einzige Seite angelegt werden, welche für alle Benutzer gleichermaßen gut aussieht und den vollen Funktionsumfang anbietet. Es ist nicht mehr nötig neben der Hauptseite eine zusätzliche mobile Seite (durch ein vorangestelltes „m“ kennzeichnen, eine „optimierte“ Seite für mobile Geräte) anzulegen.

Weiterhin ist vorteilhaft, dass responsiv optimierte Webseiten besser im Googleranking abschneiden.

Gestaltung

Der Aufbau der Website passt sich mit Hilfe von HTML5 und CSS3 Media-Queries selbstständig der Breite des Browser-Fensters an. Dabei müssen in der gestalterischen Planung einige Aspekte bedacht werden. Ist beispielsweise das Gestaltungsraster in mehreren Spalten angelegt, so können diese variabel an die Breite des jeweiligen Endgeräts angepasst werden. Was bei kleinen Auflösungen, in der Darstellung nicht nebeneinander passt, wird untereinander verschoben oder alternativ positioniert. Lange Begriffe in den Menüleisten oder eine mit Inhalt und Tabellen überfrachtete Seite sind Gift für ein responsive Webdesign.

Empfohlen wird bei der Gestaltung einer responsiv optimierten Website eine Herangehensweise, die sich Mobile First nennt:  Dabei bildet die kleinste Bildschirmauflösung die Grundlage für alle weiteren angestrebten Gestaltungen.