Responsive Layouts im Trend! – Immer häufiger werden mobile Endgeräte wie Smartphones und Tablets zur Nutzung des Internet verwendet. Webmaster und Web Designer stehen dadurch vor neuen Herausforderungen: So haben diese Geräte kleinere und anders dimensionierte Bildschirme als Desktops oder Notebooks. Herkömmlich designte Websites führen dort schnell zu Problemen bei der Lesbarkeit und der Darstellung, etwa wenn Teile der Seite bei statischen Layouts über den Bildschirmrand hinausragen. Auch die Bedienung über Touchscreens erfordert andere Herangehensweisen beim Design der Benutzeroberfläche.

Responsive LayoutsResponsive Layouts sind eine moderne Lösung für diese Situation. Die Technik, mit der diese Layouts realisiert wird, nennt sich Responsive Web Design und basiert auf den neuesten Webstandards HTML5 und CSS3. Diese erlauben es, viele Eigenschaften der Geräte wie die Bildschirmgrösse einfach abzufragen und die Darstellung der Websites daran anzupassen. So entstehen durch diese neue Technik des Web Design dynamische Websites, die auf jedem Gerät anders aussehen können.

Wie Responsive Layouts funktionieren

Responsive Layouts funktionieren nach einem einfachen Prinzip: Bei jedem Element einer Website, also etwa einem Menü, einem Button oder einem Textfeld, können Eigenschaften wie Bildschirmgrösse, Auflösung und Eingabeform abgefragt und abhängig davon die Darstellung geändert werden. Die Technik dazu nennt sich Media Queries und ist in CSS3 implementiert.

Dies ist besonders dann hilfreich, wenn das Element auf kleinen Displays anders dargestellt werden soll als auf grossen Desktop-Bildschirmen. Eine Sidebar, die bei breiten Bildschirmen problemlos neben dem Haupttextfeld dargestellt werden kann, sieht oft auf einem Smartphone-Bildschirm besser aus, wenn sie oberhalb oder unterhalb des Textes ausgegeben wird.

Auch können bei kleinen Bildschirmen Elemente ganz weggelassen werden, wenn sie für die Funktion und den Informationswert der Seite nicht wichtig sind. Umgekehrt können bei sehr grossen Bildschirmen, etwa bei internetfähigen Fernsehern, neue Elemente zur Seite hinzugefügt werden. Weiterhin kann das Layout auch an die verschiedenen Bildschirmausrichtungen bei Smartphones und Tablets, also Hoch- und Querformat (Portrait bzw. Landscape) angepasst werden.

Responsive Layouts und Mobile First

Wichtig ist bei Responsive Layouts, dass der Browser des Endgerätes mit den aktuellen Webstandards kompatibel ist. Dies ist bei älteren Smartphones oft nicht der Fall, während PC- und Notebook-Browser oft aktualisiert werden und neuere Versionen Responsive Layouts problemlos unterstützen.

Daher hat es sich im Web Design eingebürgert, dass die Standardversion der Website für kleine Bildschirme optimiert wird. Dieser Ansatz wird Mobile First genannt. Bei grösseren Bildschirmen werden die Elemente der Website vergrössert oder neue Elemente hinzugefügt.

Auswirkungen

Mobile First - Responsive LayoutsHeute haben sich Responsive Layouts allgemein im Web Design durchgesetzt. Viele Content-Management-Systeme wie WordPress bieten Themes an, die den Grundsätzen des Responsive Design entsprechen. Auch Grid-Systeme, bei denen der Bildschirm in kleine Rechtecke gleicher Grösse eingeteilt wird und die Elemente in diesem Raster frei verschoben werden können, vereinfachen die Erstellung eines Responsive Layouts.

Responsive Layouts haben das Web Design revolutioniert, da sie eine detaillierte Anpassung des Layouts an die Endgeräte erlauben. Browserweichen, die eine Desktop-Version und eine Mobil-Version der Website auslieferten, sind so fast völlig verdrängt worden. Mit Responsive Design kann überall eine ansprechende Darstellung und gute Bedienbarkeit gewährleistet werden. In Zeiten, in denen die Vielfalt an internetfähigen Endgeräten immer grösser wird, ist dies ein entscheidender Vorteil.

Die Webagentur Falki Design hat sich vor allem bei E-Shops dem Responsive Layout zugewendet und verwendet für Onlineshop Lösungen ausschliesslich Responsive WordPress Themes!