Kommentare 24

Responsive Webdesign mit CSS3 Media Queries: So funktioniert’s

CSS3 Media Queries machen es möglich, dass sich ein Webdesign automatisch an unterschiedliche Bildschirmformate anpasst. Für ein solches Webdesign hat sich der Begriff “Responsive Webdesign” (also ansprechendes, auf etwas reagierendes Design) durchgesetzt. Man legt dazu einfach die maximalen bzw. minimalen Maße eines Bildschirmformates (z.B. des iPads) fest, und kann dann für dieses Format eigene CSS-Styles bestimmen. In der Theorie klingt das eigentlich recht einfach, und auch die Einbindung der Media Queries ist nicht sehr kompliziert. Allerdings gibt es bei der Arbeit mit CSS3 Media Queries einiges zu bedenken, wie ja auch schon im Artikel “Was können CSS3 Media Queries wirklich leisten?” besprochen wurde.
Hast du dich für die Umsetzung eines Webseiten-Projekts mit CSS3 Media Queries entschieden, und auch schon entsprechende Layout (z.B. für eine große Desktop-Version, eine schmalere Tablet-Variante und eine kleine Smartphone-Version) deines Designs vorbereitet, kannst du mit der Umsetzung loslegen.

1. Die Vorgehensweise

Als erstes musst du dir überlegen, welche Webseiten-Größe deine Standard-Version werden soll. Dazu kannst du entweder die größte Version, also die Desktop-Ansicht wählen oder, falls du dein Webseiten-Projekt vor allem für mobile Geräte umsetzt, die mobile Smartphone-Version. Du kannst also entweder vom Großen ins Kleine oder andersrum arbeiten.

Wenn du dich für die mobile Webseiten-Version als Standard entscheidest, solltest du dir unbedingt die Tipps und Infos auf der Webseite von Luke W. anschauen. Die Seite von Luke W. Ist übrigens selbst ein Beispiel für eine solche “Mobile First”-Vorgehensweise.

Deine Standard-Version (egal ob Mobile oder Desktop) setzt du jetzt wie gewohnt mit CSS in einem Haupt-Stylesheet um. Im nächsten Schritt fügt du dann deine Media Queries ein, um die weiteren Bildschirmformate anzusprechen und mit CSS entsprechend um zu stylen.

2. CSS3 Media Queries einbinden

Es gibt zwei Möglichkeiten, die Media Queries aufzurufen. Entweder du fügst sie direkt in dein Haupt-Stylesheet ein. Dazu kannst du die @media only screen { } nutzen. Hier ein Beispiel:

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
...
}

Innerhalb der geschwungenen Klammern fügst du dann deine benötigten Styles ein.

Alternativ kannst du auch jeweils ein extra Stylesheet für jede Layout-Version anlegen, und diese innerhalb des head-Tags mit einem link-Tag aufrufen. Für die iPad-Version im Querformat benötigst du also also den Code:

<link rel="stylesheet" href="ipad-landscape.css" media="only screen and (min-device width : 768px) and (max-device-width : 1024px) and (orientation : landscape)">

Eine sehr hilfreiche Übersicht über die benötigten Formate findest du in der CSS3 Media Queries Vorlage “Hardboiled CSS3 Media Queries” von Andy Clarke. Hier kannst du dir verschiedene Formate genau anschauen, und den für dein Layout benötigten Code kopieren.

3. Der Viewport Meta-Tag

Neben der Integration der Media Queries ist außerdem wichtig, dass du den Viewport meta-Tag innerhalb deines head-Tags aufrufst.

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />

Mit diesem Code kannst du unterbinden, dass deine Webseite im iPhone automatisch auf eine passende Größe kleiner gezoomt wird.

4. Tipps für flexibles CSS-Stying

Im Gegensatz zur Umsetzung eines Webdesigns mit fester Breite, ist es beim Gestalten von flexiblen Layout sinnvoller mit Prozentzahlen zu arbeiten. So kannst deine Div-Container und font-size Angaben beispielsweise in Prozent angeben, und auch bei der Arbeit mit Images ist die Angabe von max-width:100%; sinnvoll.
Diese CSS-Angabe wird allerdings nicht vom Internet Explorer 9 unterstützt, einen ausführlichen Artikel zu dieser Problematik schreibt auch Ethan Marcotte in seinem Artikel über Fluid Images.

