Responsive Design – Tipps für Gestalter

Die folgenden Ausführungen sind Empfehlungen aus der täglichen Praxis. Es sind stets gleiche oder ähnliche Fragen und Probleme, die sich bei der Umsetzung eines responsive Design stellen.

Was sind eigentlich Breakpoints?

Breakpoints sind der wichtigste Baustein zum responsive bzw. adaptive Design. Mit Breakpoints werden jene Punkte bezeichnet, an denen sich das Layout ändert, also beispielsweise von einer mehrspaltigen Ansicht in eine einspaltige Ansicht wechselt. Breakpoints beziehen sich immer auf die Ausgabebreite, nie auf die Höhe! Bestimmte Grids oder Frameworks verwenden fixe Breakpoints, die sich an bestimmten Geräten orientieren. In der Praxis erweist es sich als sinnvoller, Breakpoints individuell zu setzen wo es sinnvoll bzw. notwendig ist. Da es Geräte heute tatsächlich mit beliebigen Bildschirmgrößen gibt, sind fixe Breakpoints einer angepassten Gestaltung eher hinderlich.

In der Praxis kann es so aussehen: verwende ab 480 Pixel Bildschirmbreite das mobile Menü. Setze ab 520 Pixel Breite den Claim neben das Logo. Wechsle in der Galerie ab 710 Pixel von der zweispaltigen auf die dreispaltige Ansicht. Oder auch: färbe die Schrift ab 600 Pixel schwarz.

Häufig ergeben sich die sinnvollen Werte für die Breakpoints erst, wenn die Seite im Browser betrachtet werden kann und die Fensterbreite beliebig verändert werden kann. Insofern ist es in der Regel ausreichend, wenn die Gestaltung gewisse Zustände berücksichtigt und das Finetuning am programmierten Code vorgenommen wird.

Unterscheidung von Hoch- und Querformat

Als Gestalter ist man gewohnt zu unterscheiden, ob etwas im Hoch- oder im Querformat (Portrait oder Landscape) angezeigt wird. Theoretisch ist dies auch bei responsive Websites manchmal wünschenswert. Inwiefern dies sinnvoll ist, entscheidet meistens das Budget. In aller Regel stellt es für den Benutzer kein Hindernis dar, wenn eine Seite nach unten gescrollt werden muss. Insbesondere auf Geräten mit Touchscreen sind die Benutzer es gewohnt zu scrollen. Es empfiehlt sich jedoch die Landscape Darstellung bei der Gestaltung zu berücksichtigen. So sind hohe fixe Elemente (z.B. Kopfgrafiken, feststehende Menüs) zu vermeiden. Diese scrollen nicht weg und somit verbleibt nur ein kleiner Raum für die Darstellung der Seiteninhalte.

Bildgrößen auf Bildschirmen mit erhöhter Dichte

Auch die Frage der Bildauflösung wird immer wieder gestellt und kontrovers diskutiert. Auf Mobilgeräten haben sich Bildschirme mit höheren Auflösungen etabliert, bei denen ein Pixel nicht mehr ein Pixel ist sondern beispielsweise 4 Pixel. Auf dem Markt gibt es Geräte mit verschiedenen Pixeldichten, aktuell von 1,3- bis 3-fach. Da stellt sich natürlich gleich die Frage, ob es sinnvoll ist Bilder in höherer Auflösung für diese Geräte bereit zu stellen.

Meine Antwort darauf ist nicht die einzig korrekte sondern nur meine ganz persönliche Ansicht. Wenn Bilder in der doppelten Auflösung übertragen werden, dann haben sie normalerweise die vierfache Grösse (in Kilobyte). Das ist insbesondere bei Mobilgeräten mit reduzierter Bandbreite hinderlich. Hierfür gibt es die Idee die Komprimierung (bei jpeg) zu erhöhen. Ob dies wirklich ein Vorteil ist, mag jeder selbst entscheiden. Der hauptsächliche Vorteil der höheren Bildschirmdichten liegt nicht in der besseren Darstellung von Bildern sondern in der schärferen Darstellungen von Schrift, insbesondere bei kleinen Schriftgrößen. Dies sollte auch genutzt werden, indem hierfür geeignete Logos und Grafiken als SVG ausgegeben werden. Icons können als Fonts umgesetzt werden und profitieren damit auch von einer besseren Darstellung. Da die Bildschirmauflösung der Mobilgeräte häufig die Auflösung des menschlichen Auges übersteigt, ist der Vorteil auch hier eher marginal.