Eine Seite pro Site: Beispiele und Tipps für Single Page Websites

Kein Beitragsbild

Cameron Chapman

Cameron Chapman ist eine professionelle Web- und Grafikdesignerin mit über sechs Jahren...

Internetauftritte mit nur einer Seite sind der neue Hit bei Webdesignern – nicht nur für eigene Projekte, sondern auch für die Projekte ihrer Kunden. Es gibt zahlreiche Anwendungsbeispiele, in denen eine einzige Seite durchaus sinnvoll ist: Wenn es nur wenig Inhalte gibt, wenn die Inhalte eng miteinander verknüpft sind oder immer dann, wenn ein bestimmtes stilgebendes Element am besten auf einer einzigen, durchgehenden Seite wirkt.

Single Page oder Solo-Seiten-Sites sehen Sie beim Surfen immer häufiger. Nachfolgend ein paar Tipps als Entscheidungshilfe, wann eine Solo-Seite sinnvoll ist und wie Sie eine solche Website am besten gestalten. Während die meisten der Goldenen Webdesign-Regeln für einzelne Seiten ebenso gut wie für komplexere Internetpräsenzen gelten, gibt es einige Besonderheiten, die Sie bei Solo-Sites beachten sollten.

Ist eine einzelne Seite ausreichend für Ihr Projekt?

Single Page Websites sind besonders bei Designern beliebt, was natürlich nicht heißt, dass ein Webdesign Portfolio der einzige angemessene Einsatzzweck ist. Außerdem werden bestimmte Produkte – wie zum Beispiel Bücher – sehr häufig auf Solo-Seiten präsentiert. Anhand welcher Kriterien sollten Sie also entscheiden?

Stellen Sie sich am besten diese Fragen:

  • Gibt es viel Inhalt? Content-reiche Seiten sind nicht die idealen Kandidaten für Solo-Seiten-Websites. Wenn Sie mehr als ein Dutzend Seiten an Informationen haben, sind Sie mit höchster Wahrscheinlichkeit besser mit einer eher herkömmlichen, mehrseitigen Struktur bedient.
  • Wird ein bestimmtes Produkt verkauft? Eine einzelne Seite kann eine gute Lösung sein, wenn Sie ein einzelnes Produkt oder Werk verkaufen oder bewerben, etwa ein Buch oder ein WordPress-Theme beziehungsweise ein Template für ein anderes Content-Management-System.
  • Sind Sie geübt im Umgang mit Ajax und JavaScript (JS)? Zahlreiche Solo-Seiten-Websites setzen Ajax und JS  für die Navigation und andere Elemente ein. Dies ist eine sehr gute Art, bei etwas üppigerem Inhalt eine kompakte Website zu erstellen.
  • Haben die einzelnen Inhalte einen SInnzusammenhang? Der Versuch, viele unzusammenhängende Informationen auf eine Seite zu pferchen, wird die Besucher der Website eher verwirren als erhellen. Wenn Sie mehrere Skriptseiten verschiedenen Contents haben, sollten Sie diesen besser auf separaten Internetseiten lassen.

1. Inhalt reduzieren

Wenn Sie eine Single Page Website erstellen, ist es wichtig, den Inhalt möglichst gering zu halten. Denken Sie daran, dass sämtliche Inhalte dieser Site auf einmal geladen werden müssen. Es sei denn, Sie benutzen Ajax – doch auch dann gibt es einige Konstellationen, die simultanes Laden aller Inhalte erfordern. Außerdem: Wenn Sie Übergange zwischen verschiedenen Inhaltsbereichen einsetzen wollen, funktioniert das besser, wenn zwischen diesen, voneinander getrennten Bereichen nicht so viele andere Inhalte stehen.

Fünf oder sechs separate Inhaltsbereiche sind bei den meisten Solo-Seiten-Websites gängig. In manchen Fällen ist die Zahl auf drei oder sogar zwei Inhaltsbereiche begrenzt. Es kommt nur sehr selten vor, dass Websites mit einer einzelnen Seite mehr als zehn verschiedene Inhaltsbereiche haben.

Beispiele

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €!

E-Book Bundle von Andreas Hecht

Ein Portfolio mit einer einzelnen Web-Seite, die zwölf Film-Websites präsentiert. Der Header bietet einige wichtige Informationen, darunter ein E-Mail-Link.

Colourpixel hat viele verschiedene Informationen auf der Website, aber die Inhalte sind überwiegend kurz und präsize gehalten. Es gibt Kontaktdaten, ein Portfolio der verschiedenen Dienstleistungen und den unvermeidlichen “Über-Uns”-Bereich – alles auf einer Seite.

Das Wichtigste kurz auf den Punkt gebracht – Ben Linds Website kommt mit einem Minimum an Informationen aus.

Solo-Seiten-Websites sind ideal für die Ankündigung einer Veranstaltung oder Familienfeier – einer Hochzeit in diesem Fall. Es gibt nicht zu allzuviel Inhalt und das Design der Einzelseite macht es denkbar einfach, das Gesuchte zu finden.

