Ältere Internet Explorer in einem responsive, mobile-first Webdesign unterstützen (ohne JavaScript)

Die älteren Internet Explorer Versionen 6-8 unterstützen leider nicht die für ein responsive Webdesign benötigten Media Queries. Da diese Browser-Versionen allerdings immer noch recht weit verbreitet sind, bleibt zumindest eine Unterstützung der IE-Versionen 7 und 8 bei der Entwicklung eines neuen Webdesigns leider meist weiterhin nötig. Ganz besonders bei der Umsetzung eines mobile-first, responsive Webdesigns wird das Problem der nicht unterstützten Media Queries deutlich, denn hier bildet die kleinste Layout-Version für Smartphones das Standard-Layout. Da die älteren Internet Explorer alle Angaben innerhalb der Media Queries ignorieren, bleibt das kleinste Layout in diesen Browsern also auch auf großen Bildschirmen bestehen (was natürlich in den seltensten Fällen gewünscht ist). Um eine JavaScript-abhängige Lösung (z.B. mit dem respond.js Script) zu vermeiden, kann man Conditional Comments für die entsprechenden Internet Explorer-Versionen einbinden und das Webdesign dann mit Hilfe zusätzlicher CSS-Eigenschaften im Stylesheet allein mit CSS für die alten IEs optimieren.

„Leaving old Internet Explorer behind“

Den Ansatz, eine JavaScript-freie Lösung für die Unterstützung älterer Internet Explorer in einem mobile-first Webdesign zu finden, habe ich im Artikel „Leaving old Internet Explorer behind“ entdeckt. Die Idee hat mich überzeugt, da sie eine simple und praktische Alternative zur Verwendung von JavaScripts bietet.

Und so funktioniert die Umsetzung:

1. Conditional Comments

Glücklicherweise kann man für die älteren Internet Explorer-Versionen Conditional Comments einbinden. Mit Hilfe dieser praktischen Funktion, hat man die Möglichkeit extra CSS-Klassen zu zuweisen, wenn ein älterer Internet Explorer Browser im Einsatz ist. Die Conditional Comments werden innerhalb des head-tags (in einem WordPress-Theme also in der header.php Datei) eingefügt.

Du kannst entweder eine gemeinsame CSS-Klasse (.ie) für alle älteren Browser-Versionen einfügen:

<!--[if lte IE 8]><html class="ie"><![endif]-->

Oder die einzenen Internet Explorer-Versionen separat ansprechen:

<!--[if lt IE 7]><html class="ie6"><![endif]-->
<!--[if IE 7]><html class="ie7"><![endif]-->
<!--[if IE 8]><html class="ie8"><![endif]-->

„lte“ steht hier für „gleich oder kleiner als“, „lt“ für „kleiner als“. Im Beitrag „About Conditional Comments“ auf der msdn-Webseite findest du eine ausführliche Übersicht zur Verwendung von Conditional Comments für ältere Internet Explorer Browser.

2. Die zusätzliche CSS-Klasse

Um die Unterstützung ältere Internet Explorer in einem responsive, mobile-first Webdesign nicht unnötig kompliziert zu machen, reicht in den meisten Fällen eine gemeinsame CSS-Klasse z.B. .ie für alle älteren IEs aus.

.ie #container {
	width:980px;
}

Bevor die Media Queries für das responsive Layout in deinem Stylesheet beginnen, kannst du jetzt also alle benötigten .ie Styles integrieren, um das Webdesign auch in den älternen Internet Explorern anständig aussehen zu lassen.

Damit das eigentlich für kleine Smartphone-Bildschirme angelegte Layout eines mobile-first Webdesigns nicht über die komplette Bildschirm-Größe gestretched wird, solltest du dem Layout also als erstes eine maximale Gesamtbreite in Pixel zuweisen (z.B. width: 980px für die CSS-Klasse .container).

Je nachdem, was für einen Layout-Aufbau dein Webdesign hat, kannst du jetzt eine Gesamtbreite für deinen Contentbereich und eine Gesamtbreite für eine eventuelle Sidebar hinzufügen. Die benötigten float-Werte musst du natürlich auch noch hinzufügen. Wenn es das Layout deines Webdesign erlaubt, kannst du auch überlegen, ob du für die älteren Internet Explorer-Versionen eine vereinfachte, vielleicht einspaltige Webdesign-Version beibehältst. Auf diese Weise müssen nicht unnötig viele zusätzliche CSS-Eigenschaften extra für die alten IEs im Stylesheet addiert werden.

Es kommt wohl immer ein wenig auf den individuellen Webseiten-Aufbau an, in wie weit man das Layout für die alten IEs vereinfachen kann, um so die Größe des Stylesheets möglichst gering zu halten. Aus meiner eigenen Erfahrung sollte man die Ansicht möglichst oft live testen oder einen IE Test-Browser (z.B. IE NetRenderer oder IETester) zum Testen des Layouts einsetzen. Hilfreiche Tipps für deine Browsertests findest du auch noch im Artikel „Webseiten Cross-Browsertests: Ein kleiner Überblick praktischer Tools und Tipps“.

Wie gefällt dir diese Alternative?

Meiner Ansicht nach ist die Lösung, mit Hilfe von Condtional Comments die älteren IE Browser anzusprechen und so eine Media Queries unabhängige Layout-Version für diese Browser zu erstellen, eine praktische Alternative, um auf aufwendigere JavaScripts verzichten zu können. Wie gefällt dir diese Alternative und hast du weitere Lösungen für die Unterstüztung der älternen Internet Explorer 6-8 in einem responsive Webdesign? Über dein Feedback und deine Tipps freue ich mich sehr!

  1. Ein sehr toller Ansatz, an den ich ehrlich gesagt noch nie wirklich dachte. Ich werde das bei meinem nächsten Projekt direkt austesten.

  2. Ich habe meine Seite (benutze das Ari-Theme – allerdings etwas breiter als die Vorlage) auch auf diese Weise für die IE-Versionen angepasst – für jeden IE separat bis zur Version 5.5 – man weiß ja nie ;-). Für die ganz alten Versionen 5 und 6 empfehle ich u.U. das Design abzuspecken auf maximal zwei Spalten, falls die Desktop-Ansicht sehr breit ist. Also eine Sidebar ausblenden. Denn meine Vermutung ist, dass jemand, der diese alten Dinger noch nutzt, eh keinen 20“-Bildschirm verwendet.

    Der Aufwand ist, wenn man CSS ein wenig beherrscht, überschaubar. Muss man i.d.R. ja auch nur einmalig machen. Nutze zum Test den im Artikel erwähnten IE NetRenderer. Mit dem Resultat bin ich zufrieden.

  3. Solange ich mit (m)einer Seite nichts verdiene, sehe ich mittlerweile nicht mehr ein, die Seite auf jeden noch so uralten Browser anzupassen. Da würde ich es eher vorziehen, dass der Besucher einen dicken Hinweis erhält, wenn er die Seite aufruft:

    „Sehr geehrter Besucher, dein Browser stammt aus dem letzten Jahrhundert. Bitte aktualisiere dein Walross auf Internet Explorer Version 8 oder höher oder nutze einen anderen aktuellen Browser. Du tust es auch deiner eigenen Sicherheit wegen.“

    • Ich bin genau deiner Meinung. Ich war auch schon nahe dran einen Hinweis einzubinden.
      Leider ist es aber so, dass nicht jeder User einen Browser installieren kann (Fehlende Adminrechte auf Firmenrechner, etc.).
      Jeder 3te PC hat noch XP und somit meist IE8 drauf.
      Deswegen kamen mir diese 2 Zeilen sehr gelegen.

  4. Der damit verbundene Arbeitsaufwand für diese Browser kann allerdings auch exponentiell in die Höhe schießen, wenn das Design aufwändiger ist als bspw. ein Blogdesign. Die Frage ist dann, ob es sich für derart alte Browser(versionen) wirtschaftlich überhaupt rechnet. Denn wozu soll man eine responsives Design für den IE6 anbieten, wenn dies im Normalfall auf keinem der relevanten mobilen Endgeräte vertreten ist.

    • Geht ja nicht darum, dem IE6 ein „responsive Design aufzudrücken“ – funktioniert ja eh nicht. Es geht vielmehr darum, die Darstellung in alten IE-Versionen halbwegs erträglich erscheinen zu lassen. Ob da nicht ein Hinweis (siehe Kommentar von Marek) sinnvoller ist, den Browser zu aktualisieren, ist die andere Frage. Viele Internetnutzer kennen die Problematik „alter“ Browser nicht bzw. wissen gar nicht, wie man ihn aktualisiert bzw. einen anderen runterlädt. Ist ein wenig Ansichtssache, wie man das handhabt.
      Habe schon Websites gesehen, die eine „ungestylte“ Version für IE6 und kleiner anbieten – verbunden mit dem Hinweis, dass der Browser zu alt ist. Die Seite ist dann funktionsfähig aber komplett ohne Schnickschnack. Ist eine Art Mittelweg…

  5. hmm finde ich nicht schlimm den ich kenne kein Tablet oder Smartphone das den IE6-8 nutzt von daher ist das gar nicht notwenidig^^

  6. Ich sehe keinen Nutzen darin, den IE < 9 ein Responsive Design zu verpassen.

    • Ich glaube, der Artikel soll auch etwas anderes aussagen ;-) Oder ich verstehe es falsch… Dass von den IE’s nur der 9er responsive beherrscht ist klar. Es soll aber doch verhindert werden, dass das Layout bei „mobile-first“ im IE „gestret­ched“ wird. Um das zu verhindern, muss man dem IE < 9 quasi ein separates CSS zuweisen.

      Alternativ könnte man für den IE (oder auch für jede IE-Version separat) eigene Stylesheet-Dateien hinterlegen. Diese werden dann ebenso wie die conditional comments inner­halb des head-tags (header.php) eingefügt.

    • @Webstandard-Blog, @Sven, @Marcel: Ja, das stimmt natürlich, doch bei einem mobile-first, responsive Webdesign wird es meiner Ansicht in den meisten Fällen nötig. Denn sonst bekommt man die kleinste Layout-Version des Smartphones auf älteren IEs über die komplette Bildschirmgröße gestrechted.

      Bei responsive Webdesigns mit einem sehr extrem Standard-Layout wird eine etwas schmalere Version für ältere IEs vielleicht auch interessant, so dass man das Webdesign zumindest für eine von Bildschirmauflösung von 1024px optimiert. Klar kommt das auch immer etwas auf das Projekt an, wie weit man mit der Unterstützung von alten IEs gehen muss. Gerade daher finde ich diese einfache Lösung mit Conditional Comments und extra CSS eine praktische Alternative, so bleibt das ganze meiner Ansicht nach in einem angebrachten Rahmen.

      Viele Grüße,
      Ellen

      • @Thorsten: ich lese gerade das Responsive Web Design von A Book Apart. Und da ich weiss, dass es ab IE8 abwärts mit dem Responsive Design nicht wirklich habe ich mir folgendes überlegt: Ich nehme mir das „Fluid Grid“ von 960.gs und mache es erstmals mit Media Queries zu einem responsiven Layout.

        Mit einem zweiten IE Stylesheet (und Conditional Tags) kann ich dann das 960.gs mit fixen Breiten einbinden. So gibts meines erachtens ziemlich wenige Probleme.

  7. Bei kleinen Projekten finde ich das nicht wichtig das der Internet Explorer 6-8 unterstützt wird. Das praktische ist ja das man mit Google Analytics die benutzten Browser angezeigt kriegt, wenn es genug nutzer gibt kann man ja optimieren :D..

  8. Marcel

    Hallo,

    ich finde den Ansatz auch nicht schlecht. Wenn aber von responsive Layout gesprochen wird, ist HTML5 doch auch meistens mit an Board. Damit der IE aber die neuen Tags aus HTML5 versteht brauche ich doch zwangsläufig eine JavaScript Bibliothek ala modernizr und bin somit wieder abhängig von JavaScript. Gibt es hierfür auch eine schönere Lösung?

    Viele Grüße
    Marcel

  9. >Ich sehe keinen Nutzen darin, den IE < 9 ein Responsive Design zu verpassen.

    Ich schließe mich dem an, oder gehe sogar noch weiter: ist responsives Webdesign nicht vor allem für mobile Endgeräte gedacht? Wieviele Benutzer haben ihr IE8-Browserfenster auf 320px oder 480px minimiert? Hier rechtfertigt sich der Aufwand nicht, da er außer zu Testzwecken vermutlich nie benötigt wird.

    Grüße, Michael

    • Darum geht es in diesem Artikel ja auch gar nicht. Es geht darum, eine Website responsive zu machen, und gleichzeitig älteneren Browsern eine akzeptable Version für den Desktop anzubieten. Diese Vorgangsweise finde ich einfach und wirkungsvoll.

      Gruß
      Michael

  10. Wo und was muss ich bei dem Theme Baylys und beim Tatami beim css einfügen, dass das auch in den älteren IE akzeptabel kommt. Habe ich das richtig verstanden: Zuerst beim header.php einfügen dann bei den css.style: .ie #container {width:980px;} Ist das auch richtig für Baylys und Tatami?
    Danke für kurzes Feedback und viele Grüsse Sibylle

  11. Hallo Ellen,
    danke für den Tipp – so simpel und hat genau das bewirkt, was ich in meinem simplen Projekt gebraucht habe! Deine Seite wird ja auch super gefunden und so war das Problem in 5 Minuten erledigt :-)

  12. Habt ihr ein Theme im Programm, dass diesen Hack einsetzt? Oder anders gefragt: habt ihr ein Theme, dass ihr für den IE7 empfehlen könnt?

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *