u5 responsive webdesign - responsive webdesign_0.pdf  u5: responsive webdesign vorteile - mehr...

U5 Responsive Webdesign - Responsive Webdesign_0.pdf  U5: Responsive Webdesign Vorteile - Mehr Usability
Download U5 Responsive Webdesign - Responsive Webdesign_0.pdf  U5: Responsive Webdesign Vorteile - Mehr Usability

Post on 19-Aug-2019

230 views

Category:

Documents

1 download

Embed Size (px)

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 = Medienabfrage Es 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 Breite Beschreibt die Breite des Ausgabegerätes, z.B. Breite eines Bildschirms in Pixel. Beispiel:

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

    width / height Beschreibt 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

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