kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Bilder im Responsive Design – Tipps für Seitenverhältnisse & Motive in flexiblen Layouts

Fotos, Illustrationen und Grafiken sind viel genutzte Gestaltungselemente im Web Design. Beim Einsatz von Bildformaten und Motiven sollte allerdings einiges beachtet werden, damit die Website später gut umsetzbar ist und redaktionell komfortabel gepflegt werden kann. Wir zeigen, was ihr bei Bildern im Web Design hinsichtlich Bildausschnitt, Skalierung und Seitenverhältnis beachten solltet.

Workshops & Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug.

Online-Schulungen (remote per Video)

Inhouse-Schulungen

Öffentliche Schulungstermine

Layout-Entscheidungen haben Auswirkungen außerhalb des visuellen Designs

Die emotionale Wirkung und das visuelle Erscheinungsbild (Look & Feel) einer Website wird maßgeblich durch Bildmotive und Stilrichtung beeinflusst. Die Website ist jedoch immer ein ausgeklügeltes Zusammenspiel aus Gestaltung, Technik und Inhalt. Daher sollten die Menschen, die Layout und Stilrichtung beeinflussen, dafür sensibilisiert sein, dass ihre Design-Entscheidungen Auswirkungen an anderer Stelle haben werden. Ein paar Beispiele:

  • Bilder und Videos sind Schwergewichte auf einer Website, die die Ladezeit und somit die User Experience und die Suchmaschinenoptimierung negativ beeinflussen können. Wenn viel mit Bildern gearbeitet wird, muss an anderer Stelle abgespeckt werden. Oder die Website wird zu langsam. Stichwort: Performance-Budget.
  • Viele Farben und detaillierte Motive werden größere Dateien erzeugen als wenige Farben und simplere Formen. Wenn es bildgewaltig wirken soll, kann vielleicht ein einheitlicher Look für alle Motive entworfen werden. Das kann Farben reduzieren und wirkt visuell einheitlich.
  • Fotos haben eine rechteckige Form und lassen sich dadurch in flexiblen Layouts schlechter positionieren. Freigestellte Objekte sind ggf. praktischer, da man den Weißraum um die Motive anders wahrnimmt. Wenn Fotos mit Illustrationen kombiniert werden oder sogar ausschließlich Illustration zum Einsatz kommt, vereinfacht das möglicherweise die technische Umsetzung der Website.
  • Viele verschiedene Bildformate oder sehr unterschiedlich beschnittene Motive können zwar visuell ansprechend sein, werden aber meist zu deutlich höheren Aufwänden in der technischen Umsetzung führen. Design-Teams sollten ihre Layouts auch vor dem Hintergrund einer praktikablen Umsetzbarkeit entwerfen.

Mit dem Design befasste Personen sollten zudem wissen, welche Grafik-Dateiformate es im Web gibt und welche Vor- und Nachteile diese Formate für die Gestaltung haben. In Kombination mit CSS Grundlagen helfen diese Kenntnisse erheblich bei der Gestaltung moderner und gut umsetzbarer Layouts. Wenn Design und technische Umsetzung von verschiedenen Personen umgesetzt werden, dann sollte frühzeitig zu den Entwürfen kommuniziert werden.

Bildausschnitte in flexiblen Layouts steuern

Websites werden im Responsive Design gestaltet, also mit flexiblen Layouts, die sich stufenlos an alle Displaygrößen anpassen. Das Layout einer responsiven Website wird von Smartphone bis Desktop erhebliche Größenunterschiede überbrücken. Dieses flexible Layoutverhalten hat Auswirkung auf den Einsatz von Bildern.

Stilisiertes Layout für drei exemplarische Displaygrößen. Gut erkennbar ist, dass Bilder das Seitenverhältnis ändern werden

Variante 1: Bilder behalten immer ihr Seitenverhältnis

Die einfachste Layout-Lösung besteht darin, dass Bilder über verschiedene Displaygrößen hinweg proportional skaliert werden. Das Seitenverhältnis bleibt also unverändert und die Motive werden nie beschnitten oder verzerrt. Noch einfacher wird es, wenn alle Bilder auf der gesamten Website im selben Seitenverhältnis eingesetzt und immer proportional skaliert werden.

Auf medium.com werden Bilder proportional skaliert und behalten stets ihr Seitenverhältnis bei.

Variante 2: Bilder ändern das Seitenverhältnis

Wenn Bilder – wie in Variante 1 – proportional skaliert werden, kann dies zu sehr hohen oder sehr niedrigen Bildern auf bestimmten Displaygrößen führen. Das ist häufig unerwünscht, weshalb man dem Effekt mit einem angepassten Seitenverhältnis in einzelnen Display-Regionen etwas gegensteuert. Wenn allerdings das Motiv identisch bleibt und das Seitenverhältnis geändert wird, muss das Bild angeschnitten werden. Das wiederum kann die Bildauswahl erschweren.

Auf tagesschau.de ändert sich der Bildausschnitt erheblich von kleinen zu großen Displays. Die Motive werden am Desktop oben und unten stark angeschnitten. Das schränkt bei der Bildauswahl ein.

Am besten eignen sich Bilder, deren zentrales Bildmotiv in der Mitte positioniert ist und die auf allen Seiten viel Freiraum zum Anschnitt bieten.

Der Bildausschnitt, der in allen Varianten immer sichtbar ist, kann auch außerhalb der Mitte liegen. Dieses Verhalten ist jedoch ggf. deutlich aufwändiger in der technischen Umsetzung, vor allem wenn verschiedene Bilder die an identischer Stelle im Layout eingesetzt werden (z. B. im Kopfbereich) unterschiedlich angeschnitten werden sollen.

Wenn der Bildausschnitt redaktionell für jedes Bild im Content Management festgelegt werden soll, steigt der Aufwand mitunter erheblich.

Unterschiedlich angeschnittene, aber immer rechts unten positionierte Grafiken bei Mixpanel

Variante 3: Bilder werden ausgetauscht

Bilder können auch komplett ausgetauscht werden. Ggf. möchte man eine Collage oder Infografik auf dem Smartphone anders layouten als auf großen Bildschirmen. Diese Information ist für die technische Umsetzung sehr wichtig – insbesondere, wenn das Bild über ein CMS gepflegt werden soll. Zusätzlich muss natürlich das Bildmaterial zur Verfügung stehen.

Opel nutzt eine Bildcollage im Header, die sich auf allen Displaygrößen über die volle Breite erstreckt. Auf kleinen Displays wird jedoch ein anderes Bild geladen – die Anordnung der Elemente ist anders, das Motiv beleibt gleich.
Netflix tauscht ebenfalls das Bild aus. Allerdings wird hier auch ein anderes Motiv gewählt, so dass die Stimmung spürbar wechselt. Ob das sinnvoll ist, darf bezweifelt werden.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Unterstützung bei Responsive Design-Projekten

Unsere Agentur ist auf responsive Design spezialisiert. Wir realisieren u.a. maßgeschneiderte Websites und führen Schulungen durch. Wenn du Unterstützung bei der Planung, Gestaltung und Entwicklung einer Website im Responsive Design benötigst, helfen wir gerne weiter.
Responsive Webdesign-Leistungsangebot →

Das könnte dich auch interessieren

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.