--> Responsive Webdesign mit CSS Media Queries - Bunterrichten

Responsive Webdesign mit CSS Media Queries

(Letztes Update von Niklas Baumgärtler am 5.3.2021)

Heute kommen wir zu einem Thema, das in den letzten Jahren mit der flächendeckenden Verbreitung der Smartphones enorm an Bedeutung gewonnen hat: Responsive Design mit CSS Media Queries. Damit ist gemeint, das sich Webseiten an die verschiedenen Betrachtungs-Größen auf Smartphones, Tablets und Laptops/Computern anpassen sollten.

Lass uns zur Abwechslung mal ein wenig in die Geschichte der Web-Entwicklung zurückgehen. Wann und warum wurden CSS Media Queries (und das Responsive Design im Allgemeinen) eigentlich so richtig relevant für die Webseiten-Entwicklung?

1. Responsive Design, Media Queries und Flexboxen: Zusammenhänge

Vor einigen Jahren noch war die Smartphone-Nutzung vernachlässigbar. Doch zwische 2011 und 2013 explodierte die Nutzung derart, dass Webseiten-Betreiber darauf reagieren mussten. Wenn man in Google Trends die Begriffe “Responsive Design” und “Media Query” von 2004 bis jetzt (Juni 2020) für Deutschland (Österreich hat oft zu wenige Vergleichsdaten) vergleicht, sieht das Ganze so aus wie unten. Was fällt dir auf? (Blau steht für “Responsive Design”, rot für “Media Query” und gelb für “Flexbox”)

Trends Media Queries

1.1 Das Aufkommen der Idee vom Responsive Design

Irgendwann zwischen 2011 und 2013 explodierte die Suche nach dem Begriff “Responsive Design”. Dieser Ansatz blieb dann einige Jahre ein enormer Trend, bevor er um das Jahr 2016 langsam wieder nachließ und sich auf etwa 25% der Maximalwerte einpendelte.

In dieser “Trendphase” dürften wohl die meisten Webseiten-Betreiber realisiert haben, dass sie um das Thema nicht mehr herumkommen. Sie setzten entsprechende Schritte, um ihre Webseiten responsiver zu gestalten.

Dann nahm das Interesse langsam wieder ab – einfach weil Webseiten irgendwann von Anfang an mit dem Responsive Design im Hinterkopf gestaltet wurden.

1.2 Das Aufkommen der Media Query

Das Thema “Media Query” (rot) war begann ungefähr zur selben Zeit wirklich Fahrt aufzunehmen. Aber es erreichte nicht die selbe Menge an Suchanfragen wie die Suche nach “Responsive Design”. Das ist nur logisch, weil Media Queries nicht die einzige Lösung für das Bedürfnis nach “Responsive Design” darstellen – wenn auch eine sehr nützliche.

Etwa um 2018 pendelten sich die Suchanfragen nach den beiden Begriffen auf ungefähr demselben Volumen ein, nachdem sich die Media Queries als eine Teil-Lösung etabliert hatten.

1.3 Das Aufkommen der Flexbox

Das Thema “Flexbox” (gelb) begann etwas zeitversetzt an Bedeutung zuzunehmen und daher erst später wieder abzuflauen. Wobei anzunehmen ist, dass auch Flexboxen ähnlich wie Media Queries irgendwann etabliert genug sind, dass Webseiten-Betreiber sie als als normalen Bestandteil ihrer Webseiten ansehen.

Ich habe diesen kleinen Ausflug in die Geschichte der Web-Entwicklung auch deshalb mit dir unternommen, damit du die sehr nützliche Webseite Google Trends etwas kennenlernst. Mit ihr kannst du nämlich herausfinden, wie sich die Suchanfragen zu bestimmten Begriffen im Laufe der Zeit entwickeln.

So kannst du z.B. falls du ein Autohändler bist herausfinden, wann im Jahr Menschen in einem bestimmten Land (oder sogar einer Region) nach dem Begriff “Auto kaufen” suchen.

Dort im Jahresverlauf, wo über mehrere Jahre hinweg am wenigsten danach gesucht wurde, würde es sich dann z.B. am besten anbieten, deinen Urlaub einzuplanen. Und umgekehrt wird es dort im Jahr, wo am meisten danach gesucht wurde, vielleicht am besten sein, deine Werbung zu schalten oder Aktionen durchzuführen.

Aber nun, nach diesem kleinen Ausflug in die Geschichte der Web-Entwicklung, zurück zu unserem eigentlichen Thema: Responsive Design mit Hilfe von CSS Media Queries. Was sind Media Queries überhaupt?

