Was ist Responsive Webdesign?
- Das Layout passt sich der Breite des Browsers an.
- Dies geschieht aufgrund von nicht-fixen Größenangaben (%, em, rem) im Gegensatz zu fixen (px, pt)
- Nicht zu verwechseln mit Adaptive (misst Browsergröße und liefert entsprechendes Layout) oder Fluid Design (RD ist fluid).
- Allerdings vergessen das auch gute Designer und Benenner von Methoden.
- Ein Beispiel von einer Responsive-Webdesing-Seite
- Deshalb werde ich auch nur "Responsive" verwenden.
Was sind Responsive Images?
- Ein Bild passt sich der Größe des Browserfensters an, d.h. dem Bild wird keine feste Größe gegeben.
- Oder: Ein Bild passt sich dem veränderten Layout an, welches von der Größe des Browserfensters abhängig ist.
- Ein Bild ohne Angaben außerhalb einer HTML-Datei wäre entsprechend immer Responsive: Chrysanthemum.jpg
- Innerhalb einer HTML-Datei muss man genauer sein: Drei Bilder
Wozu brauchen wir Responsive Images?
- Geräte mit einer schlechten Verbindung sollten Bilder mit geringerem Datenvolumen bekommen.
- Innerhalb eines Responsive-Layouts muss man evtl. unterschiedliche Bilder ausliefern, gemäß dem, wie sich die Seite gerade aufbaut.
- Retina-Displays erfordern Bilder mit einer besseren Auflösung.
Welche Möglichkeiten gibt es für RI?
- Browser / Device-Abfrage
- View-Port-Abfrage
- Picture-Tag
- img-srcset
Browser / Device-Abfrage
Wir fragen das Gerät selbst ab, d.h. wir lesen den Browserstring aus und erfahren anhand dieses Strings, um welches Gerät es sich handelt.
- Wir brauchen Kenntnis über die Geräte und ihre Fähigkeiten. Dazu gibt es u.a. Listen und Bibliotheken.
- Listen veralten und nur, weil uns eine Liste sagt, dass es sich bei etwas um ein Android-Gerät handelt, wissen wir immer noch nicht, welche Auflösung es hat.
- Wir wissen nicht, ob Landscape oder Portrait-Darstellung.
Viewport-Abfrage
Wir fragen die die aktuelle Größe des Browser-Fensters ab.
- Dies kann nur mit JavaScript, d.h. nach dem Laden der ersten Seite geschehen.
- Die Information wird mit einem Re-load der Seite an das Backend zurückgegeben, für zukünftige Seitenaufrufe in einem Cookie vermerkt.
Picture-Tag
Moderner HTML-Tag, der derzeit vorgeschlagen ist, aber noch nicht durchgesetzt:
<picture>
<source media="(min-width: 650px)" srcset="images/kitten-stretching.png">
<source media="(min-width: 465px)" srcset="images/kitten-sitting.png">
<img src="images/kitten-curled.png" alt="a cute kitten">
</picture>
Img-Tag mit srcset
Erweiterung des Img-Tags.
<img sizes="100vw" srcset="Chrysanthemum.jpg 480w,
Desert.jpg 768w,
Jellyfish.jpg 968w,
Koala.jpg 1024w"
src="Lighthouse.jpg" alt="Bilderanzeige">
Was tut WordPress?
- Neu hochgeladene Bilder werden gleich in mehreren Formaten angelegt (Einstellung unter EINSTELLUNGEN / MEDIEN)
- WordPress stellt neue PHP-Funktionen zur Verfügung, um mit den Bildern umgehen zu können: Codex
- Wird ein Bild in einen Text eingefügt, wird das Bild gleich
mit srcset in den vorgegebenen Größen angelegt.