02233-7128442
info@agent-media.com


Responsives Webdesign: HTML-Seiten für Smartphones, Tablets und PCs

Mit dem Aufkommen mobiler Endgeräte mit eher kleinen Displays auf der einen Seite, gleichzeitig aber immer erschwinglich werdender Großbildschirme für Arbeitsrechner auf der anderen Seite, standen Webdesigner vor einer großen Herausforderung. Wie hält man den Inhalt für alle Endgeräte attraktiv? Die naheliegende Antwort, für mobile Plattformen eine eigene Version aufzubauen, ist möglich und kann auch sinnvoll sein. Allerdings ist damit auch ein relativ hoher Wartungsaufwand verbunden, da zwei HTML-Seiten mitsamt ihren Designangaben (in der Regel in separate CSS-Dateien ausgelagert) gepflegt werden müssen. Abhilfe schaffen Responsive Layouts.

Responsives Design im Einsatz

Die Technik responsiver Webdesigns beruht auf Gitterlayouts (englisch: Grid Layouts). Dabei wird die Seite oder ein definierter Inhaltsbereich meistens in 12 gleich große, horizontale Einheiten aufgeteilt. Die zusammenhängenden Spalten einer Inhaltszeile umfassen dann in der Regel mehrere dieser Einheiten so dass sich zum Beispiel zwei, drei oder vier gleichgroße Spalten aus den zwölf Einheiten gruppieren lassen. Spezielle Angaben, die nur bei bestimmten Display-Größen wirksam werden, sorgen dafür, dass diese Spalten auf kleineren Displays verschwinden oder untereinander angezeigt werden

Beispiel: dreispaltiges responsives Layout mit Zurb Foundation

Im HTML-Code wird das Verhalten und die Größe der Spalten über CSS-Klassennamen festgelegt. Die Klasse "row" bezeichnet in Foundation wie in Bootstrap die umschließende Zeile. Die Spaltengröße wird in diesen beide führenden Frameworks mit etwas unterschiedlichen Bezeichnungen definiert, die aber dasselbe bedeuten. Die Klassen für die Spalten geben an, wie viele der insgesamt zwölf Gitter-Einheiten darauf vereint werden. Und bis zu welcher Displaygröße dies gelten soll.

HTML-Code

<div class="row">
    <div class="medium-3 columns">
        Linke, kleine Spalte
    </div>
    <div class="medium-6 columns">
        Größere, mittlere Hauptspalte
    </div>
    <div class="medium-3 columns hide-for-small-down">
       Rechte Spalte, auf kleinen Displays unsichtbar
    </div>
</div>

Ausgabe

Linke, kleine Spalte
Größere, mittlere Hauptspalte
Rechte Spalte, auf kleinen Displays unsichtbar

Wie man sieht wurden die insgesamt 12 zur Verfügung stehenden Einheiten auf zwei gleich große Spalten links und rechts verteilt. Dazwischen eine größere Spalte, die sechs Einheiten umfasst. Der Präfix "medium" gibt in Foundation an, dass die Spaltenaufteilung nur bis zu mittlelgroßen Bildschirmdiagonalen aufrecht erhalten wird. Normalerweise stehen die Spalten dann bei kleineren Bildschirmen untereinander. Ein weiterer Klassenbezeichner (In diesem Foundation-Beispiel: hide-for-small-down) gibt hier an, dass die rechte Spalte für kleine Displays ausgeblendet werden kann.

Sie können das responsive Verhalten am PC-Bildschirm prüfen, indem Sie Ihr Browserfenser mit der Maus sehr schmal ziehen.

Weitere Aufgaben responsiver Webdesigns

Das hier gezeigte Codesegment zeigt bereits die grundsätzliche Arbeitsweise von Bootstrap, Foundation & Co. Selbstverständlich sind weitere Anpassungen an die jeweiligen Gegebenheiten der anzeigenden Geräte Teil der responsiven CSS-Frameworks. In der Praxis besonders wichtig ist die Möglichkeit, auf Handys kleinere Bilder anzuzeigen als am Rechner. Dies ist überaus sinnvoll, da man zum einen auf kleinen Mobiltelefonen gar keine großen Fotos benötigt. Zum anderen ist die Bandbreite, also die Übertragungsrate, im mobilen Internet oft sehr beschränkt. Durch die selektive Auslieferung unterschiedlicher Bildformate hilft der responsive Ansatz also auch, die Usererfahrung zu verbessern, da die Seiten zügiger aufgebaut werden.

Auch Google lässt folgerichtig die mobile Nutzbarkeit und Schnelligkeit von Webseiten mittlerweile in sein Ranking einfließen. Eine intensive Page Speed-Analyse und ggf. Performance-Verbesserungen sind daher heute Standard bei neu ins Netz gestellten, responsiven Webseiten.

Mein Service: responsiv, schnell & professionell

Ich programmiere Ihre HTML-Seiten schnell und zuverlässig mit einem der bekannten Frameworks, oder setze Sie mit einem responsiven Theme (z. B. für WordPress) um. Als Freelancer aus Hürth kann ich Ihr Projekt vor allem in der Region um Köln, Bonn und Brühl tatkräftig unterstützen oder komplett realisieren. Sprechen Sie mich einfach an oder nutzen Sie das Kontaktformular. Meine Stundensätze finden Sie auf der Seite Skills & Preise.