Codecandies

Das Weblog von Nico Brünjes.

Praxisprobleme des responsive webdesign

Wir wissen nun, wie man responsive Webdesign in der Praxis umsetzt und haben uns auch schon Gedanken über sich anpassende Inhalte für unterschiedliche Nutzungssituationen gemacht. Nun stellt sich natürlich die Frage, was noch fehlt, damit sich responsive Webdesign in der Praxis durchsetzt.

Zunächst mal begegnet man responsiven Lösungen ja eher im Bereich Agenturseiten, Blogs und Landingspages, vielleicht mal ein—zugegeben—großes Webdesign-Magazin, eher konservative Bereiche des Webs, also die großen Portale oder Newsseiten halten sich bis dato noch zurück. Einzig die Webseite des Boston Globe setzt voll auf responsives Design. Wo liegen also die Probleme?

Problem numero uno ist natürlich die mangelhafte Browserunterstützung. Wirklich große Webseiten haben sicherlich noch lange nicht alle die IE6-Unterstützung gedroppt. Javascripte die bei den alten Browsern nachhelfen gibt es, aber sie kommen in Hochlastumgebungen eher nicht in Frage. Und ebenso dort, wo Zugänglichkeit Vorraussetzung ist.

Unschön auch die Sachen mit den Bildern. Hier spielen zwei Faktoren einen Rolle: der Wunsch nach qualitativ hochwertigen Bildern und gleichzeitig soll bspw. dem iPhone-Nutzer eigentlich kein 1080p-Image zum Download zugemutet werden, wo es doch auf seinem Smartphone auf 300px herunterskaliert wird. Natürlich gibt es Lösungen, die entweder auf Javascript basieren oder auch auf CSS, aber gerade für CMS-basierte Seiten mit angeschlossener Bildverwaltung stellt es ein nicht triviales Problem dar, Bildobjekte entsprechend anders einzubetten, eine Einbettung via CSS Hintergrundbilders oder gar :before stellt eine unlösbare Aufgabe dar.

Der nächste große Blocker, ich wiederhole mich mit den Jahren, ist natürlich wieder Bannerwerbung. Bannerwerbung, mit ihrer kindischen Fixierung auf Pixelmaße, hat fluide Seiten genauso verhindert, wie sie jetzt dem responsiven Design im Wege stehen. Es ist aber auch viel verlangt, nach 10 Jahren haben sich die Bannerschrauber eben erst daran gewöhnt, dass Webseiten zentriert dargestellt werden wollen, nun wollen die doofen Seiten auch noch den ungenutzten Raum belegen, in der bisher nur Skyscraper und sticky ads herumlungerten. So kann man allenfalls auf Ads innerhalb des Contents hin- und her verschieben, bis sich die Werbung der Bildschirmgröße an (ohne den ganzen Bildschirm ausfüllen zu wollen), darauf werden wir weitere zehn Jahre warten müssen.