Sehr wichtig ist meiner Meinung nach bei der Umsetzung eines Designs mit CSS3 Media Queries, dass man die Layouts in den Grundzügen im CSS anlegt und dann das Design immer wieder in verschiedenen Browsern und auf den unterschiedlichen Geräten testet. Nur so bekommst du ein Gefühl für die passenden Schriftgrößen und Maße.

Tipps zum Weiterlesen

Die folgenden Blog-Artikel, Code-Beispiele und Tools bieten eine hilfreiche Grundlage, um mit der Umsetzung einer mit CSS Media Queries optimierten Webseite loszulegen.

Hast du bereits eigene Erfahrungen mit den CSS3 Media Queries machen können? Auf was sollte man deiner Meinung nach bei der Umsetzung eines Responsive Layouts besonders achten, und kennst du weitere informative Artikel oder Tools zum Thema? Über dein Feedback und deine Tipps freue ich mich sehr!

24 Kommentare

  1. Wow! Ihr geht ja ganz schön ausführlich in die Media Queries! Werde bei Gelegenheit auch mal mein Blog daran anpassen.

    Eine Frage hätte ich noch: Weiß einer von euch Zahlen mit einer Auflistung der Bildschirmformate und der Prozentualen Nutzung der Formate. Wer ganz hilfreich um zu wissen wo es sich am meisten lohnt anzupassen!

    Viele Grüße
    Vincent

    • Hallo Vincent,

      vielen Dank für dein Feedback, ja, uns gefällt der Media Queries Ansatz ziemlich gut, auch wenn die Umsetzung wie ja schon erwähnt bestimmt nicht für jede Webseite die passende Lösung ist :-)

      So eine Quelle kenne ich selbst nicht, wobei der Vorteil von Media Queries auch ist, dass man (neben den festen Formaten) ein flexibles, fluid Layout gestalten kann. So können auch neue Formate und Zwischengrößen angesprochen werden.

      Viele Grüße,
      Ellen

  2. Andre

    Super genial :D
    Danke. Ich möchte hier noch einen Wunsch äußern: Kannst du mal so ein Grid-System erläutern (wenn du es getan hast, hab ich es noch nicht gelesen :) ). In einem meiner Webdesign Büchern steht auch was zum Goldenen Schnitt 1.62.
    Was sollte man denn nun nehmen?

    • Hallo Andre,

      vielen Dank für dein Feedback, ja, ein flexibles Layout mit Gridsystem etwas näher zu erläutern ist eine super Idee. Vielen Dank für diesen Tipp :-)

      Wenn du ein Webdesign in einem CSS-Grid umsetzen möchtest, dass Media Queries nutzt, schau doch einmal in den Artikel zum 1140px Grid rein. Indem du auf der Demo-Seite des Grids dein Browser-Fenster in der Größe verschiebst, bekommst du schon eine recht gute Vorstellung, wie die Inhalte in einem solchen Gridsystem untergebracht werden können.

      Viele Grüße,
      Ellen

  3. Vielen Dank für den Hinweis zum Viewport meta-Tag – und für die angenehm detaillierte und dennoch übersichtliche Darstellung.

    Beim prozentuellen Definieren der Div-Container ist eine großzügige Gestaltung mit genügend Weißraum vermutlich unerlässlich? Auf pixelgenaues Rendering kann man ja bei der Umsetzung von Prozentangaben nicht bauen, oder was sind eure Erfahrungen?

    • Hallo BAR M,
      freut mich, dass dir die Übersicht zum Thema CSS3 Media Queries gefällt :-)

      Ja, du hast Recht, die Angaben der DIVs in Prozent statt in Pixel ist anfangs wirklich etwas ungewöhnlich. Vor allem, wenn man ein für möglichst viele Formate passendes Layout gestalten will. Aus der eigenen Erfahrung mit dem Ari-Theme sind wir nach ein wenig Grundarbeit mit Prozentzahlen recht schnell ins CSS gegangen, und haben das Layout in einer Demo direkt im Browser getestet und angepasst.

      Viele Grüße,
      Ellen

  4. Wollte noch anmerken das oft die Android Tablets vernachlässigt werden (in der Auflösung) , zwar ist das iPad meines Wissens nach das meistgenutze Tablet aber man sollte auch die gucken ob die eigene Website auf anderen Tablets läuft.

    Beim iPhone das gleiche, alle denken es gibt nur iPhone-Besitzer :)

    Gruß
    Vincent

  5. Thomas Sausen

    Responsive Webdesign ist der neuste Trend. Wer den englischsprachigen Raum beobachtet meint, dass es fast der heilige Gral ist.

    Ich tue mich noch sehr schwer mit der Umsetzung. Klappt alles nicht so, wie ich das möchte. Auch Frage ich mich, ob die Sache mit dem Image-Resizing wirklich cool ist, da die Grafik ja immer die Dateigröße xy hat und nur kleiner dargestellt wird (außer IE9). Und gerade bei Smartphones sollten die Websites doch nicht so riesig von der Dateigöße sein. Daher verstehe ich den Ansatz “Mobile first”, frage mich aber, ob die guten alten Methoden ala spezielle Handheld-Version mit Responsive Webdesign wirklich ausgedient haben?

    Da würde mich eure Meinung interessieren.

    Genauso, ob ihr für Kunden oder eigene Projekte die neue Methode einsetzt bzw kurzfristig einsetzen werdet. Wird dieser Blog ggf. bald responsive?

    • Hallo Thomas,

      vielen Dank für dein Feedback zum Thema Responsive Webdesign. Du hast Recht, es gibt bei der Umsetzung wirklich etliches, was zu bedenken ist bzw. einfach anders umzusetzen ist, als bisher gewohnt (z.B. die Image-Größen). Dennoch finde ich die Option, mit Hilfe von Media Queries unterschiedliche Browsergrößen ansprechen zu können, sehr spannend und viel versprechend.

      Nachdem wir das Ari Theme mit CSS3 Media Queries umgesetzt haben, arbeiten wir im Augenblick auch an einem etwas größerem Theme für den Elmastudio-Blog. Auch hier wollen wir wieder CSS3 Media Queries nutzen. Ich denke, die Lösung ist eventuell nicht für alle Webseiten geeignet. Wenn sehr viele Bilder oder Slider im Einsatz sind, kann es bei den großen Datenmengen schon etwas schwierig werden.

      Viele Grüße,
      Ellen

  6. DrGonard

    Vielen Dank für den Blog.
    Ich bin auch gerade dabei mich in das Thema Mediaqueries und Anpassen der Website an mobile Geräte einzuarbeiten. Dafür war dein Blog auf jeden Fall schonmal eine weiter Hilfe ;)
    Ich denke es wäre auch noch ganz interessant ein Blog (von dir ;) ) zu lesen, wo weitere Informationen aufgezeigt werden, die noch für die Erstellung/Anpassung einer Website an Smartphones/mobile Geräte zu beachten sind. Mir spontan würde da die Anzeige der verwendeten Bilder einfallen. Denn gerade bei Smartphones ist die Ladezeit der Seite wichtig und bei vielen großen Bilder wird diese viel zu lang, was dann dazu führen könnte, das der Nutzer eventuell genervt ist und die Seite wieder verlässt. Dies nur als kleine Anregung ;)
    Ich freu mich mehr von Dir zu lesen.

    LG DrGonard ;)

  7. Super Artikel. Sehr ausführlich. Media Queries sind wahrscheinlich noch nicht das letzte Wort im responsive Webdesign, aber eine sehr nette Möglichkeit für alle Devices zu schreiben. Außerdem übersichtlich und einfach… Danke Leute!

  8. Pingback: Bilder-Test | picolight

  9. Danke für die kleine EInführung. Bin ebenfalls dabei mich gerade mit CSS Media Queries und Responsive Webdesign einzuarbeiten und bin gespannt wie viel aufwendiger das Verfahren ist. Mich würde auch interessieren ob es noch alternativen zu Media Queries gibt.

  10. Pingback: WordPress Artikelbilder für Responsive Themes › Stefan Schmiedel

  11. Hallo Ellen,
    danke für den Beitrag. Auf meiner eigenen Website habe ich für die Desktop- und Mobile-Variante gleichen Content mittels mediaqueries designt. Nun soll ich für einen Bekannten eine Homepage erstellen, wo sich das Problem stellt, dass z.B. für die mobile Variante Bilder der Desktop-Version ganz fehlen sollen. Dies kann man ja mit den queries nicht einfach wegstylen. Hast du einen Tip, wie man sowas professionell angeht? Vielen Dank für deine Antwort im voraus.
    Gruß, Andreas

  12. Pingback: Responsive Design: Muss das sein? » TechNews

  13. Kay

    @Andreas: Du könntest die Bilder, die in mobilen Version nicht sichtbar sein sollen, einen in DIV oder SPAN mit eigenem Klassennamen packen und deren Sichtbarkeit im mobilen CSS auf ‘hidden’ setzen.

Schreibe eine Antwort