Facebook
Twitter
Google+
Kommentare
4
Willkommen bei "the web hates me". Mittlerweile hat unser Team ein tolles neues Monitoringtool für Agenturen gelauncht. Unter dem Namen koality.io haben wir einen Service geschaffen, der er Agenturen ermöglicht mit sehr geringen Kosten alle Ihre Webseiten zu überwachen.

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.

Über den Autor

Nils Langner

Nils Langner ist der Gründer von "the web hates me" und auch der Hauptautor. Im wahren Leben leitet er das Qualitätsmanagementteam im Gruner+Jahr-Digitalbereich und ist somit für Seiten wie stern.de, eltern.de und gala.de aus Qualitätssicht verantwortlich. Nils schreibt seit den Anfängen von phphatesme, welches er ebenfalls gegründet hat, nicht nur für diverse Blogs, sondern auch für Fachmagazine, wie das PHP Magazin, die t3n, die c't oder die iX. Nebenbei ist er noch ein gern gesehener Sprecher auf Konferenzen. Herr Langner schreibt die Texte über sich gerne in der dritten Form.
Kommentare

4 Comments

  1. Ich bin kein Experte in dem Gebiet, aber habe schon des öfteren Erfahrungen gesammelt, diese sind nicht allzu positiv.

    Fest steht, dass sich dieses Design nicht wirklich im Nachhinein umsetzten lässt. Ein bestehendes, vielleicht sogar veraltetes, Design zu überarbeiten ist enorm aufwendig und erfordert neben Media-Querys (mittels CSS) auch Anpassungen von JavaScripten usw. (Einbindung von Videos …). Diese JavaScripte und deren Animationen, bspw. über jQuery, laufen auch nicht unbedingt 1:1 wie im Browser. Ich habe auch festgestellt, dass das gleiche Gerät (iphone 4) mit gleichem Betriebssystem unterschiedlich darstellt (Animationen, Styles) oder anders reagiert (landscape etc.). Das ganze zu optimieren ist schwierig und aufwendig, gerade bei der Variante des „einfachen Relaunches“, da man das bestehende Design genau kennen muss. Wie auch in dem t3n Artikel angesprochen fehlt auch die Bildoptimierung, was bei meinem Projekt ein echten Problem darstellte. Es gibt auch wie dort angesprochen Lösungen (http://t3n.de/news/responsive-webdesign-adaptive-images-optimiert-bilder-328892/), aber die sind auch nicht immer einsetzbar.

    Auf der anderen Seite kann man so easy eine „Fake“-App erstellen, was durchaus mit einfachen Designs und Inhalten machbar ist. Ich würde aber eine mobile Variante (vereinfachte Originalseite) bevorzugen (Bsp. http://heise-online.mobi/).

    Vielleicht noch zum Testen des Design: Ich möchte mir demnächst den Opera Mobile Emulator vornehmen – soll wohl der Geheimtipp sein (?)

    Reply

Leave a Comment.

Link erfolgreich vorgeschlagen.

Vielen Dank, dass du einen Link vorgeschlagen hast. Wir werden ihn sobald wie möglich prüfen. Schließen