- CSS
- Media Queries
- Responsive Webdesign
Von Jonas
Responsive Websites besitzen ein flexibles Layout. Mit Hilfe von CSS MediaQueries werden Breakpoints gesetzt und das Design für Smartphones und Tablets angepasst.
Aktualisiert am Ein Kommentar
Responsive Websitesbasieren auf flexiblen Gestaltungsrastern und passen sich automatisch andieunterschiedlich großen Displays verschiedener (mobiler) Endgerätean. Für die optimaleDarstellung auf Tablets oder Smartphones werden dazu mithilfe von CSS Media Queries sog. Breakpoints definiert, an denen das Layout einer Website umbricht.In diesem Artikel zeige ich euch, wie dieDesktopversion einerWebsite mit Hilfe von Breakpoints responsiv gestaltet wird, und welche Display-Eigenschaftenneben der Displaygrößenoch abgefragt werden können.
Mit CSS-Medientypen die Ausgabe auf verschiedenen Geräten beeinflussen
Am Beispiel der Druckausgabe einer Website lässt sich gut veranschaulichen, wie mit Hilfe der CSS-Regel @media print {} das Aussehen einer Website auf verschiedenen Ausgabegeräten verändert werden kann.Sofern keineCSS-Regel für das Ausgabegerät Drucker definiert wurde, wird die Internetseite genauso ausgedruckt, wie der Browser sie auchdarstellt.
Der Code der Beispiel-Seite sieht wie folgt aus:
<body> <div class="container"> <header class="header"> <img class="logo" src="https://placehold.it/200x80"> <nav class="navi"> <ul> <li><a href="#">Startseite</a></li> <li><a href="#">Leistungen</a></li> <li><a href="#">Service</a></li> <li><a href="#">Kontakt</a></li> </ul> </nav> </header> <article class="content"> <h1>Lorem ipsum dolor sit amet</h1> <p>Lorem ipsum dolor sit amet …</p> </article> <aside class="sidebar"> <h3>Lorem ipsum dolor sit amet</h3> <p>Lorem ipsum dolor sit amet …</p> </aside> </div></body></html>.container { background: white; max-width: 960px; margin: 2em auto;}.header { width: 100%; float: left; margin-bottom: 2em; background: #ddd;}.logo { float: left; }.navi { float: right; margin-right: 1em;}.navi ul { list-style: none; padding: 0;}.navi li { float: left; }.navi a { display: block; background: white; padding: 1em;}.content { width: 62%; float: left;}.sidebar { width: 34%; float: right;}Beispiel ansehen
Wennunsere Beispiel-Website gedruckt wird,ist nur der Hauptinhalt relevant – die Navigation und die Seitenleiste sind in diesem Beispiel unwichtig.Um die Druckansicht der Website optimierenzu können, schreiben wir die @media-Regel am Ende des Stylesheets und sprechen mit demMedientyp printeinen Drucker an.
@media print { /* Hier folgen die Druck-spezifischen Angaben */}Für den Ausdruck werden die Navigation und die Seitenleiste nicht benötigt. Sie werden daher ausgeblendet. Das Logo soll in der Druck-Ansicht oben rechts stehen und der Inhalt überdie gesamte Breite des Dokuments laufen. Im CSS-Code sieht das Beispiel dannfolgendermaßen aus:
/* abweichende CSS-Regeln für Drucker, die den vorher notierten CSS-Code überschreiben */@media print { .logo {float:right;} .navi, .sidebar {display:none;} .content {width:100%;}}
Beispiel anschauen
Websites mit Hilfe von Media Queriesresponsiv gestalten
Im responsive Webdesign wird mit Media Queries (Medienabfragen) zunächst der Medientyp screen (Bildschirm) angesprochen und um die Abfrage (Query) nach einerEigenschaften, in diesem Fall derViewport-Größe, erweitert. Somit ist es möglich, das Layout einer Website anhand bestimmter Pixelbreiten des Viewports anzupassen. Die Punkte an denen das Layout schlagartig umbricht nennt man Breakpoints (Bruchstellen).
Den passenden Breakpoint finden
Aufgrund der Vielzahl an Smartphones und Tablets ist es fast unmöglich, alle gerätespezifischen Displaygrößen zu berücksichtigen. Daher empfiehlt es sich, den Breakpoint nach dem Layout auszurichten. Um herauszufinden an welchen StellenderBreakpoint gesetzt werden muss, bieten sich dieEntwickler-Tools derBrowsers an. In meinem Fall öffne ich die Website in Google Chrome und wähle nach einem Rechtsklick auf die Seite, im Kontextmenü den Eintrag »Element untersuchen« aus.
Beim Verkleinern desBrowser-Fensters sehe ich in den Entwickler-Tools oben rechts, dass abeiner Viewport-Breitekleiner als 720Pixeleine Fehldarstellung entsteht. Die Seitenleiste wird zu schmal und die Navigation schiebt sich ab einer Viewportbreitevon620 Pixel treppenartig unter das Logo.
@media screen and (max-width: 720px)
Um der Fehldarstellung entgegenzuwirken setzen wir nun zwei Breakpoints. Denersten Breakpoint definieren wir bei 720 Pixeln. Die oben beschriebene @media-Regel wird jetzt nach der Angabe des Medientyps screen um die Abfragenach der Displaygröße (max-width) erweitert. Das heißt übersetzt, dass bei einer Bildschirmgröße kleiner als 720px mit dem Aussehen der Website etwas passieren soll.
…/* CSS-Regel für Displays, die kleiner als 720px sind */@media screen and (max-width:720px) { …}Wirmöchten, dass sich an dieser Stelle der Inhalt (article class="content") und die Seitenleiste (aside class="sidebar") untereinander anordnen. Das erreiche ich mit einer Breite (width) von 100% für beide Elemente.
…/* CSS-Regel für Displays, die kleiner als 720px sind */@media screen and (max-width:720px) { .content, .sidebar { width:100%; }}Beispiel ansehen
Beim Verkleinern des Browserfensters seht ihr nun, dass sich die Seitenleiste unter dem Inhalt (article class="content")anordnet. Das liegt daran, dass im HTML-Code die Seitenleiste aside class="sidebar" nach dem Artikel notiert wurde.
<article class="content"> …</article><aside class="sidebar"> …</aside>Responsive Navigation für die Ansicht im Smartphone
Der zweite Breakpoint wird jetzt bei 620px gesetzt und die Navigation muss entsprechend angepasst werden. Ich möchte, dass die Menüpunkte untereinander angeordnet über die gesamte Breite des Displays laufen. Die Navigation wird ursprünglich rechts gefloatet und muss jetzt nach links versetzt werden.
…/* abweichende CSS-Regel für Displays, die kleiner als 720px sind */@media screen and (max-width:720px) { .content, .sidebar {width:100%;}}/* abweichende CSS-Regel für Displays, die kleiner als 620px sind */@media screen and (max-width:620px) { .navi {float:left; width:100%;} .navi li {width:100%;}}…Jetzt möchte ich den Menüpunkten noch einen dunkleren Hintergrundzuweisenund sie zusammen mit dem Logo im Header zentriert darstellen.
…/* abweichende CSS-Regel für Displays, die kleiner als 720px sind */@media screen and (max-width:720px) { .content, .sidebar {width:100%;}}/* abweichende CSS-Regel für Displays, die kleiner als 620px sind */@media screen and (max-width:620px) { .header {text-align:center;} .logo {float:none;} .navi {float:left; width:100%;} .navi li {width:100%;} .navi a {background:#333; color:white;}}…Beispiel ansehen
Breakpoints in die Einheit em umwandeln
Bei flexiblen Rastern, die die Basis für responsive Webseiten sind, wird mit Prozentwerten gearbeitet. Da liegt es nahe, die Breakpoints bei den Media Queries ebenfalls ineinerrelativen Einheit zu schreiben. In diesem Fall bietet sich die typografische Einheit em an (1em = 16px). Die Verwendung einer flexiblen Einheitwirkt sich beispielsweise vorteilhaft bei unterschiedlichen Zoomstufen und Schriftgrößen aus. Einwichtiger Punkt für barrierefreie Websites.
CSS-Code
…/* Umrechnung 720 Pixel / 16px = 45em */@media screen and (max-width: 45em) { .content, .sidebar {width:100%;}}/* Umrechnung 620 Pixel / 16px = 38.75em */@media screen and (max-width: 38.75em) { .header {text-align:center;} .logo {float:none;} .navi {float:left; width:100%;} .navi li {width:100%;} .navi a {background:#333; color:white;}}…Die Ausrichtung mobiler Endgeräte abfragen
Mit Media Queries lassen sich außer der Displaygröße noch weitere Eigenschaften der Ausgabegeräte abfragen. Zum Beispiel ob das Gerät im Hoch- oder Querformat gehalten wird.
In meinem Beispiel vergebe ich bei einemHochformat (orientation:portrait) einen gelben und beiQuerformat (orientation:landscape) einen hellgrünen Hintergrund.
…@media screen and (orientation: portrait) { body {background:gold;}}@media screen and (orientation: landscape) { body {background:lime;}}…Vollständiges Beispiel
Hier seht ihr nochmal den gesamten CSS-Code des Beispiels:
.container { background: white; max-width: 960px; margin: 2em auto;}.header { width: 100%; float: left; margin-bottom: 2em; background: #ddd;}.logo { float: left; }.navi { float: right; margin-right: 1em;}.navi ul { list-style: none; padding: 0;}.navi li { float: left; }.navi a { display: block; background: white; padding: 1em;}.content { width: 62%; float: left;}.sidebar { width: 34%; float: right;}@media print { .logo {float:right;} .navi, .sidebar {display:none;} .content {width:100%;}}@media screen and (max-width: 45em) { .content, .sidebar {width:100%;}}@media screen and (max-width: 38.75em) { .header {text-align:center;} .logo {float:none;} .navi {float:left; width:100%;} .navi li {width:100%;} .navi a {background:#333; color:white;}}@media screen and (orientation:portrait) { body {background:gold;}}@media screen and (orientation:landscape) { body {background:lime;}}Beispiel ansehen
Mobile First
In diesem Beitrag wurde der »Desktop-First«-Ansatz erklärt.Wie ihr das Beispiel »mobile First« aufbaut und worin die Vorteile dieser Art der Umsetzung bestehen, erfahrt in unserem ergänzenden Beitrag Responsive Design und Mobile First
Geschrieben von Jonas
Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UIDesign, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.
Feedback & Ergänzungen – 1Kommentar
-
Christopher
schrieb am 11.08.2015 um03:07Uhr:
Guter und hilfreicher Beitrag , responsive ist sehr wichtig, von 10 Besucher auf einer Webseite sind ca 7 mit einem mobilen Gerät online. Zudem auch im Seo Bereich ist responsive sehr wichtig um ein gutes ranking zu erzeugen. Falls also jemand noch keine responsive Webseite hat, sollte dies schnell ändern-
Antworten
Kommentar zu dieser Seite
Falls du es verpasst hast
- CSS-States für Buttons und Links→
Wir benötigen Ihre Zustimmung, bevor Sie unsere Website weiter besuchen können. Wenn Sie unter 16 Jahre alt sind und Ihre Zustimmung zu freiwilligen Diensten geben möchten, müssen Sie Ihre Erziehungsberechtigten um Erlaubnis bitten. Wir verwenden Cookies und andere Technologien auf unserer Website. Einige von ihnen sind essenziell, während andere uns helfen, diese Website und Ihre Erfahrung zu verbessern. Personenbezogene Daten können verarbeitet werden (z. B. IP-Adressen), z. B. für personalisierte Anzeigen und Inhalte oder Anzeigen- und Inhaltsmessung. Weitere Informationen über die Verwendung Ihrer Daten finden Sie in unserer Datenschutzerklärung. Sie können Ihre Auswahl jederzeit unter Einstellungen widerrufen oder anpassen.
