t3n News Entwicklung

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 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:26 Uhr)

    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:38 Uhr)

    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:35 Uhr)

    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
Typografie im Responsive Webdesign – Teil 2: So erstellt ihr Responsive Headlines
Typografie im Responsive Webdesign – Teil 2: So erstellt ihr Responsive Headlines

Im ersten Teil dieser Artikelserie über Typografie im Responsive Webdesign ging es um die Auswahl und Einbindung der richtigen Schrift. Nachdem ich darin die wichtigsten Punkte von reaktionsfähiger … » weiterlesen

Schicke kostenlose Social-Media-Buttons im Responsive Design für deine Website
Schicke kostenlose Social-Media-Buttons im Responsive Design für deine Website

An Social-Media-Buttons scheiden sich die Geister. Bei diesen schicken Buttons im Responsive Design dürften aber selbst Zweifler schwach werden. » weiterlesen

Webydo: Responsive Websites ohne Code erstellen
Webydo: Responsive Websites ohne Code erstellen

Mit Webydo soll es Nutzern möglich sein, ohne eine Zeile Code responsive Websites zu erstellen. Wir haben einen Blick auf die Web-App geworfen. » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?