Drücke die Tasten ◄ ► für weitere 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 CSS3 Media Queries für Responsive Webdesign 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 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 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:

37 Shares bis jetzt – Dankeschön!

Bewerten
VN:F [1.9.22_1171]
5 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

  2. von Die besten meiner geteilten Links auf Tw… am 04.05.2012 (10:35Uhr)

    [...] t3n Magazin habe ich über eine Responsive Sammlung namens mediaqueri.es gelesen. Eine gelungene Inspiration wenn es um responsives Webdesign geht, wie ich [...]

  3. 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

  4. 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.

  5. von 5 Beispiele für Responsive Webdesign im… am 22.04.2013 (12:26Uhr)

    [...] Mediaqueri.es: Inspiration zu Responsive Webdesign mit CSS3 – t3n News [...]

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

t3n-Video-Workshop: Einstieg in 2D-Transformationen mit CSS3
t3n-Video-Workshop: Einstieg in 2D-Transformationen mit CSS3

Heute startet auf t3n.de eine neue Serie, 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

Kennst Du schon unser t3n Magazin?

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