2. Was ist eine CSS Media Query?

Kannst du dich noch an unsere CSS-Bedingungen erinnern, z.B. :hover oder :nth-child(3)? Media Queries sind auch Bedingungen, aber sowas wie “überdimensionale” Bedingungen, unter die dann mehrere CSS-Selektoren zusammengefasst werden können. Also gewissermaßen so:

  • Wenn (überdimensionale Bedingung) ist erfüllt
    • Dann schau nach, was in diesem Block vielleicht zutrifft
    • Sonst ignoriere gleich den ganzen Block und alles was darin ist

Bei den “überdimensionalen Bedingungen” gibt es viele verschiedene. Die wichtigsten davon sehen wir uns nun gleich mal an. Sie sind:

  • min-width/min-height
  • max-width/max-height
  • orientation (“portrait” or “landscape”)

Aber bevor wir das tun, müssen wir erst noch eine wichtige Frage klären: Wie kann man Media Queries testen? Wie kannst du deine Webseite eigentlich über das Handy aufrufen, wenn sie sich doch nur auf einem Ordner auf deinem Laptop befindet?

3. Wie kann man CSS Media Queries testen?

Die sinnvollste Variante, Media Queries zu testen, ist, die Webseite einfach auf dem Handy oder Tablet aufzurufen und sich anzusehen wie sie dann aussieht. Aber was müsstest du denn dann in die Adress-Zeile deines Browsers auf dem Handy eingeben, um zu deiner Webseite zu gelangen?

Den lokalen Dateipfad einzugeben (z.B. “C:\\Webseite\index.html”) klappt schonmal nicht, weil das Handy ja keinen Zugriff auf die Ordner auf dem Computer hat.

Normalerweise sind Webseiten auf einem sogenannten “Web-Server” gespeichert. Das ist eine Art “großer Computer”, auf dessen Festplatte viele verschiedene Webseiten gespeichert sind, und der dafür ausgelegt ist, dass man vom Internet aus auf ihn zugreift, um die Webseiten zu öffnen.

Es ist grundsätzlich möglich, deinen eigenen Computer zu einem solchen Webserver umzufunktionieren. Ein geeignetes Programm dazu nennt sich XAMPP (mehr dazu im Kurs über PHP und MySQL, da werden wir das brauchen).

Aber damit auch andere Nutzer auf diesen Server zugreifen können, brauchst du dann erstens noch eine Domain (ein Webseiten-Name wie www.bunterrichten.com), und zweitens müsste dann dein Computer ständig eingeschaltet und mit dem Internet verbunden sein.

Deswegen sind Webseiten normalerweise auf externen Servern gespeichert, wo man gewissermaßen einen kleinen Teil des Speicherplatzes “mietet”. Dort kann man normalerweise auch eine oder mehrere Domains mieten, über die eine Webseite dann auch z.B. über das Handy oder einen anderen Computer leicht erreichbar ist.

Profi-Tipp: Die Anbieter solcher Dienstleistungen nennt man auch “Hoster” oder “Hosting-Provider”, (ein “Host” ist ein Gastgeber), und das Anbieten dieses Speicherplatzes auch “Hosting”. Die Begriffe “Domain”, “Web-Server” und “Hosting-Provider” solltest du dir merken.

Aber wenn wir keinen Webserver mieten wollen und die Media Queries trotzdem testen wollen – was dann? Dann kannst du einfach die Größe des Browserfensters auf deinem Computer verändern und dir ansehen, ab wann du Veränderungen bemerkst.

So, aber nach diesem weiteren kleinen Ausflug nun endlich zu unseren Media Queries:

4. Die wichtigsten CSS Media Queries

Wie schon weiter oben erwähnt, sind die für uns wichtigsten Media Queries die folgenden:

  • min-width/min-height
  • max-width/max-height
  • orientation (“portrait” or “landscape”)

Beginnen wir mit der Media Query für min-width/min-height:

4.1 Minimale Länge und Höhe: min-width und min-height

Grundsätzlich funktioniert die Syntax (Schreibweise) bei Media Queries folgendermaßen. Du schreibst:

  1. das Signalwort @media
  2. die Bedingung
  3. die öffnende geschwungene Klammer {
  4. Deine CSS-Selektoren mit den dazugehörigen CSS-Befehlen
  5. Die schließende geschwungene Klammer }

