Dr. Web Team 14. Oktober 2010

Volle Breitseite: Webdesign jenseits des klassischen Spaltenlayouts

Katrin Eythorsdottir / Manuela Müller

Etwas breitere Hauptspalte, schmale Sidebar, heller Hintergrund oder vielleicht ein wenig Textur. So oder ähnlich präsentiert sich das Gros der meisten Blogs und Firmen-Websites – vor allem im deutschen und anglo-amerikanischen Sprachraum. In Osteuropa und Russland finden sich dagegen häufiger Webdesigns mit üppigen Hintergrundbildern und horizontalen Layouts. Die Suche nach typischen Beispielen führte dann doch zurück in die Welt der Dot-coms, Dot-des und anderer Domains.


Panoramabilder, wie bei alexarts, kommen bei breiten Bildschirmen besonders gut.

Gibt es länderspezifisches Webdesign?

Kann man Webdesign tatsächlich nach Ländern unterscheiden, wie die Serie Global Web Design des drweb-Ablegers Smashing Magazine nahelegt? Und wenn ja – was macht die jeweilige Bildsprache oder das typische Webdesign eines Landes aus? An arabischen und russischen Websites fiel drweb-Praktikantin Katrin Eythorsdottir der lustvolle Einsatz von breiten Formaten und detailreichen Bildern ins Auge. Als Isländerin und Kunststudentin, außerdem Inhaberin eines Abschluss‘ in Produkt und Slow Design, fand sie die Frage, ob es in bestimmten Ländern charakteristische Merkmale im Webdesign gibt, spannend.

Auf der Suche nach Beispielen für eine Sammlung mit länderspezifischen Webdesign-Elementen, kam der erste Eindruck, dass horizontale Layouts typisch für Russland und Osteuropa sind, ins Wanken. Je mehr Seiten Katrin anklickte, desto weniger ließ sich die simple Formel: „Russische Websites verwenden vor allem horizontale Layouts“ bestätigen. Auch wenn auf russischen Websites häufiger opulente Bilder anzutreffen sind – wie bei alexarts – ist das noch lange nicht bei allen ru-Domains der Fall.

Spalten-Layouts beherrschen das Bild

Ernüchternde Feststellung nach tagelangem Stöbern: Zwei- und Drei-Spalten-Layouts beherrschen rund um den Globus das Webdesign – egal ob in Europa, Afrika, Asien, Australien oder Amerika. Dass horizontale, oder nennen wir es „Breitbild“-Layouts, die Ausnahme von der Regel sind, liegt wohl weniger in kulturellen Vorlieben als in der Anwenderfreundlichkeit begründet. Ganz gleich welcher Nationalität: Anwender sind daran gewöhnt, vertikal zu scrollen. Und wenn sie denn schon scrollen müssen, dann bitte möglichst nur in eine Richtung, nicht in beide. Dies gilt besonders für das Surfen mit mobilen Geräten.

Beispiele für horizontale und „Breitbild“-Layouts

Minimalismus gepaart mit Fotografie

Solange das Frontend anwenderfreundlich, sprich, mit möglichst wenig Scrollen, und auch auf kleinen Displays gut zu nutzen ist, haben horizontale Layouts dennoch ihren Reiz. Besonders in Kombination mit minimalistischem Design und ausdrucksstarken Fotos, sind horizontale Layouts ein echter Hingucker, wie die folgenden Beispiele zeigen.


Orengina: Gewöhnungsbedürftig, aber ästhetisch: Das Bild ist fix, die Navi lässt sich scrollen.


Ein Menü, ein Bild und etwas JavaScript – damit kommt FLOWmarket aus.


Beispiel Davidia: Gut geeignet für Möbelhäuser, Inneneinrichter und Architekturbüros


Klingt nach Casting-Agentur oder Filmproduktion, Medis ist jedoch die Website einer Tapas-Bar.


G2: Ähnlicher Ansatz, etwas anders aufgeteilt – für Restaurants ist dieses Layout ideal geeignet.

Cartoons mit JavaScript in Szene gesetzt

Mit ein wenig Java- oder ActionScript beziehungsweise Flash lassen sich horizontale Layouts ganz wunderbar automatisch scrollen – egal in welche Richtung. Angesichts des weiten Verbreitungsgrades von JS und Flash sollte man sich diese Möglichkeit aus reinem Purismus nicht von vornherein versagen, solange die grundlegenden und wichtigen Inhalte (in diesem Fall die Abfahrtszeiten der Busse) auch für Menschen mit Sehschwäche zugänglich sind.

