Mit diesem Artikel beginne ich nun auch mal eine recht kritische Reihe zum Thema Webentwicklung. Nicht nur, dass ich dabei einige innovative Techniken vorstellen möchte. Es ist auch ein Hilferuf an alle, die sich mit ähnlichen Problemen herumschlagen müssen. Als erstes möchte ich mich einmal mit den Problemen des noch relativ neuen Phänomens “Responsive Design” auseinandersetzen.
Eine meiner Webseiten hat vor kurzem die 15-Prozent-Marke überschritten, wenn es um die mobile Nutzung auf Smartphones und Tablets geht. Vor allen Dingen das Apple iPad und iPhone werden besonders häufig genutzt, was auch nicht verwunderlich ist. Deshalb ist es Zeit, endlich auch über mobile Versionen der Webseite nachzudenken. Da Browserweichen nicht immer zuverlässig funktionieren und auch der Programmieraufwand deutlich steigt, wenn man drei Versionen der Webseite programmiert, kommt die noch relativ neue Technik “Responsive Design” in Frage.
Was ist Responsive Design überhaupt?
Ich bin erst vor kurzem auf diese Technologie gestoßen, setze sie aber bereits auf dieser Seite ein. Responsive Design geht auf einen Artikel von Ethan Marcotte auf A List Apart zurück. Dabei wird das Webdesign nur einmalig – beispielsweise für den Desktop-Browser – programmiert und mithilfe von CSS3 Media Queries abhängig von der verwendeten Bildschirmgröße ausgegeben. Da es inzwischen auch Lösungen gibt, HTML5 und CSS3 auch auf älteren Browsern zum Laufen zu bringen, ist die neue Technik derzeit in aller Munde. Hier mal einige Beispiele.
Da Bilder bei dieser Technologie lediglich optisch verkleinert und so manche Inhalte einfach versteckt werden, kann dies jedoch insbesondere auf Smartphones zu Performance-Einbußen führen. Auch dafür gibt es inzwischen eine Lösung: die “Mobile First”-Strategie. Man beschränkt sich auf das Wesentliche und programmiert zuerst für das kleinste Display und fügt auch kleinere Bilder ein. Mit ein bisschen JavaScript werden dann die größeren Inhalte beim Wechsel des Geräts nachgeladen.
Ob dies in der heutigen Zeit wirklich noch erforderlich ist, muss jeder für sich selbst entscheiden. Meiner Meinung nach haben die meisten Anwender inzwischen ein Smartphone mit einem leistungsstarken Prozessor, der locker jede Verkleinerung schafft. Das Argument mit den Ladezeiten trifft nur noch auf die wenigen Gebiete zu, die keinen UMTS-Empfang gewährleisten. Und da wir inzwischen fast alle eine Internet-Flat für unser Handy gebucht haben, sollten auch die Datenmengen kein Problem sein. Zumal ja ohne mobile Version der Seite auf jedem Smartphone die Desktop-Version angezeigt wird, die sich auch nicht an mobile Ladezeiten hält.
…und wo liegt das Problem?
Soweit klingt die Technologie ja eigentlich ganz spannend – und viele Vorurteile konnten bis jetzt vielleicht schon ausgeräumt werden. Es klingt fast schon zu schön um wahr zu sein: Nur noch eine Version für alle Geräte programmieren und dazu auch gänzlich auf Browserweichen verzichten. Doch jede Medaille hat auch ihre Kehrseite. Im Falle vom Responsive Design tritt die dunkle Seite der Macht besonders dann zutage, wenn es um das Monetarisieren des Webauftritts geht.
Auch auf mirkoschubert.de wird Werbung auf mobilen Geräten einfach abgeschnitten.
Egal, ob ich bei der Desktop- oder Smartphone-Version beginne, die Werbung hat immer eine feste Größe. Auch hier auf mirkoschubert.de findest Du AdSense-Werbung im Fullbanner-Format. Die Tablet-Version ist auch kein Problem, da die Breite der Webseite ja selten unter 768 Pixel fällt. Anders sieht es in der Smartphone-Version aus: In einigen Fällen würde ein Fullbanner bei einer Display-Breite von 480 Pixeln im Hochformat noch gehen. Doch selbst das iPhone 4 oder 4S mit vermeintlichen 960 mal 640 Pixeln bietet eine Standard-Breite von 320 Pixeln an, da das “Retina Display” bei einer höheren Auflösung ja nur an “Schärfe” gewinnt.
Zurück zur mobilen Version?
Normalerweise würde ich in diesem Fall einfach den Fullbanner verstecken und einen verdeckten Halfbanner freischalten, der bei dieser Breite auch vollständig angezeigt wird. Schlimmstenfalls würde ich in dieser Version gar keine Werbung anzeigen lassen. Oder den Code per JavaScript asynchron austauschen. Doch alle drei Lösungsansätze verstoßen gegen die Richtlinien von Google AdSense (und im übrigen auch vieler Affiliate-Netze) und sind deshalb sinnlos.
So sinnlos, dass ich schon wieder überlege, drei Versionen zu programmieren und lediglich Hoch- und Querformat responsive zu gestalten. Denn bei den Werbetreibenden scheint die neue Technik noch nicht angekommen zu sein, und das obwohl selbst Firmen wie Sony, Cisco oder Ubuntu erste Microsites damit ausstatten.
Wie siehst Du die Entwicklung des so genannten Responsive Designs? Diskutiere mit mir über mögliche Lösungsansätze in den Kommentaren. Und für diejenigen, die sich nicht mit diesem Thema befasst haben: Was haltet Ihr von Werbung auf mobilen Webseiten?