Im folgenden Source-Code steckt ein einfaches Media-Query. Grundsätzlich ist der BODY-Block weiß eingefärbt. Aber wenn das Fenster mindestens eine Breite von 1000 Pixeln hat (also z.B. 1024, 1200 oder 1400), dann ist die Hintergrundfarbe des BODY-Blocks stattdessen schwarz.

body {
   background-color: white;
}

@media (min-width: 1000px) {
   body {
      background-color: black;
   }
}

Gar nicht so schwer, oder? Alles, was in dem @media-Block steht (also zwischen den {}-Klammern), wird nur umgesetzt, wenn die Bedingung neben dem @media-Block erfüllt wird. In diesem Fall fragt die Bedingung danach, ob das Browser-Fenster eine Breite von gleich oder mehr als 1000 Pixeln hat.

Wenn du den obigen Code in deine style.css einfügst und die Seite im Browser lädst, dann ist sie je nach Fenster-Größe verschieden eingefärbt. Probiere es doch gleich mal aus!

Falls du jetzt keine Veränderung siehst, könnte es daran liegen, dass der Hintergrund unseres BODY-Blocks ja von unserem Menü und unserem DIV mit der ID content überdeckt ist. Eine perfekte Möglichkeit für uns, das Auskommentieren wieder zu üben! Versuche, durch Setzen des // vor dem background-color im Selektor #content die graue Hinterfarbe wegzubekommen – klappt es? Falls nicht, hier der Source-Code zum Nachsehen:

#content {
	height: 1000px;
	//background-color: gray;
	text-align: center;
	padding-top: 70px;
}

Statt der min-width Bedingung kannst du ebenso eine min-height Bedingung einsetzen, diese funktioniert genau gleich. Dann reagiert deine Webseite stattdessen darauf, ob dein Browser-Fenster eine bestimmte Höhe hat oder nicht.

4.2 Maximale Länge und Höhe: max-width und max-height

Genau gleich wie die Sache mit dem min-width oder min-height funktioniert das Ganze auch mit max-width und max-height. Wenn man z.B. die Hintergrund-Farbe des BODY-Blocks auf rot ändern will sobald das Browser-Fenster eine Höhe größer als 500 Pixeln hat, dann würde das so aussehen:

body { 
   background-color: white; 
} 
@media (max-height: 500px) {
  body { 
     background-color: red;
  }
}

4.3 Hochformat oder Längsformat (orientation): portrait oder landscape

Es ist auch möglich, als Bedingung einer Media Query abzufragen, ob das Browserfenster im Hochformat (portrait) oder im Querformat (landscape) ist.

Das ist vor allem bei Smartphones sinnvoll, die sich drehen lassen. So kann man erkennen, ob das Smartphone gerade im Hochformat gehalten wird oder im Querformat.

Die entsprechende Media Query Bedingung dazu heißt “orientation”, und erlaubt die zwei Zustände “portrait” (Hochformat) und “landscape” (Querformat).

Wenn wir zum Beispiel wollen, dass die Hintergrundfarbe unseres BODY-Blocks nur dann rot wird, wenn wir uns im Querformat befinden, sieht der Source-Code dazu so aus:

body {
   background-color: white;
}
@media (orientation: landscape) {
   body {
      background-color: red;
   }
}

Warum müssen wir dabei nicht auch Einstellungen für den Fall treffen, dass die Bedingung (orientation: portrait) erfüllt ist?

Weil es in diesem Fall ohnehin nur den Zustand landscape oder portrait gibt. Ist der Browser im Querformat (“landscape”), dann macht er das was in dem entsprechenden Media Query zu finden ist. Den Rest der Befehle (die nicht über Media Queries mit Bedingungen verknüpft sind) führt er sowieso aus.

Im Normalfall gibt es daher eine Art “Normal-Version” einer Webseite, die mit den Media Queries nichts zu tun hat. Und dann werden über Media Queries die Veränderungen umgesetzt, die für bestimmte Fälle zu treffen sind. Z.B. werden dann bestimmte Inhalte mit Hilfe von Media Queries nur verkleinert oder gar nicht angezeigt, wenn die Fenster-Größe des Browsers zu klein wird, um sie in der Normal-Version darzustellen.

Oder man dreht die Sache um, und erstellt erstmal eine Version nur fürs Handy. Dann fügt man mit Hilfe von Media Queries die Dinge hinzu, die nur angezeigt werden sollen, wenn der Bildschirm größer ist. Dieses Vorgehen nennt sich dann “Mobile First”, weil man zuerst mit der Handy-Version anfängt. Dazu aber später noch etwas mehr dazu.

5. Kombinierte CSS Media Queries (and)

