Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

Mediaqueri.es: Inspiration zu Responsive Webdesign mit CSS3

    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 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:

Finde einen Job, den du liebst

3 Reaktionen
inspire

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

Antworten
Mo

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
rosi
rosi

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

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen