Neu in WordPress 4.4 Responsive Images mit srcset und sizes

Meistens lädt der Browser eine deutlich größere Bild-Datei, anschließend wird das Bild auf die passende Größe verkleinert.

Bei kleinen Webseiten mit wenigen Bildern ist das vielleicht kein großes Problem. Aber bei größeren Seiten mit vielen Bildern kommen schnell ordentliche Datenmengen zusammen.

Was WordPress bisher macht

WordPress sorgt schon lange dafür, dass Bilder nicht unnötig groß werden. Aus jedem Bild, das in die Mediathek hochgeladen wird, erzeugt WordPress automatisch drei (in Zukunft vier) verkleinerte Varianten. Die Maße kann man in Einstellungen/Medien vorgeben.

Nach dem Hochladen liegt jedes Bild in vier Größen vor:

  1. Originalgrösse (so wie hochgeladen)
  2. Mittlere Größe
  3. Klein
  4. Thumbnail

Schon heute kann man also bestimmen, in welcher Größe – groß, mittel oder klein – ein Bild in einen Artikel eingebunden werden soll. Wie groß ein Beitragsbild ausgegeben werden soll, kann man im Template festlegen:

<?php the_post_thumbnail( 'medium' ); ?>

Responsive Design ist schön, aber…

Im Desktop-Layout brauche ich andere Bildgrößen als im Smartphone-Layout.
Ein Beispiel: Das Headerbild in der Desktopansicht ist stattliche 1400 Pixel breit. Der Smartphone-Screen ist aber so schmal, dass 1400 Pixel gar nicht draufpassen würden. Hier würde ein Headerbild von 400 Pixeln Breite vollkommen ausreichen.

responsive

Was kann man tun, um dem Browser mitzuteilen, dass er auf mobilen Gräten die 400 Pixel breite Version des Headerbildes laden soll anstatt der riesigen 1400-Pixel-Variante?
Man könnte versuchen, dieses Problem mit Javascript oder CSS zu lösen. Aber das hat einen Haken.
Weiterlesen Neu in WordPress 4.4 Responsive Images mit srcset und sizes

Webdesign: Statisch, adaptive oder responsive?

In diesem Artikel möchte ich erklären, was der Unterschied ist zwischen einer statischen und einer responsiv programmierten Webseite. Ich habe dazu ein paar kleine Animationen gebastelt. (Ich wollte schon immer mal was mit animierten Gifs machen.)

Im Responsive Design wird das Layout der Webseite per CSS so programmiert, dass es sich automatisch allen möglichen Bildschirmgrößen anpasst. Aber was bedeutet das konkret oder besser gesagt:

Wie muss ich mir das vorstellen?

1. Das klassische, statische Layout

Nehmen für den Anfang den Fall einer Webseite, die nicht im Responsive Design programmiert ist. Alle Inhalte haben feste Breiten. Wird der Bildschirm kleiner, bleiben die Elemente unverändert.
view Klick aufs Bild startet die Animation

GIF

Weiterlesen Webdesign: Statisch, adaptive oder responsive?

Responsive Design ist schön, macht aber viel Arbeit

Responsive Webdesign ist heute State of the Art im Webdesign. Alle Kunden wollen eine Webseite, die auch auf mobilen Geräten gut funktioniert. Das stellt uns Designer vor neue Herausforderungen.

Beim Entwerfen des Designs für eine Webseite beginnt man in der Regel mit der Desktopansicht. Ich mache das jedenfalls so, auch wenn der Code später „mobile first“ gebaut wird. Die Desktopansicht ist ein guter Einstieg und man bekommt schnell ein Gefühl für die Gestaltung.

Dann wäre da noch die Frage
„Wie sieht das Design auf einem kleinen Bildschirm aus?“

illu-rwd-2-frei

„Auf dem Tablet wird dann alles irgendwie schmäler.“

Okay. Aber was passiert, wenn die Spalten so schmal werden, dass man den Text nicht mehr lesen kann? Und kann man dieses Bild da noch erkennen, wenn es nur noch 30×50 Pixel groß ist? Und wie soll man diesen winzig kleinen Link mit dem Finger anklicken?

Es hilft nichts. Damit die Seite auch auf kleinen Bildschirmen lesbar und bedienbar muss man verschiedene Szenarien durchspielen.
Weiterlesen Responsive Design ist schön, macht aber viel Arbeit