So verschieden wie die Menschen sind, sind auch die Geräte mit denen sie im Internet surfen. Aus diesem Grund hat Responsive Web Design sich als die perfekte Lösung für flexible Websites durchgesetzt. Es ist bei unseren Kunden so beliebt, da es besonders zukunftssicher ist. Es verspricht eine flexible Web-Lösung, die für die meisten Geräte eine optimale Darstellung bietet. Auch für Geräte, die noch in den nächsten Jahren entwickelt werden. Wie diese aussehen werden, das weiß man nicht. Womöglich werden bald Inhalte auf der Windschutzscheibe eines Autos, oder einer Brille angezeigt.

www.google.com/glass/start

Mittels Media Queries bestimmt man das Design für gewisse Bildschirm-Breiten. Doch hier sind wir des öfteren an Grenzen gestoßen. Bei manchen Modulen haben vier Media Queries für die gängigen Auflösungen nicht gereicht. Doch sollten man jetzt deswegen wirklich noch eine 5., 6. oder 7. Media Query einführen?

Jetzt kommt ein neuer Ansatz ins Spiel: Element Queries!

Element Queries

Statt sich auf die Breite von Bildschirmen zu konzentrieren, sollte man den Fokus auf den Content legen. Mit Hilfe von Element Queries könnten so flexible Module entwickelt werden. Ist ab einer gewissen Breite des Moduls die Darstellung nicht ideal, wird eine Query eingeführt um das Layout des Moduls zu verändern.

Hier ein Beispiel:

Für unser internes Framework haben wir ein Kalender-Modul entwickelt. Hat das Modul genug Platz, zeigt es den aktuellen Monat mit allen Terminen in einer klassischen Kalender-Ansicht an.

Ab einer gewissen Breite würde dieses Layout aber nicht mehr funktionieren. Die Termine könnten nicht mehr vernünftig angezeigt werden, alles wäre viel zu gestaucht. Daher wechselt man von der Kalender-Ansicht in eine Listen-Ansicht.

Der Unterschied zwischen Media Queries und Element Queries liegt an der Bemessungsgrundlage für die Breite. Media Queries orientieren sich an der Breite des Dokuments, die von der Bildschirmgröße abhängt. Element Queries orientieren sich an der Breite des Elements selbst. Quasi ein Dokument in einem Dokument.

So funktioniert das derzeit:

@media (max-width: 10em) {
  .kalender {
    /* YOUR CSS CODE */
  }
}

So könnte es funktionieren:

.kalender (max-width: 10em) {
     /* YOUR CSS CODE */
} 

Die Vorteile:

• Hohe Flexibilität
  Das Modul passt sich dem Kontext, in dem es gezeigt wird an.
• Optimale Darstellung
• Context ist nicht mehr die Bildschirmbreite sondern das Layout, das die Designer wählen.

Intelligente SVGs

Mehrere Bitmaps in einem SVG

Bei responsive Images hat man oft Performance Probleme, wenn man nicht mit serverseitigen Lösungen arbeitet. Das typische Szenario ist dann, dass man ein Bild in doppelter Ausführung abspeichert und in die Website einbindet. Ein Mal für normale Displays und ein weiteres Mal für Retina-Displays. Das verursacht aber auch die doppelte Anzahl an Traffic und HTTP Requests, was eher vermieden werden sollte.

Die Clown Car Technique von Estelle Weyl schafft hier Abhilfe. In eine SVG Datei werden mehrere Bitmap Bilder gepackt und mit Media Queries das richtige Bild ausgegeben.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 329" preserveAspectRatio="xMidYMid meet">
<title>Clown Car Technique</title>
<style>   
  svg {
    background-size: 100% 100%;
    background-repeat: no-repeat;
  } 
 @media screen and (max-width: 400px) {
  svg {background-image: url(images/small.png");}
 } 
 @media screen and (min-width: 401px) and (max-width: 700px) {
  svg {background-image: url(images/medium.png);}
 } 
 @media screen and (min-width: 701px) and (max-width: 1000px) {
  svg {background-image: url(images/big.png);}
 } 
 @media screen and (min-width: 1001px) {
  svg {background-image: url(images/huge.png);}
 }
</style>
</svg>

Auch hier haben wir wieder ein Dokument (SVG Datei) in einem Dokument (HTML Datei). Die Media Queries innerhalb der SVG Datei orientieren sich nicht an der Breite des gesamten Dokuments, sondern an der Breite der SVG-Datei. So lassen sich perfekt responsive Images umsetzen.

Mehrere SVGs in einem SVG

Anstatt mehrerer Bitmaps kann man aber auch mehrere SVGs in eine SVG Datei packen. Andreas Bovens erklärt in seinem Lightning Talk (Youtube), wie es geht.

So kann man je nachdem wie groß die SVG Datei ist, Attribute wie Farbe, etc. ändern. Oder man lässt Details weg, wenn das SVG kleiner skaliert wird, wie man es auch von Icon-Grafiken kennt.

Die Vorteile:

• Hohe Flexibilität
  Das Bild passt sich dem Kontext, in dem es gezeigt wird an.
• Es wird nur ein HTTP Request an den Server geschickt.
• Der Browser lädt nur das richtige Bild herunter.
• Ersparnis an Dateigröße, wenn Details für kleinere Bildgrößen weggelassen werden.

Fazit

Die Inhalte sind das wofür Nutzer Websiten oder Apps aufrufen. Daher liegt es nahe, dass wir Designer unsere Designs darauf abstimmen. Außerdem sind Endgeräte die große Unbekannte beim Entwickeln. Also warum nicht die Inhalte so aufbereiten, dass sie überall funktionieren? SVGs in Verbindung mit Media Queries machen es schon vor. Die Media Queries innerhalb des SVGs kümmern sich nicht um die Breite des Browsers, sondern um das SVG selbst. Dieses Prinzip könnte auch auf andere Elemente