Responsive Webdesign – Grundlagen

Media Queries organisieren

Testen Sie unsere 1926 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Wie viele Breakpoints soll man eigentlich definieren? Und was ist überhaupt die richtige Einheit für Media Queries? Die Antworten liefert dieser Film.

Transkript

Media Queries sind vom Prinzip einfach. In der Praxis gibt es aber eine Reihe von Variationsmöglichkeiten und das heißt, man muss sich für eine Herangehensweise entscheiden. Schauen wir uns mal an was da alles zur Verfügung steht. Zuerst einmal können Sie den Kaskadierenden Mobile First Ansatz wählen. Das heißt, Sie machen zuerst die Angaben für kleine Viewports ohne Media Queries. Dann kommen die weiteren Angaben immer mit min-width, die ein aufeinander aufbauen. Der Vorteil davon ist, dass es leichter fällt sich auf das Wesentliche zu konzentrieren, wenn man durch den kleinen Viewport schon dazu gezwungen ist. Und der weitere Vorteil ist, dass ältere Feature Phones, die noch nicht mit Media Queries umgehen können, gleich die richtige Variante erhalten. Es ist aber natürlich ein Nachteil, wenn Sie ein Projekt haben, was prinzipiell erstmal anders aufgebaut ist. Dann erfordert diese Herangehensweise relativ viel Umdenken. Die nächste Möglichkeit ist ein Kaskadierender Desktop First. Das heißt, Sie machen zuerst die Formatierung für große Viewports und dann beginnen Sie mit den Anpassungen für kleine Bildschirme mit max-width. Der Vorteil ist, dass es der normalen Webseitenentwicklung entgegenkommt. Der Nachteil ist natürlich parallel zum Vorteil von eben, dass ältere Feature Phones wahrscheinlich die falsche Variante kriegen, die noch nicht mit Media Queries umgehen können. Und der Nachteil ist natürlich, dass es eventuell zu viele Inhalte gibt und dass Ihr wirklich am Platz Problem haben bei kleinem Viewport. Und ein Ausblenden über display: none ist natürlich nicht empfohlen. Es gibt dann auch noch die Möglichkeit so genannte Ausschließende Media Queries zu definieren, wo Sie nicht die Kaskade haben, dass eben mehrere Angaben auf ein Element zutreffen und die in einer Media Query stehen, die die allgemeine überschreibt. Sie können eben auch so ausschließend arbeiten wie Sie es in diesem Beispiel sehen, wo zum Beispiel diese Formatierungen nur gelten von einer Mindestbreite von 401 Pixel und einer Maximalbreite von 800 und da vorher haben wir alle, die die andere Breite haben. Also, das ist eine Alternative. Ich finde sie auf den ersten Blick ein bisschen irritierend, weil es mich so erinnert an separate Versionen für verschiedene Geräte. Aber es hat natürlich den eindeutigen Vorteil, dass Sie sich nicht um Spezifitätsprobleme kümmern müssen oder Ähnliches. Nächste Frage, die sich natürlich stellt wie viel Breakpoints braucht ein Mensch. Breakpoints sind ja die Stellen, wo es Layout-Veränderungen durch Media Queries gibt. Erst einmal sollte man differenzieren zwischen großen Breakpoints, wo wirklich große Änderungen stattfinden und kleineren Breakpoints oder kleineren Anpassungen. Bei den großen Breakpoints würde ich dazu raten nicht so viele einzusetzen, also zwei bis drei, mehr sollten es eigentlich nicht sein, denn es ist ganz eindeutig: je mehr Breakpoints Sie haben, desto mehr Tests müssen Sie natürlich auch durchführen. Das heißt, wo Sie können und Sie haben beispielsweise einen Breakpoint definiert, meinetwegen bei 420 Pixeln und wieder was weiteres bei 440 Pixeln, dann sollte man schauen: kann man das nicht irgendwie zusammenfassen und kann man da nicht hier Breakpoints einsparen. Nächste Frage, die sich stellt, ist: soll man Media Queries in Pixel oder in em eingeben? Pixel sind natürlich erst einmal besser zu händeln und kommen wahrscheinlich einem normalen Entwickler erst einmal entgegen, weil sie auch kein Problem haben mit irgendwie Vererbung und Schriftgrößen, die schon umgesetzt sind. Deswegen gelten die em's auch anders, was ja immer so an em ein bisschen schwierig ist. Em hat allerdings den Vorteil, dass es besser auf Geräten mit irgendwie etwas ungewöhnlicheren Eigenschaften funktioniert. Also, wenn ein Gerät beispielsweise eine relativ große Schriftgröße hat oder so, dann funktioniert das Ganze solider, wenn Sie auf em setzen. Und zum Schluss noch ein kleiner Tipp. Normalerweise kämpft man immer mit den Media Queries aufgrund der Breite. Aber es gibt auch vertikale Media Queries. Die können beispielsweise sinnvoll sein, wenn man einen fetten Kopfbereich hat, der eben einfach zu viel Platz einnehmen würde, wenn nicht genügend Höhe da ist. Ein schönes Beispiel möchte ich Ihnen einmal zeigen. Das ist die Webseite hier von Brad Frost. Und ich ändere mal nichts an der Breite, sondern nur etwas an der Höhe. Und dann sehen Sie, verkleinert sich dieser Kopfbereich. Das heißt, manchmal ist es sinnvoll nicht immer nur an width zu denken, sondern die Höhe, also Media Queries mit height auch einzubeziehen. Fazit: es gibt unterschiedliche Methoden Media Queries zu organisieren. Sie sollten ganz undogmatisch das wählen was für Ihr Projekt gerade am besten passt. Und neben den technischen Überlegungen spielen natürlich immer noch andere Faktoren eine Rolle. So ist etwa Mobile First als Ansatz wichtiger bei einem Projekt, das sich vornehmlich auch an mobile Nutzer richtet.

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!