Die Internetpräsenz von Stoodeo beinhaltet lediglich eine knappe Seite Content. Die Platzierung des Kontaktformulars neben dem Text reduziert die Länge erheblich und macht Scrollen nahezu überflüssig.

2. Wie wäre es mit horizontalem Scrollen?

Nicht alle Websites mit horizontalem Scrollbalken kommen mit einer einzigen Seite aus. Bei vielen Internetpräsenzen ist das jedoch der Fall und es ist ein interessanter Ansatz, um aus dem typischen Schema von Single Page Websites auszubrechen.

Wenn Sie relativ viel Content haben, kann horizontales Scrollen vorteilhafter sein als vertikales. Vor allem dann, wenn Sie ein “Querformat” mit der Hilfe von JavaScript in benutzerfreundliche Häppchen aufteilen.

Beispiele

Diese Website beinhaltet sowohl horizontale als auch vertikale Scrollbalken, und bringt Dank JavaScript die Inhalte sechs verschiedener Seiten auf einer pfiffig angelegten XXL-Seite unter.

Ähnliches Prinzip – eleganter gelöst: Claire Baxters Website ist ein beeindruckendes Beispiel für den effizienten Einsatz von JavaScript für die Navigation und kleine Bildgalerien zum Präsentieren der Arbeitsproben und Referenzen.

Charlie Gentles Website setzt ebenfalls auf JavaScript als Content Switcher zwischen den verschiedenen Inhaltsbereichen und Arbeitsproben.

Eine riesige horizontal scrollbare Solo-Seite mit reichlich Inhalt. Günstig für Scroll-Muffel: Das Kontaktformular steht direkt links am Anfang der Website – ein absolutes Unterscheidungsmerkmal zur üblichen Position am Ende des scrollbaren Bereichs.

Peter Pearsons Site verwendet einen Mix aus Animation und horizontalem Scrollen. Informationen, mit denen man mehrere Seiten füllen könnte, sind auf bildschirmgroße, nebeneinander angeordnete  Portionen aufgeteilt.

3. Beachten Sie die Bildschirmgröße

Bei einer Solo-Seiten-Website sollten Sie auch die Größe des Viewports beachten, der Ihren Besuchern zur Verfügung steht. Wenn Sie Ihre Websites so gestalten, dass sie in den sichtbaren Bereich hineinpassen, minimieren Sie das erforderliche Scrollen zwischen den verschiedenen Bereichen der Website. Das ist vor allem dann wichtig, wenn Sie Wert darauf legen, wie die einzelnen Abschnitte miteinander verbunden sind, etwa dann, wenn Sie dafür jQuery-Funktionen vorgesehen haben. Wenn die Besucher einmal anfangen zu scrollen, könnten sie sich per Mausrad durch die ganze Seite ackern, anstatt Ihre schicke Blätter-Navigation zu nutzen.

Beispiele

Dies ist eine sehr einfach gehaltene Solo-Seite mit drei verschiedenen Bereichen, die automatisch nacheinander eingeblendet werden und jeweils exakt den Viewport füllen. Die zentrale Aussage liegt im mittleren Bereich, so dass in zwei Richtungen gescrollt werden kann, was diesem Portfolio etwas Besonderes gibt.

Die Website von CreativePeople verwendet Links und Content Switcher. Die verschiedenen Inhaltsbereiche werden per JavaScript in der unteren Hälfte des Bildschirms eingeblendet. Scrollen entfällt komplett.

Technisch ähnlich gelöst wie das vorhergehende Beispiel, ist die Website von Dafvy.co.uk site. Die einzelnen Bereiche sind jedoch bildschirmfüllend. Zudem wechseln die Hintergrundfarben.

Fuel Brand nutzt Ajax für die Navigation sowie das Ein- und Ausblenden von Content.

Die Website von Cory Etzkorn passt sich automatisch an Ihren Viewport an. Navigiert wird per Slide-Show, außerdem sind klickbare Bereiche mit Tool-Tipps kenntlich gemacht.

4. Setzen Sie die verschiedenen Abschnitte klar von einander ab

Die meisten Besucher Ihrer Website werden daran gewöhnt sein, eine neue Seite zu laden, um weitere Inhalte zusehen. Wenn Sie alle Inhalte auf einer Einzelseite zu eng zusammen quetschen, könnte es sein, dass Ihre Besucher die Übergänge zwischen den Bereichen nicht wahrnehmen.

Es gibt zahlreiche Methoden, um verschiedene Inhaltsbereiche voneinander abzusetzen. Der Einsatz eines Headers wäre eine Methode. Auf manchen Websites trennen Linien die Bereiche voneinander. Wieder andere lassen einfach Freiraum zwischen den einzelnen Bereichen.

Examples

KINO verwendet eine einheitliche, handgemalte Linie zwischen den einzelnen Bereichen.

Simple trennt die Bereiche durch grafisch hinterlegte Überschriften.

CreativeSwitch nutzt Header mit wechselnden Grafiken für die drei Inhaltsbereiche der Website ein.

Auch ein simpler schwarzer Balken – ebenfalls mit Titel des jeweiligen Bereichs wie in diesem Beispiel – erfüllt den Zweck.