15 Kommentare zu “Praxisprobleme des responsive webdesign”

    1. Um nochmal auf die Problematik mit zu großen Bildern zu sprechen zu kommen:

      Wer wirklich will, der kann auch dieses Problem lösen. Ich würde beispielsweise eine dynamische Lösung vorschlagen, die serverseitig den User-Agent-Header ausliest und interpretiert. Entsprechend könnte dann beim Auftauchen des Worts „Mobile“ (iPhone, Android, BlackBerry, Windows Phone 7) ein kleineres Bild übertragen werden. Und das unter der gleichen URL.

      Mit den üblichen Caching-Mechanismen würde man das dann sogar noch schnell bekommen und alle wären glücklich. Hoffentlich.

    2. Hallo,

      wenn Du schreibst, dass sich responsives Webdesign erstmal durchsetzen muß und in Frage stellst ob dies überhaupt je passiert, so frage ich mich was die Alternative für all die mobilen Geräte sein soll!?

      Für mich ist es keine Frage ob es sich durchsetzt. Es ist eine zwangsläufige Notwendigkeit! Vielleicht fehlt mir aber auch nur der nötige Weitblick funktionierende Alternative zu erkennen?

      Beste Grüße aus dem Breisgau
      Alex

    3. @Paul: Öhm, ja, nee…

      … also schon wahr, mag sein, aber das ist dann ja kaum noch responsive webdesign sondern UA-Sniffing, wenn auch serverseitig. Kann man machen…

    4. @Paul

      Schau Dir mal diese Lösung an. Liest sich sehr gut und wird von mir in einem meiner aktuellen Projekte gerade erprobt.

      http://adaptive-images.com/

    5. Hi Alex,

      keine Frage, responsive webdesign ist eine gute Sache und soll sich um Himmels Willen auch durchsetzen.

      Die Alternative haben wir im Grunde ja schon und das sind die etlichen, veralteten sog. Mobilseiten, auf denen unter speziellen Adressen abgespeckte Versionen von Webseiten angeboten werden. Das funktioniert für mein altes Sony Ericsson Handy, aber eben nicht für mein iPhone, da kriegt Siri ja die Kretze.

      Ist also eine schlechte Alternative. Mir geht’s im Moment eher drum auszuloten und gerne auch Lösungen zu finden, für die Probleme, die bspw. eine große Website, wie die für die ich arbeite, schon hat oder bekommen wird, bei der Umsetzung von responsive Webdesign.

      Und noch zu Adaptive Images: kommt als PHP-Lösung bspw. für unser CMS nicht in Frage. Das ist aber wirklich nur ein Beispiel, ich selbst kenne die Lösung und habe sie auch schon an anderer Stelle eingesetzt.

    6. Ja, die Machbarkeit und/oder der resultierende Aufwand für große, redaktionelle Websites ist sicher eine Herausforderung für alle Beteiligten.

      Es bleibt also weiter spannend! 😉

    7. BTW, die Tablet-Website von ZEIT ONLINE verbindet UA-Sniffing und media queries, ein Riesenhack als Experiment, sozusagen…

    8. Ich denke schon das die Zeit reif ist auch große Projekte (online Zeitungen) responsive aufzubauen.

      @Browser Oldies
      Meiner Meinung nach muss hier nicht mit Javascript nachgeholfen werden wenn man von Beginn an auf mobile first setzt. Was spricht dagegen als Grundlayout eine fluide Seite zu gestalten welche dann auch z.B. alten IE’s oder Usern ohne Javascript/Cookies serviert wird?

      @Bilder
      Wie von Alex schon erwähnt gibt es hier schon einige Lösungsansätze wie zb. http://adaptive-images.com/ . Auch hier könnten wir wieder nach dem Ansatz mobile first gehen, geht das auslesen irgendwie schief wird einfach das kleinste Bild ausgeliefert. Natürlich ist das nicht von heute auf morgen für große Projekte umsetzbar, aber möglich ist es sicherlich.

      @responsive Advertising
      Boston Globe z.B. hat das wie ich finde sehr einfach gelöst indem sie nur mehr 300×250 Banner verwenden. Ein anderer Ansatz wäre zb. dieser von Mark Boulton. Das ist natürlich noch Zukunftsmusik aber ich denke in der Werbeindustrie wird hier ein umdenken stattfinden, wieder nicht von heute auf morgen, aber spätestens wenn große Onlinezeitungen den Wunsch danach äußern.

      Nichtsdestotrotz hast du mit deiner „Vorhersage“ das es noch 10 Jahre dauert bis dies in der breiten Masse angekommen ist als sehr wahrscheinlich, wenn man sich nur mal anschaut wieviele Onlinezeitungen noch auf Tabellen aufbauen, CMS Versionen benutzen die vor 5 – 10 Jahren aktuell waren …

    9. @Paul: Öhm, ja, nee…

      … also schon wahr, mag sein, aber das ist dann ja kaum noch responsive webdesign sondern UA-Sniffing, wenn auch serverseitig. Kann man machen…

      @Nico: Ich selbst würde diesen Weg ja nicht mit der Kneifzange anpassen. Damit legt man zumindest schon mal den Dosenöffner an die Büchse der Pandora. Jetzt würde mich aber interessieren, warum das deiner Meinung nach kein Responsive Webdesign ist.

    10. 🙂 Ich zitiere mal Wikipedia:

      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.

      User-Agent-Sniffing berücksichtigt nicht die Anforderungen des Gerätes, sondern nur das Gerät selbst. Fragen nach dem UA-String „mobile“ steuern zwar nicht direkt einzelne Geräte an, richten sich aber auch nicht nach den Fähigkeiten des Gerätes, sondern eben nur nachdem was jemand in den UA-String gehackt hat.

      Und so weiter…

    11. @Michael: danke für den Link, kommt auf die Leseliste für die Heimfahrt gleich.

      Nicht Javascript-Lösungen sind zwar eine schöne Idee, aber meine Erfahrung zeigt, dass man, vor allem wenn man mehrere tausend Zeilen CSS Code zu überwachen hat, nicht zu viele unterschiedliche Versionen von CSS verwalten will. Sauber konstruiert fällt vielleicht nicht mal zu viel zusätzliches CSS an, trotzdem muss immer in verschiedenen Fällen gedacht werden. Das erschwert die Fehlersuche wenn etwas kaputt ist, führt oft zu Mehrarbeit bei der Neuentwicklung und so fort. Ist sicherlich möglich, wird man sich aber im Vorfeld gut überlegen müssen. Beispiel aus der Praxis: wir haben immer best-practice-mäßig zusätzliche Stylesheets für bspw. IE6 unterhalten. Der Pflegeaufwand dafür war aber tatsächlich sehr groß, anstatt wie erwartet niedriger als mit Hacks…

      … in der Bilderfrage habe ich tatsächlich auch noch Hoffnung. Da würde ich mich ggf. sogar auf JS-Lösungen einlassen (die als Fallback dann tatsächlich skalierte Bilder anzeigen), da kann man ja kombinieren.

      Was die Ads angeht: nur Medium-Rectangles? Ich fürchte damit käme ich hier nicht durch… aber es lassen sich natürlich noch andere Formate integrieren. Der Trend geht jedoch gerade mehr in Richtung große Display-Ads. Ich bin aber auch bereits, die 10 Jahre ganz optimistisch auf 5 zu verkürzen. Obwohl man Ads ja immer noch mit document.write() einbaut… hust…

    12. Ähh… mensch Nico, fass Dich mal kurz! 😉

    13. @Nico: akzeptiert.

    14. Noch meinen Senf zu UA-Sniffing.

      In diesen Artikel wird z.B. schön beschrieben warum UA-Sniffing des Teufels ist.

      Ich z.b. verwende manchmal ein Android Tablet und es passiert mir nicht selten, das Webseiten denken ich wäre ein ipad und mir ein Popup vor die Nase knallen, ich sollte doch die ipad App installieren.

      Das nervt noch weit mehr als Webseiten die mir die normale „Desktopversion“ zeigen.