Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Responsive Webdesign – Grundlagen

Strategien für den IE

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Was macht man mit dem IE8, der die Media-Query-Angaben noch nicht interpretiert? Hier gibt es unterschiedliche Möglichkeiten: Allen voran ein nützliches Skript mit Namen respond.js.

Transkript

Die Browser-Unterstützung für Media Queries ist sehr gut. Alle modernen Browser können es. Einziges Sorgenkind ist die Internet Explorer 8. Aber auch für diesen gibt es eine Reihe von Möglichkeiten nachzubessern. Hier habe ich einmal aufgerufen die Seite von Can I Use. Und lasse mir gerade anzeigen wie es mit den CSS 3 Media Queries aussieht. Und Sie sehen: grün, grün, grün, grün. Das heißt, es wird überall unterstützt. Einzige Ausnahme hier, der Internet Explorer 8.0. Was gibt es für Möglichkeiten hier? Schauen wir uns das einmal an. Die Strategien, die wir haben, sind ganz unterschiedlich. Manche basieren einfach auf der Organisation des Style Sheets, manche reihen auf CSS und andere involvieren auch JavaScript. Die erste Möglichkeit, die Sie haben, ist wenn Sie einen Desktop First-Ansatz wählen. Das heißt, Sie definieren zuerst die Formatierung für die großen Viewports und definieren danach mit max-width die Angaben für die kleinen Viewports. Und wir denken jetzt an Internet Explorer 8 und wollen das eben, der ja jetzt nur die Angaben für den großen Bildschirm liest und nicht für die kleinen. Dann können wir Only ergänzen, dieses Schlüsselwort, bei der Stelle, wo wir die Media Queries machen. Und dann bewirkt das, dass die Angaben für kleine Viewports vom Internet Explorer 8 beispielsweise nicht gelesen werden. Das ist eine erste Möglichkeit, die Sie haben. Andere Möglichkeit ist, dass Sie auf Conditional Comments setzen. Sie kennen Conditional Comments, die sehr praktisch sind, um bestimmte Angaben speziell für den Internet Explorer auszuliefern. Und diese Conditional Comments können Sie jetzt natürlich auch nutzen, um Style Sheets explizit für ältere IEs einzubinden. Wie kann man so etwas aufbauen? Nehmen wir einmal an, Sie haben ein globales Style Sheet mit allgemeinen Formatierungen. Und dann haben Sie Formatierungen hier für große Viewports. Hier zum Beispiel mit einer Mindestbreite von 30 em. Dann können Sie dafür sorgen. Das wird ja normalerweise dann nur gelesen hier eben, wenn Geräte diese Breite haben. Aber Sie können jetzt noch durch konditionale Kommentare dafür sorgen, dass die IE auf jeden Fall diese Angaben liest, wenn er kleiner als die Version 9 ist und es nicht ein IE Mobile ist. Weil wir dem IE Mobile auch gerne die mobile Variante spendieren würden. Diese Form das zu notieren stammt hier übrigens von dieser Quelle. Also, das ist eine weitere Möglichkeit. Die anderen Möglichkeiten sind ein bisschen komfortabler. Weil es bedeutet, dass Sie nicht sich selber darum kümmern müssen und das entsprechend organisieren müssen, sondern Sie können sich einfach auch per JavaScript behelfen. Da sind es im Wesentlichen zwei Scripte, die in Frage kommen. Das ist einmal CSS 3 Media Queries. Das ist relativ vollständig, das sind alle sehr viel verschiedene Angaben auf den Media Queries. Und es gibt zum Anderen Respond.js Das hat den Vorteil, dass es eine sehr kleine Datei ist. Und es ist optimiert auf eine bestimmte Aufgabe, nämlich die wichtigsten Media Queries nachzubessern. Wenn Sie Respond.js anwenden, dann müssen Sie eine bestimmte Bedingung erfüllen, damit das Ganze klappt. Also, Sie müssen natürlich erstmal die Datei runterladen. Außerdem funktioniert das Ganze nur, wenn Sie mit externen Style Sheets arbeiten. Das ist bei echten Projekten aber kein Problem, weil Sie da sowieso externe Style Sheets einsetzen. Andere Bedingung ist, es funktioniert nicht bei ausgefalleneren Media Queries. Aber das ist auch nicht störend, weil das eben bei den wichtigsten funktioniert, wie min-width und max-width. Und damit das Ganze funktioniert, muss das auf einem Server ausgeführt werden. Das ist auch beim echten Einsatz nicht störend, weil Sie werden ja am Schluss die Dateien ins Internet laden auf einen Server. Das betrifft einfach nur das Testen. Sie können das dann nicht im Internet Explorer 8 testen, indem Sie einfach die Datei ganz normal über Doppelklick öffnen. Schauen wir ja uns das praktisch an, wie das Ganze funktioniert. Ich habe hier jetzt einmal die Web-Seite des Projektes aufgerufen. Hier sehen Sie die allgemeine Web-Seite. Da sehen Sie dann Respond.js gibt es in verschiedenen Varianten. Es gibt eine minifizierte Variante. Das ist immer die Variante, wo Leerzeichen entfernt sind, die nicht notwendig sind. Das ist die Variante, die am schnellsten lädt. Falls Sie mal lesen wollen was da eigentlich geschieht, dann sollten Sie die andere Variante nehmen, die eventuell auch mehr Kommentare enthält und schöner einrücken, sodass es wirklich lesbar ist. Wenn wir hier mal draufgehen, dann finden wir den ganzen Code. Und können da hier auf Raw gehen, können das Ganze dann kopieren und in einen Editor einfügen. Das habe ich jetzt aber bereits gemacht. Sie sehen hier: habe ich ein Projekt schon vorbereitet und da ist der Code schon in der Datei drinnen. Sehen wir dann unser Beispiel an, was ich hier habe. Das sieht ganz normal aus. Also, wir haben natürlich wie immer unsere wichtige Viewport-Angabe, die wir ja immer brauchen bei Responsive Layouts. Jetzt habe ich hier die CSS-Angaben in einer externen Datei ausgelagert. Die sehen Sie hier. Die hat die ganz normalen Angaben und hat irgendwo rein @media screen, hier unsere CSS 3 Media Queries. Die binde ich eben auch ein. Und dann kommt der Script-Bereich, wo ich verweise auf Respond.js. Und ich habe das jetzt hier innerhalb von konditionalen Kommentaren angegeben, damit andere Browser das nicht lesen. Weil das ist ja wirklich jetzt nur für ältere IEs gedacht, also für den IE 8 und eventuell noch kleiner. Wir wollen uns mal ansehen wie das sich dann auswirkt. Und wir können ja im Internet Explorer, auch wenn wir da einen neueren haben, das faken wie es aussehen würde, indem Sie in den Entwickler-Tools die aktivieren. Das geht über F12. Und dann können Sie über den Browser-Modus hier ja wechseln. Das ist leider etwas was nicht 100% zuverlässig ist, das heißt es kann auch sein, dass Sie paar Features damit nicht überprüfen können. Aber es gibt erstmal eine erste Richtlinie, was so geht und was vielleicht Probleme sein könnten. Ich habe das Dokument jetzt auf einem Server abgespeichert und erst einmal aber ganz normal über Doppelklick geöffnet. Sie sehen das an der Art, wie diese Adresse hier aufgebaut ist mit diesem Pfeil-Pfad mit den Laufwerksbezeichnungen und so weiter. Und Sie sehen, hier funktioniert das erstmal nicht, weil die Media Queries werden nicht auf diese Art gelesen. Weil wir haben jetzt die Darstellung für kleine Bildschirme. Wenn wir das Ganze aber jetzt richtig über den Server aufrufen... Sie sehen es auch hier localhost. Das ist jetzt eine richtige Server-Adresse. Dann funktioniert das Layout, das ist wie gewöhnlich schon. Es funktionieren auch die Anpassungen, dass also die beiden Varianten automatisch hier hin und herspringen. Und ich kann auch nochmal zeigen, dass wir wirklich im richtigen Browser sind. Wir sind hier im Internet Explorer 8 und der versteht plötzlich die Media Queries eben dank Respond.js Insgesamt kann man sagen, dass Respond.js eine sehr flexible Lösung zum Nachbessern ist, weil Sie sich um nichts weiter kümmern müssen. Ansonsten müssen Sie Ihr Style Sheet passend realisieren. Relativ einfach geht das noch bei einem Desktop First-Ansatz. Da können Sie die Angaben für kleine Bildschirme mit Only vor älteren Internet Explorern verstecken.

Responsive Webdesign – Grundlagen

Lernen Sie die Hintergründe von Responsive Webdesign kennen und sehen Sie, wie sich über diese Technik Webinhalte auf den unterschiedlichsten Geräten gleichwertig anzeigen lassen.

5 Std. 47 min (59 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!