Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

Der Begriff des „Responsive Webdesign“ beschreibt die Technik über CSS3 Media Queries eine Website für verschiedene Displaygrößen oder Bildschirmauflösungen zu optimieren. Wie das im Detail funktioniert habe ich bereits in einem Tutorial ausführlich erklärt. Leider unterstützt der Internet Explorer 6-8 keine Media Queries; folglich wird die optimierte Version der Website auch nicht angezeigt wenn der Besucher mit einem veralteten Internet Explorer unterwegs ist.
Nun könnte man einwenden, dass Media Queries in erster Linie für die Optimierung auf Smartphones genutzt werden und die Optimierung auf Desktop-Rechnern nicht so wichtig ist. Sicher ist die Optimierung für Handys und Tablets wichtiger – aber auch Desktop-Rechner und Notebooks unterscheiden sich in der Displaygröße mittlerweile deutlich und sollten bei der Konzeption entsprechend beachtet werden. Ein kleines JavaScript namens „respond.js“ rüstet die fehlende Interpretation von min/max-width-Media Queries im Internet Explorer nach.

Details zu respond.js

Das Script rüstet lediglich die fehlende Kompatibilität für minimale und maximale Breitenangaben in Media Queries nach. Andere Media Query-Funktionen werden nicht berücksichtigt. respond.js erkennt darüber hinaus keine Media Queries in über @import importieren Stylesheets oder innerhalb von Inline-CSS.
Wenn ihr das Script Modernizr verwendet, beachtet bitte das im Download von Modernizr eine Haken bei »Media Queries« gesetzt werden kann. Ist die Option aktiviert, lädt Modernizr automatisch respond.js. Es ist also überflüssig das Script separat noch einmal einzubinden.

Download respond.js

respond.js liegt in der Quellversion sowie in einer komprimierten Version auf GitHub bereit. Darüber hinaus existiert auch ein WordPress-Plugin das ich der Vollständigkeit halber auch erwähnen möchte. Ob es sinnvoll ist eine solche Funktion per Plugin nachzurüsten sollte jeder selbst entscheiden. Ich bin der Meinung die Funktion gehört direkt ins Theme.

Alternative: css3-mediaqueries.js

Wenn ihr Media Query-Funktionen nutzen möchtet die von respond.js nicht abgedeckt werden, schaut euch am besten das umfangreichere Script css3-mediaqueries.js an.

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 14 Kommentare

  1. SaS
    schrieb am 10.02.2015 um 12:10 Uhr:

    Hi Jonas, mit min-width hat er keine Probleme. Ich sprach ja auch von min-height… Gibt es da Einschränkungen?

    Antworten
    • Jonas Hellwig
      schrieb am 10.02.2015 um 13:15 Uhr:

      Nicht, dass ich wüsste. Teste einfach mal mit dieser Seite hier.

      Antworten
      • SaS
        schrieb am 11.02.2015 um 15:26 Uhr:

        Ach, du meine Güte. Es lag ganz einfach an einer fehlenden schließenden geschweiften Klammer „}“ am Ende eines Media Querys! Während Chrome, Mozilla und Co. den Fehler übersehen, schaut der IE scheinbar sehr genau hin. Mmh, hat etwas gedauert, bis ich das herausgefunden habe! Trotzdem vielen Dank für deine Tipps!

  2. SaS
    schrieb am 09.02.2015 um 23:36 Uhr:

    Hallo Jonas,
    ich habe einige Media Queries für mein Webprojekt mit min-height angegeben. Diese Bedingung scheint vom IE (10, Surface Porait, aber auch Desktop-PC) ignoriert zu werden. Hast du einen Tipp, wie ich es hinbekomme, dass der IE bei einem resp. Design auch auf min-height-Angaben reagiert? Danke schon einmal und viele Grüße,
    SaS

    Antworten
    • Jonas Hellwig
      schrieb am 10.02.2015 um 11:43 Uhr:

      Du musst einen Fehler im Code haben. Der Internet Explorer 10 hat keine Probleme bei der Darstellung von Media Queries mit min-width:-Angaben.

      Antworten
  3. Ralf
    schrieb am 16.12.2014 um 16:01 Uhr:

    ist es noch sinnvoll respond.js einzusetzen? Da Win-XP nicht mehr von MS gesupportet wird, fällt ja demnach IE8 auch für die Programmierung raus.

    Antworten
    • Jonas Hellwig
      schrieb am 16.12.2014 um 17:54 Uhr:

      Hallo Ralf, ich würde respond.js über einen Conditional Comment noch integriert lassen.

      Antworten
  4. Steffen
    schrieb am 06.11.2013 um 19:04 Uhr:

    Man darf aber nicht vergessen, dass das respond.js in der Version 1.3 nur max-width und min-width unterstützt und nicht max-height und min-height.

    Zitat: /*! Respond.js v1.3.0: min/max-width media query polyfill. (c) Scott Jehl. MIT/GPLv2 Lic. j.mp/respondjs */

    Ich finde, dass ist ein sehr großer Nachteil. Ansonsten genial!
    Wer dazu nochne Lösung hat, wäre schön.

    MFG

    Antworten
  5. Dominikus
    schrieb am 30.10.2013 um 10:41 Uhr:

    Ziemlich cool… das WP Plugin funktioniert super, wenn ich das Script manuell einbinde funktioniert es allerdings – bei mir – nicht.

    Antworten
  6. AF
    schrieb am 25.07.2013 um 14:29 Uhr:

    Absolut genial. Es funktioniert! Aller besten Dank!

    Antworten
  7. Lehmann
    schrieb am 16.07.2012 um 16:01 Uhr:

    Ich habe den Code eingebunden, keine Veränderung lokal. Geht es wirklich nur online oder gibt es für die lokale Installation eine Alternative?

    Antworten
  8. Michael
    schrieb am 19.09.2011 um 23:54 Uhr:

    Nur als kleiner Hinweis:
    Ab Modernizr 2 kann auch dort direkt respond.js eingebunden werden. Wer also ohnehin auf Modernizr zurück greift, der muss respond.js nicht zusätzlich herunterladen und einbinden.

    Antworten
  9. herrfischer
    schrieb am 12.09.2011 um 17:10 Uhr:

    es gibt ja einige dieser scripte aber dieses ist tatsächlich das schnellste. man muss auch bedenken das der IE7 auch auf windows smartphones läuft, demnächst kommt allerdings das update auf IE9.

    Antworten
  10. Felix
    schrieb am 12.09.2011 um 09:32 Uhr:

    Wieso funktioniert diese Skript eigentlich nicht lokal auf dem Computer sondern nur online? Im Internet Explorer wird eine Fehlermeldung angezeigt (aber nur offline, online nicht)

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

WordPress-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir setzen WordPress seit über 10 Jahren erfolgreich ein und realisieren maßgeschneiderte Websites auf Basis dieses großartigen CMS.

WordPress-Leistungsangebot →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →