Responsive Web-Design – Worum bitte geht’s?!

In letzter Zeit ging ein Raunen durch die Massen, wenn von responsive Web-Design die Rede war. Offenbar liefert es die Antwort auf die Design-Herausforderungen der sich pausenlos verändernden mobilen Kommunikationsgeräte. Das Thema der ‘National Small Business Week’ 2014 war „Making it big: Small Biz Succes in a Mobile World“  – Wachsen: Der Erfolg kleiner Unternehmen in der mobilen Welt mit besonderem Fokus auf den Wachstumsanspruch.

01_responsive-web-design

Architektonische Ursprünge

Ethan Marcotte veröffentlichte bereits 2010 einen bahnbrechenden Artikel über responsive Web-Design, in dem er die Hauptproblematiken damaliger Web-Designer definiert: wie man außerhalb des Laptop-Bildschirms denkt, wenn man für eine Vielzahl von Geräten designt. Er diskutiert die Architektur – strukturell gesehen – und betont wie ein strukturelles Fundament die Grundlage von ‘responsive Design’ definiert, welche dann den Rahmen vorgibt, die Formen der ‘Fassade’ und so weiter. Jeder Schritt wird durch den vorangegangenen definiert.

Aber was, wenn sich, wie in den aktuellsten Architekturtrends, eine Struktur anpassen könnte? Was, wenn Fenster farbbasiert auf Grenzwerte reagieren? Was, wenn das Raumklima über die Dichte, also quasi über die Anzahl der Leute im Raum, gesteuert wird? Genau darüber zerbrechen sich Architekten heute den Kopf – also, warum diese Fragen  – so Marcotte – nicht auch auf Web-Design übertragen?

Vorausgesetzt eine Webpage „wüsste“, auf welcher Art von Gerät sie im Augenblick verwendet wird und könnte sich so intuitiv an die Größe des Screens anpassen, inklusive Bildauflösung, Layout und Formatierung. Beeindruckt? Und das ist die Kernaufgabe von ‘responsive Web-Design’.

Die Sprache von ‘Responsive Design’

Marcottes Artikel erwähnt eine Reihe von grundlegenden Termini, die man kennen sollte.

Fluid Grids. Fließendes Raster. Fließend – Es passt sich also seinen vorgegebenen Grenzen an. Das Design wird sich fortlaufend an seine Umgebung anpassen, egal welche Bildschirmgröße gerade gefordert ist. Mit einem fließenden Raster gibt es keinen verwaisten Text, keine bizarren Umbrüche, keine unschöne Bildplatzierung oder ungewolltes Stapeln.

Layout agnostic. Ein plattformübergreifendes Layout-Design funktioniert, ohne dass es im Voraus weiß, welches Gerät, welche Auflösung oder welche Bildschirmgröße gefordert wird.

Media Queries. Medien-Abfragen. Eine Medien-Abfrage erlaubt die Identifikation des Gerätes, für welche das Design berechnet werden soll und kann spezifische Abfragen über das Gerät und seinen physikalischen Charakter machen. Wenn eine Abfrage eine Benutzeranfrage von einem iPhone (480 x 480 Pixel Auflösung) feststellt, wird die angemessene Größe und Auflösung dargestellt. Medienabfragen, so Marcotte, sind nicht auf Links beschränkt. Sie können ebenso ins CSS (Cascading Style Sheets) eingearbeitet werden.

Die neue Art zu denken

Beispiel: Boston Globe

‘Responsive Web-Design’ ist in erster Linie eine neue Denkweise. Es erlaubt eine Entfernung von dem Flickwerk aus schlecht verbundenen und schwer zu übersetzenden Templates, die auf einem schon existierenden Design basieren.

Wie Marcotte es 2010 in seinem Artikel voraussagt, wird die Anzahl der Nutzer steigen – potenzielle Kunden schauen sich Websites von mobilen Geräten aus an, eher sogar als vom Computer oder Laptop daheim. Das bedeutet, dass ‘responsive Design’ nicht nur die beste Lösung für dieses Problem ist, sondern auch eine zukunftsfähige und anpassungsfähige Antwort bietet.

Ist deine Website schon ‘responsive’?

Ähnliche Artikel

Attraktive Online-Trends aus 2015 – 4 Favoriten

Attraktive Online-Trends aus 2015 – 4 Favoriten

Jedes Jahr kommen und gehen etliche Trends – das ist nicht nur beim Web-Design der Fall, auch wenn es uns da natürlich am meisten interessiert. In den vergangenen Monaten ist die Zahl der Video-Hintergründe, geteilten Screen-Designs oder animierten Storybooks rapide gestiegen. Responsive Web-Design, ein Trend, der bis in das Jahr 2010 zurückgeht, schreibt unzweifelhaft nicht nur…

Seid dabei

Liebe Designer, seht euch unsere aktuellen Wettbewerbe an, reicht eure Designs ein und gewinnt!