Der Fluch des Fullwidth-Banner

Fullwidth-Elemente

Früher hatten Webseiten einen festen Content-Bereich. Inhalte, egal ob Banner, Texte, Grafiken wurden nur innerhalb dieses Content-Bereiches angezeigt. Außerhalb diesen Bereichs gab es eine Hintergrundfarbe oder ein Hintergrundbild. Dieser Content-Bereich war auch für alle Auflösungen gleich. Je größer die Auflösung umso mehr Hintergrundfarbe oder Hintergrund-Bild war zu sehen.
 

Durch die Vielzahl unterschiedlicher genutzten Geräten und Auflösungen von Bildschirmen, hat sich das Webdesign weiterentwickelt und ist zu Fullwidth-Elementen übergegangen.

Das sind Elemente die über die gesamte Breite des Bildschirmes gehen und sich je nach Auflösung anpassen. Für den Inhalt gibt es weiterhin einen festgelegten Bereich, auch wenn dieser optisch nicht immer zu sehen ist.
 

Bei Fullwidth-Elementen handelt es sich meistens um:

  • Headerbanner
  • Fußbereich
  • Slider/Bilder

Durch diese Elemente wirkt die Webseite aufgelockert und egal welche Auflösung mein Bildschirm hat, habe ich das Gefühl, dass sich die Webseite an meinen Bildschirm anpasst.

In der Konzeption und im Design sehen diese Elemente immer sehr gut aus. Wenn es jedoch zu dem Einpflegen der Inhalte kommt führt es immer wieder zu folgenden Problemen:

  • Es liegen keine Bilder im (extremen) Querformat vor
  • Die Auflösung der Bilder ist zu gering
  • Wichtige Bildelemente werden nicht auf allen Bildschirmauflösungen angezeigt

     

Wichtige Bildelemente werden nicht angezeigt

Ein Fullwidth-Banner hat keine feste Breite sondern passt sich in der Breite an den Bildschirm an.Bei der Höhe kann es eine feste Höhe geben oder die Höhe passt sich ebenfalls individuell an. 

Fullwidth-Banner mit fester Höhe

Wird ein Fullwidth-Banner mit fester Höhe eingebunden gibt es 4 verschiedene Möglichkeiten, welcher Teil des Bildes angezeigt werden soll:

  1. von oben
  2. von unten
  3. von der Mitte
  4. nach einem vorher festgelegten Fokus

Ich demonstriere dies einmal an diesem Bild. Angezeigt wird das Bild immer von der Mitte aus.

 

In der Mobilen-Ansicht ist der Banner fast rechteckig, so dass das Bild einen schönen Bildausschnitt hat.

Bei den größeren Auflösung ist der Ausschnitt des Bildes nicht Optimal, da dass Bild für größere Auflösungen nicht geeignet ist.

Fullwidth-Banner mit variabler Höhe

Alternativ gibt es dazu die Möglichkeit dem Banner eine variable Höhe zu geben, so dass sich die Höhe je nach Breite anpasst:

Mit der variablen Höhe, bleibt der Bildausschnitt immer gleich, die Höhe des Banners passt sich entsprechend an.

Fazit

  • Fullwidth-Elemente lockern Ihre Webseite auf und sind schöne Gestaltungselemente
  • Nicht alle Bilder eignen sich für Fullwitdh-Banner
  • Es werden Bilder im (extremen" Querformat und in hoher Auflösung benötigt
  • Eine Alternative kann eine variable Höhe sein, dadurch "springt" die höhe des Banners und je nach Auflösung nimmt das Banner mehr oder weniger vom Bildschirm ein