Responsive Webdesign vs Internet Explorer

Kaum zu glauben für Webworker, die diesen Job schon etwas länger machen, aber mit dem Internet Explorer (IE) 10 ist seit neuestem für Windows 8 (und angeblich ab Mitte November 2012 auch in einer angepassten Version für Windows 7) bereits die zweite Version des Microsoft-Browsers verfügbar, die halbwegs standardkonform arbeitet und damit auch aktuelle Webstandards wie HTML5 und CSS3 zumindest weitgehend unterstützt.

Das große Problem des IE bleiben jedoch seine „Altlasten“ – in „freier Wildbahn“ tummeln sich (je nach Zielgruppe einer Webseite) immer noch alte Versionen mit bestenfalls eingeschränkter Unterstützung für moderne Webtechnologien. Die zentrale CSS-Eigenschaft für Responsive Webdesign, @media-Queries, unterstützt z.B. noch nicht einmal der IE8, der derzeit sogar noch relativ weit verbreitet ist.

Es gibt mehrere (je nach Einsatzgebiet mehr oder weniger sinnvolle) Ansätze, dieser Problematik zu begegnen.

IE<9 ignorieren

Ein radikaler, in den meisten Fällen vermutlich (noch) wenig praxistauglicher Ansatz wäre natürlich, den IE<9 einfach zu ignorieren bzw. nicht gesondert zu bedienen. In der Praxis bedeutet das bei responsiven „mobile first“ Layouts in den meisten Fällen, dass der IE<9 dasselbe Design wie Low-End-Smartphones erhält – also üblicherweise ein linearisiertes Layout, das in den wenigsten Fällen gut aussehen, aber zumindest lesbar sein wird.

„legacy first“

Robuster und praxistauglicher, aber nicht unbedingt zukunftsorientiert ist es, responsive Designs nicht „mobile“ sondern „legacy first“ zu schreiben, also nicht allen Auflösungen gemeine Basisstyles mittels @media und min-width sukzessive zu erweitern, sondern zunächst ohne @media-Queries ein „Mittelweg-Layout“ zu gestalten, das auch die IE<9 erhalten und welches dann für kleinere (mittels max-width) und größere (min-width) Auflösungen abgewandelt wird.

Grundsätzlich funktioniert dieser Ansatz recht gut und kommt dem Workflow vieler Entwickler sogar entgegen, führt jedoch oft zu theoretisch (im Vergleich zu „mobile first“) redundanten CSS-Anweisungen, somit zu aufgeblähten Stylesheets und potenziellen Performance-Bremsen.

Separates IE-Stylesheet

Ein weiterer Trick ist es, den alten IE über conditional comments ein eigenes Stylesheet zuzuweisen, welches die für ein „Desktop-Layout“ notwendigen Styles enthält – aber eben nicht in @media-Queries „verpackt“.

Dieser Ansatz basiert auf der Annahme, dass diese Browser ohnehin nur auf Geräten verwendet werden, welche typische Desktop-Auflösungen bedienen. Ein weiterer Vorteil dieser Technik ist, dass man auch IE-spezifische Styles in dieses Stylesheet packen und somit im „normalen“ Stylesheet ein paar Zeilen einsparen kann.

Natürlich ist diese Methode denkbar aufwändig, allerdings lässt sich der Aufwand mit dem CSS-Präprozessor Sass (ab Version 3.2) deutlich vereinfachen, indem man beide Stylesheets aus den gleichen Sass-Partials erzeugen lässt. Alternativ kann man mit mehreren Stylesheets arbeiten, was jedoch aus Performance-Sicht nicht gerade optimal ist. Gleiches gilt bei der – ebenfalls denkbaren – Verwendung von conditional classes für IE-spezifische Styles im Haupt-Stylesheet.

Polyfill: Respond.js

Respond.js und ähnliche Skripte ermöglichen die Nutzung von @media-Queries auch im IE<9 (mit hoher Wahrscheinlichkeit auch in anderen Browsern, die @media-Queries nicht beherrschen) mittels Javascript. Man liefert also dem IE<9 das „normale“ responsive Stylesheet und bindet zusätzlich Respond.js ein, welches die fehlende @media-Unterstützung durch Javascript ersetzt.

Der offensichtliche Haken dabei ist natürlich, dass dieser Ansatz nur bei aktiviertem Javascript funktioniert. Zudem hat Respond.js leider einige Nachteile, allen voran die Tatsache, dass das Skript nur die @media-Bedingungen min-width und max-width unterstützt – was für die meisten Anwendungsfälle jedoch absolut ausreichen sollte. Schwerer wiegt die spürbare Auswirkung auf die Performance der Seite.

Was ist empfehlenswert?

Den IE<9 komplett zu ignorieren dürfte noch in den wenigsten Projekten gangbar sein. Von den verbleibenden Ansätzen fällt die Polyfill-Methode aufgrund der JS-Abhängigkeit ein wenig ab, ist jedoch nicht vollkommen indiskutabel. Ob man sich für „legacy first“ oder separate Stylesheets (oder auch eine der anderen Techniken) entscheidet, dürfte letztlich vor allem eine Frage der individuellen Arbeitsweise sein.