Kommentare 15

Webdesign Inspiration: Flexible Design-Layouts mit CSS3 Media Queries

Da Webseiten immer öfter auch auf iPads, iPhones und anderen Smartphones angeschaut werden, stellen die unterschiedlichen Screengrößen der mobilen Geräte Webdesigner vor eine neue Herausforderung. Ein spannender und vielseitiger Lösungsansatz für diese Herausforderung ist die Verwendung von CSS3 Media Queries. Auch wenn diese Technik noch recht neu ist, haben sich bereits etliche Webdesigner an die Arbeit gemacht und inspirierende, neue Webseiten-Layouts gezaubert, die sich an unterschiedliche Bildschirmgrößen anpassen können.

1. Design Inspirationen

Die Thematik des „Responsive Webdesigns“ (responsive = reagierend), also die Gestaltung von Webseiten, die sich ihrer Umgebung anpassen wurde in den letzten Monaten unter Webdesignern und Webentwicklern bereits heiß diskutiert. Die folgenden Webseiten sind inspirierende Beispiele für die Umsetzung dieses neuen, responsive Webdesigns.

SimpleBits

Das Webdesign-Layout von Dan Cederholms Webseite SimpleBits ist dreispaltig angelegt. Die Seitennavigation in der linken Sidebar ist fixed angelegt, bleibt also immer sichtbar. Erst ab einer Screenbreite von 650 Pixeln rutscht der Seiteninhalt unter die Navigation und diese wechselt in eine horizontale Ansicht.

Webseiten mit CSS3 Media Queries
Dreispaltige Ansicht mit einer Webseiten-Breite von 960 Pixeln.

Webseiten mit CSS3 Media Queries
Zweispaltige Variante, z.B. für die Ansicht auf einem iPad.

Webseiten mit CSS3 Media Queries

Auch die iPhone Variante ist angenehmer lesbar.

Hicksdesign

Das Journal von Hicksdesign war eine der ersten Webseiten, die mit Hilfe von CSS3 Media Queries realisiert wurde. Die Seite hat insgesamt vier definierte Layout-Breiten, und reduziert sich jeweils um eine Spalte. In seinem Artikel “Finally a Fluid Hicksdesign” beschreibt Jon Hicks den Redesign Prozess der Webseite.

Webseiten mit CSS3 Media Queries
Die dreispaltige Variante der Hicksdesign Webseite.

Webseiten mit CSS3 Media Queries
Bei einer Breite von 800 Pixel wird das Layout zweispaltig.

Webseiten mit CSS3 Media Queries

Und schließlich die iPhone Version ab 480 Pixel.

CSS-Tricks

Auch Chris Coyier von CSS-Tricks hat seine Webseite erst kürzlich redesignt und dabei CSS3 Media Queries genutzt. Besonders die einspaltige Smartphone-Variante mit der großen farbigen Navigation ist sehr ansprechend umgesetzt.

Webseiten mit CSS3 Media Queries
Auf einem großen Bildschirm ist die CSS-Tricks Seite jetzt dreispaltig.

Webseiten mit CSS3 Media Queries
Auf einem schmaleren Screen wird die mittlere Spalte ausgeblendet.

Webseiten mit CSS3 Media Queries

Eine großzügige Navigation für die iPhone-Ansicht.

Hardboiled Web Design

Auch die Webseite “Hardboiled Web Design” von Andy Clarke verwendet CSS3 Media Queries, um auf die Bildschirmgrößen der Besucher zu reagieren. Interessant gelöst ist hier vor allem, wie sich die Haupt-Navigation in der Smartphone-Ansicht anpasst.

Webseiten mit CSS3 Media Queries
Die Grundversion der Webseite ist klassisch zweispaltig angelegt.

Webseiten mit CSS3 Media Queries
Bei kleineren Bildschirmen oder iPads wechselt die Sidebar in den Footer.

Webseiten mit CSS3 Media Queries

Die iPhone-Version hat eine Extra-Navigation.

iA Information Architects