Zusätzlich zur etwas abgewandelten Balken-Trenner-Variante setzt Tomatic Variationen des seitenübergreifenden Sci-Fi-Themas im Retro-Look ein.

5. Nutzen Sie die Möglichkeit eines großflächingen Hintergrunds

Großflächige Hintergründe sind bei allen Arten von Websites sehr beliebt. Internetauftritte mit nur einer Seite bieten dafür neue Möglichkeiten. Viele Designer verwenden große Hintergrundbilder, mit denen Sie die verschiedenen Inhaltsbereiche voneinander absetzen. Sehr beliebt sind Zeichnungen, die eine Stadt oder eine Landschaft vom Himmel bis zur Erde beziehungsweise vom Himmel bis zum Meeresgrund in Szene setzen wie zum Beispiel die Website von Volll oder Morphix in dieser Sammlung.

Beispiele

Schönes Beispiel für eine Gestaltung mit einem durchgehenden Thema in allen Inhaltsbereichen.

Ein durchgehendes Küstenidyll vom Himmel bis zum Meeresboden bildet den Hintergrund der Voll-Website: Der Hauptinhalt liegt auf Höhe des Meeresspiegels, während die Macher der Site sich in den Wolken wähnen – nicht ohne zuvor die Goodies in den Tiefen des Meeres zu versenkten.

Jamie Wrights Website beweist Mut zur Farbe

Luke Larsen oder das Leben im Goldfischglas.

Wer Design “abfackelt”, muss was zu bieten haben. In der Tat, die Hintergrundgestaltung von webleedDesign ist eine der innovativsten, die ich je gesehen habe. Ein Klick auf die Links oben im Kopf spult einen Flash-Film ab, der den Eindruck einer Fahrt im Aufzug durch ein Imperium bizarrer Lebenwesen vermittelt. Probieren Sie’s am besten selbst aus.

6. Einsatz von JavaScript und Ajax zur Strukturierung und Präsentation des Inhalts

Wenn Sie etwas mehr Content unterbringen müssen, aber dennoch das Single Page Design nutzen möchten, können Sie per JavaScript (JS) und Ajax Inhaltsbereiche ein- und ausblenden.

Sehr populär sind Slide Shows mit JavaScript. Auch so genannten Modal Boxes, etwas üppiger gestaltete PopUps, meist für Formulare oder Tool-Tipps und andere Techniken, werden gerne eingesetzt.

Beispiele

SOFA blendet die Inhaltsbereiche zu den Links im Kopfbereich per JavaScript ein.

Giant Creative nutzt JavaScript für einen Slide-Show-Effekt.

Deluge Studios kombiniert verschiedene Slide Shows, PopUps und andere JavaScript-Funktionen.

TapTapTap verwendet JavaScript zum Einblenden der Produktinformationen.

Tool-Tipps und PopUs sind die Mittel der Wahl von Jon Brousseau.

Weitere Beispiele

Falls Sie Spaß an der Sache bekommen haben – hier sind eine Reihe weiterer, schön gemachter Single Page Websites:

Dale Harris

Justin Tsang

Blazing Emblem, LLC

Fish Marketing

Jared Design

Angel Des Lacs

Koffie Verkeerd

Project 365

Kevin Lucius

The Rissington Podcast

Bullet PR

Skywalker Graphics

thinkdj

Jan-Eike Koormann

Janic Design

Adam Woodhouse

Paolo Manganiello

Los Colores Olvidados

Hot Meteor

IndoFolio

Zusammenfassung

Websites mit nur einer Seite bieten eine witzige und abwechselungsreiche Alternative zum Gestalten von Internetauftritten – egal, ob es sich um Ihr persönliches Portfolio oder die Internetpräsenz Ihrer Kunden handelt. Denken Sie dabei an Methoden, die besonders gut für diese Form des Webdesigns geeignet sind, wie großflächige Hintergrundbilder oder bestimmte Ajax-Techniken, die wiederum auf komplexer strukturierten Seiten nicht so gut zur Geltung kämen.

(mm), ™

Cameron Chapman

Cameron Chapman ist eine professionelle Web- und Grafikdesignerin mit über sechs Jahren Erfahrung. Sie schreibt für mehrere bekannte Weblogs, darunter ihre eigenes Projekt Cameron Chapman On Writing. Sie ist außerdem Autorin von Internet Famous: A Practical Guide to Becoming an Online Celebrity.

Sortiert nach:   neueste | älteste | beste Bewertung
dokster
Gast

Gibt es Erfahrungen dieser grafisch ja genialen Webseiten, was die Auffindbarkeit der Inhalte in den Suchmaschinen betrifft?

trackback

[…] so machen es auch Arbel-Designs (USA). Hier handelt es sich um ein Single-Page-Design. Alles ist bis ins kleinste Detail tierisch […]

Holger Sammert
Gast

Wir überlegen auch gerade auf ein one-site-design für einen Relaunch unserer Webssite. Hat denn jemand Erfahrung inwieweit die Suchmaschinen das annehmen?

Dieter Petereit
Dr. Web

Rein logisch gedacht ist es einfacher, eine Seite zu indexieren als mehrere.

wpDiscuz