Wenn wir jetzt allerdings z.B. nur die Breite des Browser-Fensters überprüfen, dann wissen wir noch nicht, ob diese Breite jetzt die längere oder die kürzere Seite des Browser-Fensters darstellt. Wenn das Fenster gerade im Querformat dargestellt wird, dann ist das schon der Fall. Befindet es sich dagegen im Hochformat, dann ist die Breite des Browser-Fensters die kleinere Seite.

Um die Ausrichtung und die jeweiligen Längen/Breiten berücksichtigen zu können, kann man bei den Media Queries praktischerweise mehrere Bedingungen kombinieren. Dies funktioniert mit einem “and“, also einem englischen “und”).

Wollen wir zum Beispiel überprüfen, ob sich der Browser im Hochformat befindet und seine Breite nicht größer als 400px ist, dann könnte das so aussehen:

@media (orientation: landscape) and (max-height: 400px) {
   body {
	background-color: red;
   }
}

Im obigen Source-Code bekommt der BODY-Block nur dann eine rote Hintergrund-Farbe, wenn sich das Fenster im Querformat befindet UND maximal 400px breit ist. Ist eine der Bedingungen nicht erfüllt, wird der BODY-Block nicht rot.

So lassen sich auch Bereiche abdecken, über die Kombination mehrerer Angaben. Hier z.B. eine Auswahl des mittleren Auflösungs-Bereichs, der für Tablets geeignet sein könnte:

@media (min-width: 450px) and 
(max-width: 1000px) and 
(orientation: landscape){
  body {
    background-color: red;
  }
}

Der BODY-Block wird mit diesem Source-Code nur dann rot eingefärbt, wenn sich die Breite des Browser-Fensters zwischen 450 und 1000 Pixeln bewegt.

6. Wie man CSS Media Queries im Web-Entwickler-Alltag anwendet

Man könnte nun versuchen, die perfekte Webseite für jede mögliche Browser-Fenster-Größe zu entwickeln. Aber wenn man sich einmal damit beschäftigt, wie viele unterschiedliche Bildschirm-Größen es auf den verschiedenen Geräten gibt, stellt man schnell fest, dass es gar keinen Sinn ergibt, dies überhaupt zu versuchen. Was also macht Sinn?

Dabei gibt es im Großen und Ganzen 2-3 Ansätze, die man schlauerweise kombiniert:

6.1 Ansatz 1 für Responsive Design: Statistik

Es gibt verschiedene Quellen an Statistiken für solche Dinge, z.B. diese hier:

Über diese und weitere Statistiken lässt sich ein Stück weit herauslesen, welche Fenster-Größen und Auflösungen gerade weit verbreitet sind bzw. sich wenn der Trend weitergeht mehr verbreiten werden. Meist bleiben dann nur einige wenige sehr verbreitete Auflösungen über. Wenn man auf diese Auflösungen optimiert, hat man den Großteil der Besucher gut abgedeckt.

6.2 Ansatz 2 für Responsive Design: Bereiche

Die meisten der verschiedenen Auflösungen lassen sich mit ein wenig Toleranz in Bereiche gruppieren. So bleiben am Ende womöglich dann nur noch eine beschränkte Anzahl an Varianten übrig, die man zu layouten hat, z.B. so:

  • Handy, Hochformat
  • Handy, Querformat
  • Tablet, Hochformat
  • Tablet, Querformat
  • Desktop

Vielleicht erspart man sich sogar noch mehr Arbeit und streicht die Tablet-Variante ganz. Laut der Statcounter-Statistik dazu machen diese auch nur einen verschwindend geringen Anteil aller Besucher aus, nämlich ca. 3%.

Das Minimum, das heutzutage von einer jeden Webseite erwartet wird, ist im Grunde eine Desktop-Version für große Bildschirme im Querformat und eine Handy-Version im Hochformat.

Die Flexboxen aus der letzten Lektion helfen dir dabei, ganze Bereiche abzudecken, indem sie HTML-Elemente automatisch wachsen und schrumpfen lassen.

6.3 Ansatz 3 für Responsive Design: Breakpoints

Das Prinzip der Breakpoints ist ein sehr interessantes, weil es ein Stück weit Auflösungs-unabhängiger macht. Anstatt auf unzählige Auflösungen zu optimieren, die sich mit neuen Entwicklungen ständig ändern können, wird stattdessen überlegt, welche Seiten-Elemente ab welcher Größe wie platziert werden sollten. Ein Break-Point ist dann jener Punkt, ab dem eine solche Veränderung stattfinden soll.

