CSS – Responsive WebDesign & Media Queries – Responsive WebDesign

View Github Repository Open presentation in a new window

KarinaVi

See all presentation from KarinaVi

CSS – Responsive WebDesign & Media Queries – Responsive WebDesign

0 0

CSSMQ

On Github KarinaVi / CSSMQ

CSS

Responsive WebDesign & Media Queries

Created by Karina Vida

Responsive WebDesign

reagierendes Webdesign

bietet geräteübergreifende dynamische Kommunikation mit Hilfe von HTML5 und CSS3 Media-Queries (geräteunabhängige Kommunikation)

- aktuelle Technik: einheitliches Anzeigen von Inhalten auf einer Website - flexibles Layout einer Webseite: egal obComputer- Desktop, Tablet und Smartphone -> gleichbleibende Benutzerfreundlichkeit + Inhalt kann gänzlich und schnell vom Besucher aufgenommen werden -wesentlicher Faktor in der Kommunikations-Strategie - Zukunft der modernen Webseite (Entwicklung zum Standard)

Bedeutung

Forum follows function

  • Funktionen, Design und Inhalt folgen der jeweiligen Bildschirmauflösung des verwendeten Endgeräts

Webseite passt sich der Bildschirmauflösung des mobilen Endgeräts an - Inhalts- und Navigationselemente + struktureller Aufbau einer Webseite passen sich der Bildschirmauflösung des mobilen Engeräts an - RWD folgt dem Nutzer, und nicht wie gegenwärtig, der Nutzer den meist starr konstruierten Layouts konventioneller Websites

Vorteile

  • niedriger Pflegeaufwand von redaktionellem Content und Bildmaterial

für zukünftige Tablet- oder Smartphone-Formate wird keine weitere Versiondes Layouts benötigt

kosteneffizientener Ansatz für ganzheitliche Kommunikation - steigender Marktanteil von Tabletsund Smartphones - unterschiedliche Standard Auflösungen von Smartphones und Tablets - Smartphones 320px bis 480px - Tablets 768px bis 1024px - ComputerDesktop 1024px+ - gesamter Inhalt einer Webseite wird nur einmalig angelegt

Beispiel

Media Queries

  • Zuordnung eines Stylesheets zu einem Medium erfolgt mit Hilfe von Medienabfragen
  • bestehen aus Medientyp, Medienmerkmal oder Kombination aus beidem
- stärke von CSS liegt darin, die Darstellung eines Dokuments für verschiedene Ausgabemedien festlegen zu können - Medienabfrage = Liste von Kriterien, die ein Ausgabemedium erfüllen muss, damit Stylesheet zur Verareitung eingebunden wird - Stylesheets können auf eine Vielzahl von Ausgabemedien zugeschniten werden -Medientypen: all,print,screen,speech -Medienmerkmal: (orientation: landscape)

Anwendung

Angabe eines Medientypeserfolgt als einfaches Schlüsselwort, z.B. "screen"

keine Medienabfrage oder die angegebene besteht nur aus Leerzeichen, so gilt der Standardwert "all"

Einbindung im HTML-Dokument

    <link rel="stylesheet" href="bildschirm-stylesheet.css" media="screen">
    <link rel="stylesheet" href="druck-stylesheet.css" media="print">

Einbindung im HTML-Dokument

    <link rel="stylesheet" href="stylesheet.css">
    <link rel="stylesheet" href="druck-stylesheet.css" media="print">

Medienabfrage in der CSS-Ressource

/* CSS-Regeln für alle Ausgabegeräte */
 @media print {
/* zusätzliche oder abweichende CSS-Regeln für Drucker */
}

Einbindung anhand verschiedener Kriterien

<link rel="stylesheet" href="kompakt.css" media="(orientation: portrait)">

<style type="text/css" media="(color)">
/* Farbangaben. */
</style>

@import 'layout.css' (min-width: 50em);

THE END

BY Karina Vida