Responsive Webdesign – Eine Sammlung

Seit ein paar Wochen lese ich mir immer mal wieder Artikel zum Thema Responsive Webdesign durch. Erstens weil ich das Thema spannend finde und ich glaube, dass so die Zukunft von Webseitenlayout aussehen kann und zweitens weil ich gerade beruflich mit der Auslieferung mobiler Inhalte beschäftigt bin. Fangen wir doch einfach mal mit der Wikipedia-Definition an, bevor ich ein paar interessante Links aufliste, mit denen man sich in das Thema einarbeiten kann:

„Responsive Design bezeichnet eine Praxis im Webdesign, bei der der grafische Aufbau von Webseiten dynamisch und unter Berücksichtigung der Anforderungen des betrachtenden Gerätes erfolgt. Eine dafür wesentliche Voraussetzung sind Media Queries, also die Abfrage von Art und Eigenschaften des betrachtenden Gerätes. Eine Webseite wird somit auf einem großen Display anders dargestellt als auf einem Tablet-Computer/Tablet-PC oder Smartphone.“

Wir haben also Layout, die sich je nach Betrachter anpassen. Klingt ja fast so ein wenig wie die Heisenbergsche Unschärferelation. Wer zu dem Thema aber noch mehr wissen will, der sollte sich diese Links mal zu Gemühte führen:

• Boston Globe: Eine der ersten Zeitschriften, die den Schritt zum Repsonse Design gewagt haben und bei denen es auch gelungen ist. Schaut man sich die Seite zum Beispiel auf dem iPad an, so haben wir eine dreispaltige Seite wenn wir das Display Quer halten, bei Hochkant wird es zweispaltig.
• 50 Examples and Best Practices: Wer sich noch nicht so viel drunter vorstellen kann, kann hier 50 Beispiele sehen, wie es aussehen sollte. Sind echt schöne Sachen dabei und schon in der Zusammenfassung bekommt man ein gutes Gefühl darüber, wie das Prinzip funktioniert.
• Skeleton: Wenn man wirklich mal anfangen und eine Seite umsetzen will, kann man Skeleton, ein Boilerplate für Responsive Websites nutzen. Hatte selbst noch nicht die Zeit es zu testen und würde mich über Feedback freuen, aber sicherlich ist jede Open-Soruce-Lösung ein Gewinn.
• Grundlagen: Natürlich gibt es nicht nur englischsprachige Texte zu diesem Thema, nein die Kollegen von t3n haben sich auch die Mühe gemacht die Grundlagen zu erklären. Wichtig auch die weiterführenden Links am Ende, die auf weitere gute Seiten zeigen.
• Tutorial: Schönes englischsprachiges Tutorial (Danke an Alex für den Tipp).
• Alternativen: Wer sich nicht auf Responsive Webdesign festlegen will, der kann hier noch ein wenig über Alternativen lesen. Alles nur kurz angerissen, aber trotzdem erfährt man das nötigste, um dann selbst auf die Suche nach ausführlichen Artikel zu gehen.

So wie gesagt, heute eher die Verweise auf Fremdinhalte, aber da ich in dem Thema noch kein Experte bin, ist dass das beste was ich euch „antun“ kann. Alles andere wäre sicherlich auch nicht sinnvoll.