Full-Width oder Boxed-Layout? Was ist besser? Was macht mehr Sinn?

Zuerst der Überblick was genau ist denn eigentlich ein Boxed-Layout und was ein Full-Width-Layout?

Website Full-Width-Layout

Die einzelnen Container oder neuerdings wenigstens der Top-Container nehmen den Platz der gesamten Breite des Bildschirms ein. Zur Verdeutlichung hier ein paar Beispiele:

Vorteile Full-Width-Layout:

Mehr Platz für das Bild. Besonders geeignet für Verkaufsseiten zur optimalen Darstellung des Produkts. Oft verwendet mit einem speziellen Slider im Kopfbereich mit aufwendigen Animationen.

Nachteile Full-Width-Layout:

Anpassung des Bildes im responsive Bereich nicht ganz einfach. Bei Tablets und insbesondere beim Smartphone verschwinden Seitenbereiche die zum Bild gehören (oder das Bild wird mit Text bei gleichem Seitenverhältnis verkleinert und ein Erkennen des Bildes und Textes auf einem Smartphone ist kaum noch möglich). Des Weiteren sollte das Bild direkt via Bildbearbeitung bestmöglich angepasst werden. Durch die Möglichkeit besonders großer Bildschirme sollte die Breite des Bildes min. auf 1920 Pixel Größe erfolgen um auch bei 4K Monitoren noch ein Minimum an Qualität zu erzielen…. Nicht zu vergessen: durch die größeren Bilder benötigt die Seite länger zum Aufbau und je nach System kann dies zu schlechteren Ranking Ergebnissen bei Suchmaschinen führen.

Website Boxed-Layout

Es wird eine Breite für die Darstellung des gesamten Auftritts auf der linken Seite oder der Mitte des Bildschirms festgelegt (ganz selten auch rechts). In der Vergangenheit gleich / kleiner 1080 Pixel. Mittlerweile immer öfter 1280 und mehr Pixel. Hier einige Beispiele:

Vorteile Boxed-Layout:

Hier muss man bei der Bildgröße keine Rücksicht auf große 4K Monitore nehmen (in der Regel reichen Bilder mit einer Breite von 1080 Pixeln aus). Man könnte ggf. ein entsprechendes Hintergrundbild gestalten um die Weißflächen ein wenig zu kaschieren. Für die Suchmaschinen sind die kleineren Bilder optimal da geringere Ladezeiten anfallen.

Nachteile Boxed-Layout:

Der WOW-Effekt den man z.B. bei aufwendigen Full-Width-Slidern der Marke Revolution hat fehlt. Wirken auf besonders großen Monitoren ein wenig verloren.

Fazit:

Wer Wert auf WOW-Effekte legt und gerne aufwendige Slider nutzt ist mit einem Full-Width-Layout (hier einige Beispiele) bestens bedient. Wer mehr Wert auf SEO und ein gutes Ranking legt, geht auf kleinere Bilder und das Boxed-Layout. Achtung: auch ein Full-Width-Layout kann so weit optimiert werden, dass kaum Ladezeit anfällt. Dies bedeutet jedoch a) keine / kaum Bilder oder b) Bilder soweit optimiert dass die Nachteile wegfallen (spezielle K