u5 responsive webdesign - mediencommunity.de responsive webdesign_0.pdf · u5: responsive webdesign...
TRANSCRIPT
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.