Vortrag
Medien Queries
Allgemein
- Media Queries = Medienabfragen
- Medienabfrage = Liste von Kriterien, die ein Ausgabemedium erfüllen muss, damit ein Stylesheet zur Verarbeitung eingebunden wird
- MA bestehen aus einem Medientyp (z.B. Bildschirm oder Drucker), einem Medienmerkmal (z.B. Farbfähigkeit) oder einer Kombination aus beidem
- Mithilfe der Kombinationsmöglichkeit können Stylesheets auf eine Vielzahl von Ausgabemedien zugeschnitten werden
Was sind Media Queries und wofür brauche ich diese?
- Media Queries bieten viele Abfragemöglichkeiten, z.B. anhand der Pixelbreite des Ausgabegerätes lassen sich verschiedene CSS-Dateien ansprechen
- Auch möglich bei Smartphone zu erkennen, ob im Hoch- oder im Querformat gehalten wird
- Mittels der Abfragen lässt sich eine Webseite per CSS somit komplett für verschiedene Geräte anpassen, ohne auf JavaScript oder Ähnliches setzen zu müssen
Welche verschiedenen Media Queries gibt es?
- wichtigsten Werte, die mit den Media Queries abgefragt werden können:
▪ width / height (beschreibt Breite, Höhe des Anzeigebereiches, z.B. innerhalb eines Browserfensters)
▪ device-width / device-height (beschreibt komplette Anzeigebreite und -Höhe des Gerätes)
▪ orientation (beschreibt Ausrichtung des Geräts, ob im Quer- / Hochformat gehalten wird)
▪ resolution (beschreibt die Auflösung des Anzeigegeräts)
Wie können Media Queries eingesetzt werden?
- Die Media Queries lassen sich im Prinzip auf zwei Arten in Ihre Webseite einbinden:
Beispiel 1:
<html>
<head> <link type="text/css" rel="stylesheet" media="screen" href="/style.css" /> <link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" href="/iphone.css" />
</head> <body>
<p>Hier entsteht eine Webseite</p>
</body>
</html>
- Beispiel 1 wäre die Einbindung der Media Queries direkt im <head>-Bereich der jeweiligen Webseite mit Auswahl verschiedener CSS-Stylesheets, je nach Anzeigegerät
- Beispiel 2 würde der Einsatz direkt im Stylesheet selbst erfolgen
- Prinzipiell egal, welche Variante verwendet wird
- Vorteil bei Einbindung der Abfragen im <head>-Bereich: man kann quasi für jedes Anzeigegerät ein eigenes Stylesheet definieren und pflegen
- bei Variante zwei werden zwar HTTP-Anfragen an den Server verringert und so Aufbau der Webseite beschleunig, jedoch wird bei mobilen Geräten ein großes Stylesheet geladen, was den Vorteil der HTTP-Abfragen zunichte machen kann
- hängt je nach Anzahl und Umfang der verwendeten Media Queries ab
Funktion:
- MQ machen es möglich, eigene CSS-Styles für spezielle Bildschirmformate zu definieren
- Man gestaltet erst einmal eine Standard-Version einer Webseite
- → dazu wird meist große Desktop-Ansicht genommen, falls man ein Webseiten-Projekt vor allem für mobile Geräte umsetzt, dann die mobile Smartphone-Version
- danach definiert man mit Hilfe von MQ mehrere Unterformate für kleinere Bildschirmformate, z.B. für Tablet-PC Version & eine weitere, für die Ansicht auf Smartphones optimierte Webseiten-Version
- Für diese weiteren Bildschirmformate kann man dann das CSS-Styling anpassen und entsprechend optimieren
Pro und Kontra
- Die Verwendung MQ ist auf keinen Fall als eine, für alle Webseiten geeignete Allgemeinlösung zu sehen
- gewisse Schwierigkeiten und Problematiken:
▪ Inhalte können mit Hilfe von display: none; zwar in der mobilen Version verborgen werden, werden aber dennoch in den mobilen Browser geladen, unnötig lange Ladezeiten zur Folge
▪ Wenn man eine Webseite erst in einer Desktop-Version gestaltet, dann für mobile Version “abspeckt”, können viele mobile-Web spezifische Techniken nicht genutzt werden
▪ Die unterschiedliche Nutzung eines Mauspfeils im Gegensatz zum Touchscreen ist sehr schwer zu optimieren, wenn man eine Lösung für beide Optionen finden muss
Fazit
- Für eine komplexe Webseite, die jede Menge Informationen und Funktionen bieten muss, z.B. Buchung, Online Shop, etc., ist es weniger sinnvoll, ein Webdesign nur mit Hilfe von Media Queries anzupassen, da ist eine eigene mobile Webseiten-Version oder eine eigene Webseiten-App eher geeignet
- Bei einem Blog, Portfolio oder der Informations-Webseite einer kleineren Firma bzw. Gruppe macht eine Media Queries optimierte Webseiten-Version schon viel mehr Sinn