Next Bus Dublin

Next Bus Dublin: So schön können öffentliche Fahrpläne aussehen …

Als Extra-Bonbon oder vielleicht als eine Form von Easter Egg flitzen bei diesem Design ein Rollerfahrer, gefolgt von einem Eichhörnchen, durchs Bild, wenn man das Browserfenster zusammenschiebt. Fluid Layout at its best :-).

… sogar bei schmalem Viewport.

Image-Slider einmal nur als Beiwerk für die Infos, die Illustrationen sind der Blickfang von Tijuana Flats.

Scrollen der dritten Art – einfach den Cursor aufs Bild halten bei Never mind the bullets.

Zwar kein Cartoon, aber dank JavaScript interaktiv ist die Website von tiny fluid grid.

Portfolios und Blogs mit „Überbreite“

Bei dieser Kategorie von Websites ist es schon bedeutend schwieriger, horizontale Layouts zu finden.

Je breiter der Viewport, desto mehr Arbeitsproben erscheinen auf Tokio Illustrators.

Bei derart detailreichen Arbeitsproben, kommt das Portfolio von Magomed Dovjenko ganz ohne sonstigen Schnickschnack aus.

Im Prinzip ist das zwar auch ein Spaltenlayout, doch die großzügige Titelgrafik und Typografie lassen diesen Blog von Marc Hinse sehr flächig erscheinen.

Durch die vielen nebeneinander floatenden Posts und den Header nutzen Zaum & Brown vor allem auf der Startseite die volle Breite, während auf den Unterseiten nur der Header über die gesamte Breite läuft.

Ziemlich voll, dennoch prägnant und gut zu erfassen ist diese in voller Breite mit 3D-Grafiken verzierte Landeseite für die iPhone-App Mathster.

Auch diese räumliche Gestaltung von Basil Gloo kommt durch die Nutzung der vollen Breite besonders gut zur Geltung.

Eure Kommentare zu Erfahrungen mit Webdesigns für bestimmte Länder und Kulturen, Eure Meinung zu vertikalen und horizontalen Layouts sowie Links zu weiteren Beispielen für gelungene „Breitbild“-Layouts sind sehr willkommen.

(tm)

11 Kommentare

  1. Ich bin auch oft auf ru Seiten Unterwegs und kann dem Russicher Webdesigner nur zustimmen. Und mal ehrlich was die manchmal für Designs auspacken verschlägt einen fast die Sprache.

  2. >Je mehr Seiten Katrin anklickte, desto weniger ließ sich die simple Formel:
    >“Russische Websites verwenden vor allem horizontale Layouts“ bestätigen.

    Bin in Runet seit 1997 und mit der Bahauptung von Katrin nicht ganz einverstanden. Layouts sind dort meistens für 1000 px optimiert (s. führende Projekte, ab PR6)

    Viele neue Einsteiger ohne Usability Kenntnisse machen immer noch „Gummi“-Webseiten, die sich auf den gesamten Browser-Fenster ausdehnen.

  3. Das sind schon einige schöne Websites dabei. Zumindest sind es einige echt gute Anregungen für kommende Projekte, soweit denn der Kunde sich darauf einlassen kann. Leider fordert dieser dann doch oftmals „genauso wie mein Mitbewerber, nur anders und besser, aber auf keinen Fall so!“. Aber die Umsetzungen sagen mir bei einigen der vorgestellten Websites durchaus zu. Minimal und einfach anders eben.

    Nette Auflistung. Schönen Abend noch.

  4. Auf der ersten Seite ist dieser Bildeffekt wie in der T-Online Werbung, dass alles aussieht wie eine Modelleisenbahn. Kennt jemand ein Tutorial wie sowas gemacht wird? Scheint irgendwas mit unschärfe in den Randbereichen zutun zu haben.

    1. Glaub du meinst den Tilt Shift Effect. Hast recht, das funktioniert mit Hilfe von unschärfe. Tutorials findest du haufenweise auf Youtube.

      Edit: Ah, der Cache vom Browser hat mich reingelegt, hast schon längst deine antwort bekommen xD

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.