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.
- Hardboiled CSS Media Queries bietet eine Code-Vorlage von Andy Clarke.
- Less Framework 3 ist ein praktischer Framework, um dein Webseiten-Projekt schnell zu starten.
- Das 1140px CSS Gridsystem ist ein mit CSS3 Media Queries optimiertes, flexibles Gridsystem. Im Artikel Das 1140px Grid System: Mit CSS3 Media Queries für mobile Geräte optimiert findest du weitere Infos.
- Media queries, handier than you think von Harry Roberts auf CSS Wizardry.
- Media Queries: Mobile Versionen von Webseiten mit CSS3 erstellen bei Dr. Web.
- Working with Media Queries von Nathan Staines, zum Artikel gehört außerdem eine sehr schöne CSS3 Media Queries Live-Demo.
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!
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
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
Danke,
Darauf freue ich mich schon :D
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
PS. http://lukew.com/ wird nicht aufgelöst.
Ich glaube gestern gab es auf der Seite eine kurze downtime, inzwischen ist die Seite aber wieder online :-)
Sehr schön - und so passend: ggf. muss / darf ich mich in Kürze mit Designanpassungen für iPhone und iPad beschäftigen.
Danke :-)
Hallo Jürgen,
vielen Dank für deinen Kommentar, klasse, dass du die Tipps so gut gebrauchen kannst :-)
Viel Spaß beim designen und viele Grüße,
Ellen
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
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
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 ;)
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!
Pingback: Bilder-Test | picolight
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.