Drucken

Eine für responsives Webdesign wesentliche Voraussetzung sind sogenannte Media Queries, ein CSS-3-Konzept, welches unterschiedliche Designs in Abhängigkeit von bestimmten Eigenschaften des Ausgabemediums erlaubt.
Beispielsweise können folgende Eigenschaften als Kriterien herangezogen werden:

  • Größe des Gerätes selbst
  • Bildschirmauflösung
  • Orientierung (Hoch- oder Querformat)
  • Eingabemöglichkeiten (Tastatur, Fingergeste (Touch), Sprache)

Responsives Webdesign bezeichnet ein Design, dass mit einem flexiblen Grid und flexiblen Inhalten auf beliebigen Endgeräten stets das beste Nutzererlebnis bietet. Das Design reagiert auf den Nutzer und dessen Anforderungen.
Schriften:
Im responsiven Design werden Schriftgrößen, Zeilenhöhen etc. auf der Basis von % und/oder em definiert. So entspräche eine Schriftgröße von ca. 16 Pixeln 100% oder 1em. Alle anderen Werte wären entsprechend umzurechnen.
Responsives Design
Responsive Webdesign: Ein Beispiel von Times

Layout

Gängig war zuletzt 960px, inzwischen wird vielfach auch 1.140px propagiert. Es ist weiterhin sinnvoll, seinen Layouts eine Obergrenze mit zu geben. So vermeidet man, dass das Layout auf einem Bildschirm mit 5.000px Screenbreite vollkommen auseinander gerissen wird. Die Obergrenzendefinition, etwa über max-width: 1140px, erlaubt aber die Anpassung nach unten.
Bilder, Slider, Videos
Bildern, Videos und anderen Objekten gibt man stets eine Maximalgröße von 100% mit (max-width:100%;). Für den Internet Exploder gibt es ein fertiges Script, das auch diesen Designerschreck in die Lage versetzt, so zu arbeiten.
Der geübte Designer erkennt sofort ein Problem. Bilder werden immer in voller Größe geladen, auch wenn die Anzeigegröße nur 31,25% beträgt. Da wäre es ja schöner, man hätte die Möglichkeit, entsprechend kleinere Bilder zu laden. Bei der Filamentgroup auf Github gibt es eine Javascript-Lösung, die genau das ermöglicht. Das Funktionsprinzip wird auf dieser Demoseite beschrieben. Skaliert einfach mal das Browserfenster.

 

Media Queries

CSS Media Queries sind letztlich das Herzstück eines erfolgreichen responsiven Webdesigns. Mit dem bereits seit Jahren gebräuchlichen media-Tag, schon in der Vergangenheit stets benutzt, um ein spezielles Stylesheet für die Druckausgabe zu laden, lässt sich heutzutage die Steuerung der Anwendung bestimmter Stylesheets für bestimmte Devices sehr gut steuern.
Mit den CSS3-Mediaqueries kann man ein HTML-Element je nach Eigenschaft des darzustellenden Browsers ein anderes Aussehen verpassen. So könnte man die Seite auf einem Desktop-Rechner mit großem Bildschirm mehrspaltig nebeneinander zeigen. Neben der breiten Inhaltsspalte hätten dann noch zwei oder sogar drei Randspalten mit Zusatzinformationen Platz. Auf Smartphones hingegen müsste man den Inhalt linear, also unter- und nacheinander aufreihen, damit der Anwender den Inhalt einfacher lesen kann.
Bild {Webberry}
Auf folgende Features kann mittels Media Queries zugegriffen werden:

  • width / height
  • device-width / device-height
  • aspect-ratio / device-aspect-ratio
  • color-index / color
  • orientation
  • resolution
  • scan
  • grid

Media Queries

CSS Media Queries sind letztlich das Herzstück eines erfolgreichen responsiven Webdesigns. Mit dem bereits seit Jahren gebräuchlichen media-Tag, schon in der Vergangenheit stets benutzt, um ein spezielles Stylesheet für die Druckausgabe zu laden, lässt sich heutzutage die Steuerung der Anwendung bestimmter Stylesheets für bestimmte Devices sehr gut steuern.

Mit den CSS3-Mediaqueries kann man ein HTML-Element je nach Eigenschaft des darzustellenden Browsers ein anderes Aussehen verpassen. So könnte man die Seite auf einem Desktop-Rechner mit großem Bildschirm mehrspaltig nebeneinander zeigen. Neben der breiten Inhaltsspalte hätten dann noch zwei oder sogar drei Randspalten mit Zusatzinformationen Platz. Auf Smartphones hingegen müsste man den Inhalt linear, also unter- und nacheinander aufreihen, damit der Anwender den Inhalt einfacher lesen kann.

Bild {Webberry}

Auf folgende Features kann mittels Media Queries zugegriffen werden:

  • width / height
  • device-width / device-height
  • aspect-ratio / device-aspect-ratio
  • color-index / color
  • orientation
  • resolution
  • scan
  • grid


Diesen Beitrag teilen

0



Social Sharing powered by flodji.de

Aktuelle Projekte

Wer ist online

Aktuell sind 229 Gäste und keine Mitglieder online