Kurze Einführung

Was ist Responsive Webdesign?

Responsive – fast schon Unwort des Jahres. Jeder spricht darüber, jeder kann es, jeder braucht es. Manchmal scheint es fast so als wäre Responsive Webdesign allein die Quintessenz von modernem Webdesign.

Sinn des Blog-Posts: Da ich mich in den letzten Jahren ausführlich mit dem Thema befasst habe will ich auch anderen einen Einblick geben – egal ob branchennah oder -fern. Ich versuche alles verständlich zu erklären um auch Leuten ohne große Web-Erfahrung das Thema näherzubringen.

Grundlagen: Was bedeutet "Responsive" eigentlich?

"To response" bedeutet im Grunde genommen lediglich "reagieren". Im Bezug auf Webdesign heißt das: die Website reagiert auf das Gerät mit dem Sie aufgerufen wird. Die Bildschirmgröße und -ausrichtung, Touch-Fähigkeit, Pixeldichte und einiges mehr wird analysiert.
So kann je nach Endgerät die passende, optimale Website angezeigt werden. Schriftgrößen können angepasst werden, Bildgrößen und Dateigrößen können flexibel eingestellt werden, Navigationen können optimiert werden, sogar ganze Layouts können umgeworfen werden.
Neu ist das nicht, es ist nur notwendiger geworden. Smartphones, Tablets, Notebooks, Netbooks, Smartwatches, Kühlschränke greifen auf das Internet zu und haben Bildschirme die unterschiedlicher nicht sein könnten.

Häufige Fehler: Was oft falsch verstanden wird

Um eine Website responsive zu machen, werden für Größenangaben im Web Prozentwerte verwendet. Dadurch werden die Objekte und Bilder relativ zur Bildschirm- und Fensterbreite vergrößert bzw. verkleinert. Ohne weitere Aktion seitens des Webdesigners wird die Website dann jedoch bei bestimmten Bildschirmgrößen unbrauchbar und unleserlich. Zehn Buchstaben in einer Zeile sind einfach nicht genug. Auch das Logo sollte noch erkennbar sein, wenn die Website auf einem Smartphone aufgerufen wird. Wenn das dann als als "Responsive Webdesign" verkauft wird sträuben sich mir die Nackenhaare.
Doch dabei ist das ja eigentlich der Sinn und Zweck von Responsive Webdesign: auf allen Endgeräten brauchbar und leserlich zu sein.

Deshalb gibt es die sogenannten "Media Queries" – kompliziertes Wort, einfache Bedeutung. An definierten "Breakpoints" oder "Sollbruchstellen" werden die Größen- und Stilangaben neu erstellt bzw. überschrieben. So kann man beispielsweise einrichten, dass zweispaltige Layouts ab der Smartphone-Bildschirmgröße einspaltig werden oder Schriftgrößen auf riesigen Desktop-Bildschirmen mit hoher Auflösung trotzdem lesbar und nicht allzu winzig sind.

"Responsive, Responsiver, am Responsivsten"

Bei Layout und Gestaltung hört Responsive Webdesign noch lange nicht auf. Will man's richtig machen, sollte man auch die folgenden Punkte beachten.

Responsive Images

Was unterscheidet mobile Geräte unter anderem von stationären Computern? Die Internetverbindung.
Zuhause hat heutzutage kaum noch jemand eine langsame Internetverbindung – sogar im abgelegensten Dorf im tiefsten Schwarzwald findet man Highspeed-Internetanschlüsse mit günstigen "All-You-Can-Surf-Flatrates".

Ist man dagegen mit dem Smartphone unterwegs gibt es u.a. zwei Einschränkungen:

  1. Das Internet ist in den meisten Fällen nicht konstant ausreichend schnell.
  2. Selbst bei den teuersten LTE-Verträgen gibt es in Deutschland monatliche Datengrenzen. (Stand: September 2014)

Reicht es dann also aus, die auf der Website eingebundenen Medien zu skalieren? Nein, denn nicht nur der Bildschirm ist kleiner. Auch die Dateigrößen sollten für mobile Geräte kleiner gehalten werden.

So kann man Bilder in einigen verschiedenen Dateigrößen und Ausschnitten zur Verfügung stellen. Je nach Bildschirmgröße wird dann das passende, ausreichende Bild aufgerufen ohne, dass der Besucher auf das Herunterladen von Pixeln wartet, die er gar nicht sehen kann.

Hochauflösende Bildschirme

Einen weiteren Unterschied zwischen vielen stationären Computern und beispielsweise modernen Smartphones und Tablets ist die Pixeldichte des Bildschirms. Angefangen hat es 2010 mit dem Apple iPhone 4 und einer Pixeldichte von 326 ppi. Kaum ein Smartphone-Hersteller blieb von dem "Retina-Display", wie es Apple nennt, unbeeindruckt und stellt seitdem Geräte mit teilweise noch weitaus höherer Pixeldichte her.

Man kann also davon ausgehen, dass nicht nur Smartphone-Monitore irgendwann nur noch mit Pixeldichten über 300ppi hergestellt werden.

Was bedeutet das für Internetseiten? Bilder die für Bildschirme mit niedriger Pixeldichte optimiert wurden werden unscharf dargestellt. Vorher noch pixelgenau und haarscharf – auf den neuesten Monitoren dann unscharf.

Das Web wäre aber nicht das Web wenn es nicht schon lange eine Lösung für das Problem gäbe. Jede Herausforderung ist auch eine Chance.

Um nicht allen Bildschirmen ungeachtet der Notwendigkeit die Grafiken und Bilder mit doppelter oder dreifacher Auflösung aufzuzwingen, gibt es die Möglichkeit je nach Pixeldichte das passende Bild zur Verfügung zu stellen. So bekommt das alte Notebook noch die Datei "bild.jpg" – das neueste Smartphone aber schon die Datei "bild@2x.jpg". Das "2x" steht hier für die doppelte Auflösung.

"Das ist aber aufwändig! Muss das alles sein?"

Tatsächlich ist Responsive Webdesign auch immer eine Zeitfrage. Es macht auch keinen Sinn eine Website mit jeweils fünf verschiedenen Dateigrößen und Bildausschnitten pro Grafik auszustatten wenn die Zielgruppe die Website nur mit einem Medium aufruft.

Irgendwann führt jedoch kein Weg mehr daran vorbei. Die Verbreitung von beispielsweise Tablets und Smartphones nimmt immer weiter zu.

Mein Fazit daher:

Die Frage sollte nicht sein ob Responsive Design Sinn macht sondern wie. Der Workflow ist entscheidend. Wenn Responsive Webdesign von Anfang an geplant ist und alle an einem Strang ziehen ist kaum ein Aufwandsunterschied festzustellen.

So wird auch die Produktivität, die Effizienz und vor allem der Nutzen des Webdesigns garantiert.