Auf meiner Webseite www.bunterrichten.com findest du beispielsweise ganz unten im Footer eine horizontal angeordnete Auflistung von vier Bereichen (Veranstaltungen, neue Beiträge, Über bunterrichten und Tags). Wenn du das Fenster kleiner machst (oder die Webseite am Handy ansiehst), dann werden diese Bereiche statt horizontal dann vertikal angeordnet, weil sie horizontal keinen Platz mehr hätten. Das Gleiche passiert mit dem auf der Desktop-Version gut sichtbaren Button rechts. Auch der wandert nach unten, falls du die Webseite mit dem Handy betrachtest.

Auch sehr üblich ist es, bestimmte Elemente ab einer bestimmten Fenster-Größe schlicht nicht mehr anzuzeigen. Das klappt ganz gut mit einem “display: none;”:

@media (max-width: 500px) and (orientation: landscape){
   #Element_das_wegsoll_wenn_das_Fenster_zu_klein_wird {
      display: none;
   }
}

Wenn das Fenster kleiner als 500px Breite wird und im Querformat ist, wird das HTML-Element mit der ID da oben (Element_das_wegsoll_wenn….) einfach nicht mehr angezeigt.

7. Ein neues Paradigma: Mobile first

Nach aktuellem Stand (Juni 2020) haben die Handy-Zugriffe auf Webseiten diejenigen durch Laptops und PCs überholt.

Daher wird es nun mehr und mehr üblich, Webseiten zuallererst als Handy-Version zu planen, und erst dann an Erweiterungen für die Desktop-Version zu denken.

Das hat den Vorteil, dass man dadurch gezwungen ist, die Webseite von Anfang an möglichst einfach zu gestalten. Ansonsten tendieren vor allem Anfänger gerne dazu, eine Webseite eher zu überladen, um den Platz zu füllen.

8. Geschafft!

So, nun sind wir am Ende mit den einzelnen Lektionen, und es fehlt nur noch unser Abschlussprojekt: deine erste “richtige” eigene Webseite.

Ich bin stolz auf dich, dass du es bis hierher geschafft hast!

Öffne doch nochmal eine Webseite die du manchmal besuchst, in deinem Browser, und schau sie dir über den Webseiten-Inspektor an. Du wirst feststellen, dass du zwar noch nicht alles verstehen wirst was da im Source-Code steht, aber schon erheblich mehr als am Anfang dieses Kurses.

Und nun, als große Belohnung, basteln wir nun in der nächsten Lektion deine erste eigene “richtige” Webseite. Und das beste daran ist, dass du sie sogar über meinen Server veröffentlichen und am Ende sogar allen deinen Freunden zeigen kannst, wenn du das möchtest. Aber dazu am Ende der nächsten Lektion mehr.

Ich finde, jetzt hast du erst einmal eine kleine Pause verdient, bevor es weitergeht! Geh spazieren, mach deine Liegestütz, was auch immer dir gut tut. Ehre deinen Körper, der es dir ermöglicht hat, bis hierher zu gelangen!

Das vergessen Informatiker sonst nämlich recht gerne, und verirren sich zu viel in ihrem Kopf. Darum ist es gut, sich gleich von Anfang an daran zu gewöhnen, immer auch wieder genug Pausen zu machen.

Denn auch wenn es dir auf den ersten Blick unlogisch vorkommen mag: Auf die Dauer gerechnet wirst du so mehr erreichen und bessere Arbeit machen. Und auch glücklicher sein 🙂

Bis bald, ich freu mich schon darauf mit dir in der letzten Lektion dieses Kurses deine eigene Webseite zu programmieren!

Portrait Niklas Baumgärtler

Niklas Baumgärtler

Niklas Baumgärtler interessiert sich für die Kunst der Begeisterung und macht gerne Wechsel- und Hebelwirkungen in Sozialen Systemen sicht- und erlebbar. Mehr über Niklas Baumgärtler...

Über bunterrichten

bunterrichten ist ein Gegenkonzept zum sonst üblichen Unter-richten, das auf Anpassung und Unterordnung basiert. Stattdessen geht es darum, Menschen über Stimmigen Kontakt zur Entfaltung zu verhelfen - eben "Menschen helfen aufzublühen".

Niklas Baumgärtler ist Lehrer/Trainer und Werkzeugmacher für Webseiten und Soziale Systeme. Er ist seit Mai 2018 aus Überzeugung selbstständig, und vor allem in der Erwachsenen-Bildung tätig.