U5: Responsive Webdesign

Vorteile- Mehr Usability- Mehrere Darstellungen auf versch. Endgeräten- Reichweite erhöhen- Mehr Umsatz- effektivere Suchmaschinenoptimierung- von Überall erreichbar

Nachteile- nur wenig Text oder andere Inhalte einfügbar- mehr Aufwand für Erstellung der Website- langsamere Ladezeit- Ältere Browser verstehen Anweisungen

von responsiv nicht- Dauer der Entwicklung ist höher

Media Query = MedienabfrageEs wird ermittelt, welcher Medientyp (z.B. Bildschirm, Drucker...) der Browser vorfindet. Erfüllt das verwendete Ausgabemedium alle Kriterien einer Medienabfrage, so wird die damit verknüpfte CSS-Ressource eingebunden.

device-width - Geräte BreiteBeschreibt die Breite des Ausgabegerätes, z.B. Breite eines Bildschirms in Pixel. Beispiel:

@media (device-width: 800 px)Breite entspricht genau 800px

width / heightBeschreibt bei fortlaufenden Medien die Breite/Höhe des Anzeigebereichs (Viewport) und bei paginierten Medien die Breite/Höhe einer Seite. Beispiel:

@media (width: 60em)Breite entspricht genau 60em

@media (min-width: 50em)Breite beträgt mindesten 50em

@media (max-width: 70em)Breite beträgt maximal 70em

BeachtenAuch wenn ein Ausgabegerät bestimmte Abmessungen besitzt, sagt das nichts darüber aus, ob der verfügbare Bereich auch verwendet wird.