Das iA Theme von Information Architects hat 4 Layout-Versionen. Im Gegensatz zu der Umsetzung von Hicksdesign oder SimpleBits wird hier auf ein komplett flexibles Layout verzichtet. Die Schriften bleiben beispielsweise in der Breite jeweils festgelegt, und passen sich nicht auch noch einmal an die Breite des Bildschirms an. So kann der Wechsel zwischen den verschiedene Layout-Varianten leichter kontrolliert werden.

Webseiten mit CSS3 Media Queries
Im Grundlayout ist die Webseite 940 Pixel breit.

Webseiten mit CSS3 Media Queries
In der iPad-Version wird der Inhalt einspaltig.

Webseiten mit CSS3 Media Queries

Für Smartphones gibt es eine reduzierte Header-Variante.

Think Vitamin

Auch von der Think Vitamin-Webseite gibt es mehrere Versionen. Vor allem die übersichtliche Artikel- und Textansicht in der einspaltigen Smartphone-Variante finde ich hier gelungen. Sehr schön sieht man hier auch, wie sich Bilder und Videos ebenfalls automatisch der Bildschirm-Größe anpassen.

Webseiten mit CSS3 Media Queries
Auf großen Bildschirmen ist das Layout von Think Vitamin zweispaltig angelegt.

Webseiten mit CSS3 Media Queries
Für die iPad-Ansicht ändert sich die Haupt-Navigation.

Webseiten mit CSS3 Media Queries

Auf dem iPhone sieht man eine weitere Variante der Navigation.

THIS IS TEIXIDÓ

Die sehr schön gestaltete Webseite des Design Studios TEIXIDÓ hat ebenfalls mit CSS3 Media Queries umgesetzte, flexible Layout-Varianten. Die Seite arbeitet ähnlich wie Information Architects mit festen Breiten. Auf diese Weise können die aufwendigen Inhalte, wie Grafiken, Bilder und mehrspaltige Texte am leichtesten kontrolliert werden.

Webseiten mit CSS3 Media Queries
Das Grund-Layout der Webseite arbeitet mit großen Images und Grafiken.

Webseiten mit CSS3 Media Queries
Je nach Bildschirmgröße wechseln die Grafiken und die Hauptnavigation.

Webseiten mit CSS3 Media Queries

Auch die Smartphone-Version ist sehr übersichtlich umgesetzt.

2. CSS3 Media Queries erklärt

Die oben vorgestellten Webseiten-Layouts sind alle mit Hilfe von CSS3 Media Queries umgesetzt. Media Queries funktionieren eigentlich genauso, wie die bereits im CSS2 verwendeten, von einem Medien-Typ (z.B. print oder screen) abhängigen Stylesheets.

Praktisch ist an den Media Queries allerdings, dass man eben nun auch eine spezielle Bildschirmbreite angeben kann, ab der man ein Extra-Stylesheet verwenden möchte.

Das Prinzip ist also eigentlich ganz simpel. Du legst in deinem Stylesheet einfach ein Webseiten-Layout für eine bestimmte Pixelbreite an (z.B. maximal 480 Pixel für das Querformat von iPhones). Mit Hilfe der Media Queries kannst du dann festlegen, dass ab dieser Pixelbreite das Haupt-Stylesheet mit den neuen, speziell für die Screen-Größe des iPhones angepassten Styles überschrieben werden soll.

Deine neuen CSS-Styles fügst du entweder über @import unterhalb deines Haupt-Stylesheets ein. Alternativ kannst du auch ein eigenes Stylesheet für das 480 Pixel-Layout erstellen und es über einen HTML Link-tag einfügen. Eine ausführliche Beschreibung zur Verwendung von
CSS3 Media Queries inklusive einer Demo findest du im Artikel “CSS3 Media Queries” bei Webdesigner Wall.

Wenn du die Erstellung von flexiblen Layouts mit Hilfe von CSS3 Media Queries selbst ausprobieren möchtest, kannst du dir am besten erst einmal ein ganz simples Design (nur aus farbigen Flächen für Header, Inhalt, Sidebar und Footer) anlegen, und so mit dem Verhalten des Layouts in verschiedenen Bildschirmgrößen experimentieren.

