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)

Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

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. Ich finde das letzte Design einfach klasse!

  3. >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.

  4. 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.

  5. Vielen Dank!
    Bin fündig geworden :)

  6. @Bata

    Such mal nach Tilt-Shift-Effekt mit Photoshop

    btw: Schöner Artikel.

  7. 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.

Schreibe einen Kommentar

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

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Cookies

Weitere Informationen zu den Auswahlmöglichkeiten findest du hier. Dazu musst du zunächst keine Auswahl treffen!

Um Dr. Web zu besuchen, musst du eine Auswahl treffen.

Deine Auswahl wurde gespeichert!

Informationen zu den Auswahlmöglichkeiten

Was du erlaubst!

Um fortfahren zu können, musst du eine Auswahl treffen. Nachfolgend erhältst du eine Erläuterung der verschiedenen Optionen und ihrer Bedeutung.

  • Ich stimme zu:
    Du erlaubst uns das Setzen aller Cookies, die wir in unseren Datenschutzhinweisen genannt haben. Dazu gehören Tracking- und Statistik-Cookies. Aus dem Tracking per Google Analytics bieten wir auf der Seite Datenschutz ein Opt-Out, also die Möglichkeit der Abmeldung, an.
  • Ich stimme nicht zu:
    Wir verzichten bei dieser Option auf den Einsatz von Google Analytics. Die für den Betrieb von Dr. Web notwendigen Cookies werden aber dennoch gesetzt. Einzelheiten entnimmst du bitte den Datenschutzhinweisen

Du kannst deine Cookie-Einstellungen jederzeit hier ändern: Datenschutz. Impressum

Zurück