Mobiloptimierung - Responsive Design Webseiten

Die Größe und Auflösung der Displays auf Laptops, Desktop-PCs, Tablets, Smartphones, E-Book-Readern und Fernsehgeräten können erheblich variieren. Aus diesem Grund sind das Erscheinungsbild und die Bedienung einer Website stark abhängig vom Endgerät. Für Grafiker liegt eine Herausforderung in der konzeptionellen Abgrenzung zu klassischem Printdesign: Wo es einst noch gewohnt und gelernt war, dass das Ausgabemedium eine bestimmte und unveränderbare Größe hatte, muss nun akzeptiert werden, dass starre Gestaltungen für eine Website nicht mehr übertragbar sind.[1]

Websites, die mit einem reaktionsfähigen Design ausgestattet sind, berücksichtigen die unterschiedlichen Anforderungen der Endgeräte. Ziel dieser Praxis ist, dass Websites ihre Darstellung so anpassen, dass sie sich jedem Betrachter so übersichtlich und benutzerfreundlich wie möglich präsentieren. Kriterium für das angepasste Erscheinungsbild sind neben der Größe des Anzeigegerätes beispielsweise verfügbare Eingabemethoden (Touchscreen, Maus) oder die Bandbreite der Internetverbindung.

Vor allem Blockelemente müssen unterschiedlich behandelt werden: Nutzt das Gestaltungsraster mehrere Spalten, können die Blöcke variabel an die Breite des jeweiligen Viewports angepasst werden, bei kleinen Auflösungen, wenn eine Darstellung nebeneinander nicht mehr passt, untereinander verschoben oder alternativ positioniert werden. Bilder sollten maximal auf ihr umgebendes Element – aber grundsätzlich nicht über ihre native Größe – skaliert werden. Texturen für Hintergründe können versteckt überfließen. Hintergründe mit Motiv werden bei kleinen Darstellungen auch weggelassen. Logos können wie Bilder verkleinert oder bei großen und detailreichen Grafiken durch ein kleineres Signet ersetzt werden. Vertikale Menüleisten brauchen oft viel Breite und können als Liste umpositioniert, zusätzlich eingeklappt und erst auf Klick, dann oft auf das Hamburger-Menü-Icon, oder Scrollposition eingeblendet werden.


Das Inlineelement „Text“ darf nur wenig kleiner skaliert werden, um die Lesbarkeit zu erhalten. Da Text aber automatisch umbricht, ist eine spezielle Anpassung nicht nötig. Abgrenzung zur mobilen Webseite. Umgangssprachlich gilt eine Website i. A. bereits als responsiv, wenn sie Breakpoints nutzt, zum Beispiel um Navigationsmenüs zu verkleinern - auch wenn sie ansonsten nicht nur responsive, sondern ganz oder teilweise adaptive oder liquide Techniken einsetzt (s. u.). Der wesentliche Unterschied zu einer mobilen Webseite besteht dabei in der Anzahl der Templates. Aus historischer Sicht bildet die Desktop-Version die normale Ansicht der Website. Dieser wird nach der klassischen Methode ein zusätzliches, unabhängiges Template für mobile Endgeräte hinzugefügt. Beim Responsive Webdesign dagegen wird nur eine einzige Version der Website erstellt. Diese passt sich selbstständig der verfügbaren Umgebung an. Besonders sichtbar wird dies beim Layout, das sich nach Breite des Browser-Fensters entsprechend verändert.
Abgrenzung zu einer adaptiven Website

Auch der grafische Aufbau einer adaptiven Website richtet sich nach dem Viewport des jeweiligen Endgeräts.[2] Dabei beschränkt man sich jedoch auf eine feste Anzahl von Breakpoints zwischen denen das Layout jeweils statisch bleibt. Eine fluide Anpassung an alle Auflösungen wie beim Responsive Webdesign findet nicht statt. Abgrenzung zu einer liquiden Website[Bearbeiten | Quelltext bearbeiten]

Im Gegensatz zur adaptiven Website wird bei einem liquiden Layout der zur Verfügung stehende Platz immer im gleichen prozentualen Verhältnis genutzt. Verändert man beispielsweise bei einer liquiden Website auf einem Desktop-PC die Breite des Browserfensters, so fließen die Inhalte zwar schmaler, da aber ein rein liquides Layout keine Breakpoints besitzt, bleibt die Anordnung der Layoutelemente dabei unverändert.
Zusammenfassend kann ein Responsive Webdesign deshalb als eine adaptive Reihe verschiedener liquider Layouts charakterisiert werden.[3]

Weitere Blogbeiträge:

     Made in Germany

    Tracking Pixel