Um mehr über die Technik der CSS3 Media Queries zu erfahren, kannst du dir außerdem folgende Blog-Artikel anschauen. Hier findest du jede Menge hilfreiche Tipps und Erklärungen.

Noch mehr Lesestoff

Kennst du weitere inspirierende Webseiten, die CSS3 Media Queries bereits für ein flexibles Webdesign nutzen? Oder hast Tipps für Blog-Artikel oder hilfreiche Ressourcen im Web, die sich ebenfalls mit diesem Thema auseinandersetzen? Über dein Feedback und deine Tipps freue ich mich sehr!

15 Kommentare

    • Hallo Vincent,

      vielen Dank für dein Feedback zum Artikel. Ja, das stimmt! Besonders durch die Beliebtheit des iPads denke ich, hat sich da einiges getan bzw. wird es auch in der Zukunft noch :-)

      Gruß Manuel

  1. Samuel

    Hey,
    ich finde die Beispiele echt Klasse! In begrenztem Rahmen kannte ich die Media Queries schon aus etlichen Snippets. Aber wie genau das am Beispiel aussehen kann, könnte ich das nicht besser beschreiben.
    Grüße Samuel

    • Hallo Samuel,

      vielen Dank für deinen Kommentar. Es freut mich, dass dir der Artikel gefällt :-)

      Ja, mit den CSS3 Media Queries lassen sich echt klasse Sachen machen und für flexible Webseiten ist die Funktion einfach genial!

      Gruß Manuel

  2. Hallo Manuel,
    vielen Dank für die interessante Zusammenstellung. Ich schließe mich Vincents Meinung an. Ich kenne sehr viele Leute die Webseiten mit mobilen Geräten aufrufen. Muss ich mich wohl auch mal mit auseinandersetzen. Danke für den Einstieg dazu.
    Gruß,
    Stefan

    • Hallo Stefan,

      vielen Dank für dein Feedback. Es freut mich, dass dir der Artikel gefällt :-)

      Ich denke auch, dass die Nutzung von mobilen Geräten immer wichtiger wird bzw. bereits ist. Wir basteln auch gerade etwas mit den CSS3 Media Queries herum, und werden bald bestimmt auch noch eine ausführliche Beschreibung hier auf dem Blog zu veröffentlichen :-)

      Gruß Manuel

    • Hallo Bloggerschmidt,

      vielen Dank für deinen Kommentar und den Hinweis auf das 1140rpx Grid Framework. Das System ist ja echt genial und funktioniert klasse mit den fluid Layouts :-)

      Vielen Dank für den wertvollen Tipp,
      Gruß Manuel

    • @Webstandard-Blog,

      vielen Dank für dein Feedback. Es freut mich, dass dir der Artikel gefallen hat :-)

      Ja, mit den Media Queries lässt sich wirklich jede Menge machen, und es ist ein tolles Thema für modernes und vor allem flexibles Webdesign. Genial, dass du gerade an einem Buch arbeitest und dieses Thema dort auch ausführlich bearbeiten wirst. Da bin ich ja schon sehr gespannt :-)

      Gruß Manuel

  3. Edi

    Der Nachteil der neuen Media-Queries ist, dass sie die bisher gängigen Javascript-/PHP-/usw-Mobile-Weichen nicht ersetzen können, was sehr schade ist! Nehmen wir als Beispiel das neue I-Phone 4 mit einer Bildschirmauflösung von 960 x 640px. Was nützt es nun, wenn ich ein tolles Stylesheet für 480 x 320px entwerfe, das IPhone 4 mit seiner Auflösung aber trotzdem auf das Desktop-Stylesheet zurückgreift, obwohl das Display nicht grösser ist, als z.B beim Iphone 3 mit den 480 x 320px (bei dem ein extra Stylesheet durchaus wieder Sinn macht).

Schreibe eine Antwort