Zu Beginn gleich mal ein paar Fakten:

• Responsive Webdesign gibt es seit ca. 2008
• Das Web war mehr oder minder schon immer responsive – wir haben nur irgendwann begonnen es in feste Formen und fixe Größen zu zwängen

Unter Responsive Webdesign versteht man die Technik, Websites optimiert auf allen Geräten (Computer, Tablet, Smartphone) anzuzeigen.

Was ist anders / besonders an Responsive Webdesign?

Grob übersetzt bedeutet „Responsive Webdesign“ so etwas wie „reagierendes Webdesign“. Was meiner Meinung nach super zutrifft. Denn je nach „Endgerät“ auf dem man sich die Website ansieht, passt diese sich dem Endgerät entsprechend an.
Etwas technischer oder genauer: Content (Bilder & Text), Navigation und der strukturelle Aufbau der Website (Header, Content, Footer usw. … ) passen sich der Bildschirmauflösung des mobilen Endgerätes an.

Die Kernaussage lautet also:
„Responsive Webdesign passt sich dem Nutzer an, nicht der Nutzer dem Design.“

Das muss es auch tun, denn Statistiken und Trends zeigen ganz klar, dass die Nutzung mobiler Endgeräte zunimmt:

Mehr Statistiken finden Sie bei Statista

Hier mal ein paar Beispiel-Richtwerte, die ich bei meiner Arbeit nutze:

• 1280px + Desktop-PC, TV-Geräte
• 980px – 1280px Desktop-PC, Notebook, Tablet
• 760px – 979px Tablet
• 420px – 759px Tablet & Smartphones
• 419px – 100px Smartphones

Was ändert sich durch Responsive Webdesign für alle Beteiligten?

Webdesigner sowie Kunden werden zu einem Umdenken angeregt. Es tun sich sehr viele neue Möglichkeiten auf, die man so vorher nicht hatte.

Einmal eine gut durchdachte Responsive Website angelegt ist diese aktuell sowie in Zukunft geräteübergreifend nutzbar.

Bei Responsive Webdesign, gibt es einen Leitsatz, den man beachten sollte. Dieser lautet:
„Mobile first.“
Man kann also nicht mehr den klassischen Workflow durchgehen. Der Grafiker designed ein Layout, man zeigt das Layout dem Kunden, der Kunde segnet dieses Layout ab und Programmierer und Webdesigner setzen es 1:1 um.

Statt viele Layouts für die entsprechenden Endgeräte in Photoshop anzulegen, hat sich der Workflow insofern verändert, dass man direkt im Browser zu entwickeln beginnt, das Grundgerüst der Website „responsive“ hält und mit media queries alle weiteren, spezifischen Anpassungen vornimmt.

Kunden sowie Webdesigner müssen sich daran gewöhnen, dass sich eine Website erst nach und nach entwickelt. Zu Beginn eines Projektes ist es gar nicht möglich 100%ig genau sagen zu können, wie die Website am Schluss auf welchen Geräten genau aussehen wird.

Viele meinen, der Pflege- und Arbeitsaufwand wäre dadurch immens hoch und viel komplizierter geworden. Das ist aber nur dann der Fall, wenn es separate Mobile- und Desktopversionen gibt. Mit Responsive Webdesign umgeht man aber genau dieses Problem.

Ansonsten eröffnet sich eine Fülle an neuen Tools und Möglichkeiten, sowie der Spaß am Ausprobieren, was sich mit solch einer Responsive Website alles erreichen lässt.

Responsive Webdesign bedeutet gewissermaßen auf jedem Endgerät eine optimale Bedienung zu ermöglichen.

So viel zur Theorie, wo gibt es was zum anschauen?

Hier gibt es sehr viele Beispiele:
http://mediaqueri.es/

Oder aus unserer eigenen Feder:
wisy cms
med-visuals

Viel Spaß beim Browserfenster größer und kleiner ziehen oder beim Besuch mit Smartphone und Tablet! =)

---

Anmerkungen:

• Ältere Browser wie der Internet Explorer 8 können mit HTML5 und CSS3 nicht korrekt umgehen
• Websites sollten auf möglichst vielen Endgeräten und vielen Browsern getestet und angepasst werden, um die gewünschte Darstellung zu gewährleisten
• Planungsphasen sind ausgedehnter, da man sich ausgiebig Gedanken darüber machen muss, was auf welchem Gerät wie und wo angezeigt wird

Hat Ihnen der Artikel gefallen? Wir freuen uns über jede Empfehlung!