Vorheriger Artikel Nächster Artikel

Mediaqueri.es: Inspiration zu Responsive Webdesign mit CSS3

Mediaqueri.es ist eine gelungene Sammlung von Beispielseiten die, wie der Name schon vermuten lässt, mit Hilfe der W3C-Empfehlung zu Media Queries für umgesetzt sind. Wir stellen euch den Media-Queries-Showcase kurz vor.

Mediaqueri.es: Inspiration zu Responsive Webdesign mit CSS3
Mediaqueri.es Startseite

Media Queries mit CSS3 in Aktion

Media Queries sind eine CSS3-Technik, die es Webentwicklern ermöglicht, bestimmte Bedingungen wie z.B. die Browser-Fenstergröße und die Bildschirmauflösung des Nutzers zu prüfen, um so ein jeweils optimiertes Layout für das aufrufende Endgerät als Responsive Webdesign auszuliefern. Media Queries sind eine Erweiterung der schon in CSS2 vorhandenen medienabhängigen Cascading Stylesheets für verschiedene Ausgabeformate wie z.B. eine Screen- oder eine Druckversion. Das meist verwendete Media-Query-Feature ist die Ausgabebreite „width“. Indem spezifische CSS-Regeln für verschiedene Ausgabemedien definiert werden, können Websites für unterschiedliche Viewports wie z.B. Smartphones, Tablets oder Desktop-Browser mit variierenden Auflösungen und Merkmalen dargestellt werden.

Mediaqueri.es Beispielseite: Oliver Russell

Eivind Uggedal hat unter Mediaqueri.es eine umfangreiche Sammlung von aktuell 360 Websites als Inspirationsquelle zusammengestellt, die alle vorbildlich nach Responsive Webdesign Regeln mit CSS3 Media Queries umgesetzt sind. Wenn man sich mit seinem Twitter-Account bei Mediaqueri.es anmeldet, kann man auch eigene Websites zur Auflistung vorschlagen und die bereits aufgeführten Websites liken. Welche Media-Querie-Website gerade am beliebtesten ist, zeigt das Leaderboard.

Mediaqueri.es Beispielseite: Open Medical Device Research Library

Mit den CSS3 Media Queries ist eine fast fertige Standardisierung des W3C als Candidate Recommendation verfügbar, die bereits effizient für Websites mit Responsive Webdesign eingesetzt wird. Alle gängigen Desktop-Browser und die mobilen Vertreter wie iOS Safari, Opera Mini oder Android Browser unterstützen Media Queries inzwischen. Ab Version 9 ist auch der Internet Explorer nicht mehr aussen vor.

Caniuse.com: Browserunterstützung für CSS3 Media Queries

Kennt ihr noch weitere interessante Inspirationsquellen für Responsive Webdesign mit CSS3 Media Queries?

Weiterführende Links:

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
3 Antworten
  1. von rosi am 20.04.2012 (15:26Uhr)

    Wow! Ich finde es ist eine tolle Entwicklung, dass das Layout an die jeweiligen Einstellungen des Nutzers mit der CSS3-Technik angepasst werden kann.
    ant-marketing.org

    Antworten Teilen
  2. von Mo am 13.07.2012 (19:38Uhr)

    Die Einbindung von canvas bzw. SVG (Scalable Vector Graphics) Elementen öffnet natürlich viele Türen um eine Website Geräteübergreifend, “Responsive” zu gestalten. Diese werden von den meisten Browsern jedoch (noch) lange nicht so gut unterstützt, wie CSS + CSS3 Befehle. Mit der Nutzung von CSS3 in Verbindung mit Media Queries lassen sich längst nicht mehr nur einfache Kreis- und Rechtecksformen erzeugen. Mit ein wenig kreativität lassen sich komplette Grafiken rein in CSS zeichnen.. diese Darstellung ist natürlich Geräteübergreifend und wird von allen Browsern unterstützt!
    Ein schönes Beispiel hierfür haben wir zur Visualisierung von Media Queries auf unserer Website bereitgestellt:
    Beispielseite

    Antworten Teilen
  3. von inspire am 15.07.2012 (02:35Uhr)

    Durch den Vormarsch der Mobileingeräte ist diese Technik sehr hilfreich. Wenn es auch nicht leicht ist die umzusetzen.

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema CSS3
Responsive Webdesign: Browserunterstützung und Tools [t3n-Video-Workshop]
Responsive Webdesign: Browserunterstützung und Tools [t3n-Video-Workshop]

Heute führen wir auf t3n.de die Video-Serie weiter, in der wir euch in Zusammenarbeit mit Galileo Press Video-Workshops zu verschiedenen Themen für Webentwickler und Digitalarbeiter präsentieren. » weiterlesen

Responsive Webdesign: Einstieg in „Mobile First“ [t3n-Video-Workshop]
Responsive Webdesign: Einstieg in „Mobile First“ [t3n-Video-Workshop]

Heute führen wir auf t3n.de die Video-Serie weiter, in der wir euch in Zusammenarbeit mit Galileo Press Video-Workshops zu verschiedenen Themen für Webentwickler und Digitalarbeiter präsentieren. » weiterlesen

Grid – Eine einfache Einführung in Responsive Webdesign
Grid – Eine einfache Einführung in Responsive Webdesign

Willst du schnell den Einstieg in Responsive Webdesign finden oder die Basics auffrischen? Mit diesem Tutorial ist beides kein Problem. » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n 36 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen