Ein-Seiten-Sites – Kann eine Website mit nur einer HTMTL-Seite funktionieren?
Manche Websites sind über die Jahre gewachsen wie ein ehrwürdiger Baum. Manche eher wie Unkraut im Garten: Immer mehr Informationen werden angehäuft, die Navigation zu den relevanten Inhalten wird immer schwerer. Erfrischend ist es daher zu sehen, dass in manchen Fällen eine einzige HTML-Seite genug sein kann.
Die meisten Single-Page-Sites sind auf den ersten Blick nicht als solche erkennbar: Sie haben durchaus ein Menü. Nur führen die Menüpunkte eben nicht auf andere Seiten, sondern sie springen zu Abschnitten der einzigen Seite. Üblicherweise ist die Menüleiste auch fixiert, so dass sie immer an der selben Stelle auf dem Bildschirm sichtbar ist, auch wenn der Benutzer nach unten scrollt.
Warum Single-Page-Design?
In den letzten Monaten haben sich ein-Seiten-Sites auch deshalb weiter verbreitet, weil mit HTML5 viele schicke Effekte möglich geworden sind. Diese sehen nicht nur gut aus, sondern sie ermöglichen es, dem Besucher ein Gefühl dafür zu geben, wie er sich auf der Seite bewegt. So wird ihm durch die Animation gezeigt, wie er sich auf und ab bewegt – ganz wichtig für seine Orientierung.
Cadillac nutzt zum Beispiel mehrere Micro-Sites für eine Kampagne, die jeweils nur aus einer langen Seite bestehen (siehe Abbildung). Darauf steht nur wenig Text, die meisten Inhalte sind Videos und Bilder – letztere vielfach als Slideshow eingebunden. Dadurch ist die Menge an Inhalten ganz ordentlich, ohne dass die Seite übermäßig lang wird.
Der Hauptvorteil der One-Page-Sites aus konzeptioneller Sicht ist, dass man mit einer gut gemachten ein-Seiten-Site Nutzer dazu bringt, den gesamten Content der Site anzusehen. Das heißt nicht, dass jeder alles liest und wirklich alle Bilder ansieht. Aber zumindest scrollen etliche Nutzer bis zum Ende der Seite. Denn eine gut gemachte Singe-Page-Site gibt an jeder Position Hinweise, dass die Seite nach unten weitergeht. Damit weckt sie die Neugier stärker, als es eine an sich leichter nutzbare Textnavigation tut.
Ein weiterer großer Vorteil bei der Konzeption: Solch ein reduzierter Ansatz zwingt dazu, sich zu beschränken. Es ist klar, dass man auf einer einzigen Seite nur eine stark begrenzte Menge von Informationen unterbringen kann. Wie lang eine Seite sein darf, dafür gibt es keine feste Regel – nur nicht länger als der Geduldsfaden der Besucher darf sie sein. Es kommt also darauf an, die Inhalte so spannend zu machen, dass die Nutzer bis zum Ende der Seite scrollen. Dort steht oft auch ein Call-to-Action, also ein Kontaktformular oder eine Kaufaufforderung.
Konzeption einer ein-Seiten-Seite
Die simple Struktur ist vor allem ein Vorteil für die Besucher: Sie müssen nicht lang suchen, was auf welcher Seite steht, sie müssen sich nicht durch mehrere Hierarchieebenen klicken.
Das bedeutet aber nicht, dass es unbedingt weniger Arbeit ist, eine solche ein-Seiten-Site zu konzipieren. Zwar müssen Sie die Informationsarchitektur nicht lange planen, dafür müssen Sie um so besser planen, wie Sie die Informationen auf der einen Seite anordnen. Im Idealfall erzählen Sie eine Geschichte, die sich von oben nach unten fortsetzt. So bleiben die Besucher am Ball.
Vor allem aber müssen Sie planen, welchen Informationen Sie überhaupt einen Platz auf Ihrer kostbaren einzigen Seite gönnen. Erfahrungsgemäß ist das eine der schwierigsten Aufgaben.
Für welche Fälle bieten sie sich an?
Bei komplexen Produkten, großen Unternehmen oder recht unterschiedlichen Themen kommt eine Single-Page-Site nicht in Frage. Auch wenn das Ziel ist, möglichst viele Links und Suchmaschinenaufmerksamkeit einzusammeln sind mehrere Seiten besser geeignet. Aber viele Unternehmen haben eigentlich gar nicht so viel, was auf ihre Website muss. Denken Sie zu Beispiel an:
- Startups
- Freiberufler
- Ärzte
- Frisöre
- Ladengeschäfte aller Art
- Sites für einzelne Produkte
- Kampagnen mit begrenzter Laufzeit
Was sollten Sie beachten bei Single-Page-Sites?
Wollen Sie nun selbst eine solche ein-Seiten-Site umsetzen, dann achten Sie vor allem auf Folgendes:
Können und wollen Sie sich inhaltlich wirklich so stark beschränken? Je mehr Interessensgruppen/Stakeholder/Abteilungen etc. mitreden, desto schwieriger wird es, sich über den Inhalt zu einigen.
Übertreiben Sie es nicht mit all den schönen Animationen und Effekten. Die Versuchung ist groß, sehr viele Inhalte in verschiedenen Slideshows, Carousels und aufklappenden Boxen unterzubringen. Stellen Sie sich dann die Frage, ob es wirklich eine Singel-Page-Site sein muss oder ob Sie nicht doch zu viel haben, was Sie zeigen wollen.
Geben Sie durch ein durchgehendes Design überall auf der Seite Hinweise darauf, dass es noch weiter nach unten geht. Das gilt besonders, wenn Sie kein Menü mit Sprungmarken verwenden – es besteht die Gefahr, dass Besucher nicht registrieren, dass die Seite nach unten weitergeht. Gut gelöst ist das zum Beispiel bei bulletpr.co.uk (siehe Abbildung).
Denken Sie an die Ladegeschwindigkeit, die besonders für mobile Nutzer eine große Rolle spielt. Eine ein-Seiten-Site hat den Nachteil, dass die gesamten Inhalte auf einmal geladen werden, was bei starkem Grafikeinsatz ganz schön viel sein kann. Etwas tricksen können Sie mit AJAX, das dann dynamisch Inhalte nachlädt, ohne die ganze Seite neu aufzubauen, aber das ist auch nur eine Notlösung. Die erste Tugend heißt auch daher wieder: Beschränkung auf das Wesentliche.
Wie sind Ihre Erfahrungen mit solchen Mini-Sites? Empfinden Sie sie als Spielerei oder als wohltuende Beschränkung? Haben Sie vielleicht selbst schon welche umgesetzt?
Pingback: Vor- und Nachteile von ein-Seiten-Sites | benutzerfreun.de
Danke für den informativen und vor allem recht ausgewogenen Artikel. Wie auch bei vielen anderen Trends ist es alles andere als sinnvoll, einfach dem Hype zu folgen – Vor- und Nachteile sollten genau abgewogen werden. Ich mache selbst seit geraumer Zeit immer wieder auch Single-Pages, und es ist genau wie oben beschrieben:
Der Vorteil einer Single-Page liegt in der Herausforderung der Fokussierung. Gerade in der Arbeit mit größeren Unternehmen gelingt das aber nicht immer – da kommt da mal noch ein Inhalt dazu, und dort noch eine Funktion, und schon wird die Single-Page gesprengt …
Wo sich aber die Fokussierung umsetzen lässt, ist eine Single-Page definitiv ein Gewinn.
Diese Pages sind mir auch schon aufgefallen, manchmal positiv und manchmal negativ, je nach Anordnung der Elemente und Verwendung bestimmter Effekte.
Da gab es eine Seite, wo man nicht bemerkte, dass es „unten“ noch weiter geht (da habe ich mich gefragt, ob das so gewollt war, man fand die Inhalte nur durch Zufall). Auf einer Seite flutschte immer wieder ein neuer „Inhaltskasten“ in den Fokus, das war sehr unruhig und verwirrend. Und ich habe auch schon Seiten entdeckt, wo, wie auch im Beitrag beschrieben, zwar „klassisches“ Menü mit Sprung zum Inhalt, aber auf derselben Seite, und man konnte sich insgesamt sehr gut orientieren…
Interessantes Thema! Was ich auch immer sehr spannend bei One-pagern finde ist Parallax-Scrolling. Denn dieses animiert sehr schön zum scrollen, was ja eben bei One-pagern besonders wichtig ist. Wer damit nichts anfangen kann, vielleicht mal zwei Beispiele:
Spotify: https://www.spotify.com/uk/
Brand South Australia: http://www.brandsouthaustralia.com.au/
@ Jan Pohlmann: Ja, mir persönlich gefällt das auch sehr gut, das ist immer noch ein echter Hingucker! Das letzte Beispiel (http://www.indofolio.com) nutzt das auch, unbedingt live ansehen!
Wir haben mit One Page Slidern ein bisschen experimentiert und während die Reaktionen der Kunden/Usern von verstört bis absolut begeistert reichten 🙂 sind die SEO-Ergebnisse sehr gut, vielleicht ist das ja auch interessant.
Weil mir gerade noch ein passendes Beispiel begegnet ist, ergänze ich es kurz:
http://www.alprausch.com
@ Elske: Sehr eindrucksvoll. Besonders der Teil in der Mitte, da scrollt man zusätzlich zum Vertikalen noch in der Horizontalen. Klingt kompliziert, aber ich finde, das funktioniert hier. Zumindest für die Zielgruppe, die der Mode nach ja schon etwas experimentierfreudig sein sollte 😉
Vielen Dank für den gehaltvollen Beitrag.
Welche Besonderheiten und Herausforderungen gibt es bei solchen Konzepten in Bezug auf das Messen der Nutzeraktionen (Tracking)? Könnte mir vorstellen, dass nicht alle gängigen und verbreiteten Tracking-Tools da schon drauf ausgerichtet sind. Oder vielleicht schon?
@Thorsten: Guter Punkt. Ein paar Klimmzüge muss man schon machen, um keine unsinnigen Ergebnisse zu bekommen. Am einfachsten ist es, die Klicks auf der Seite zu messen – seien es HTML-Anchor-Sprünge oder der Aufruf von JavaScript-Funktionen. Beides geht recht problemlos, bei GoogleAnalytics etwa mit „Event Tracking“.
Um aber die Zeit zu messen, die Nutzer auf der Seite verbringen, wenn sie gar nicht klicken, sondern z.B. nur Text lesen und Bilder ansehen, kann man per JavaScript alle paar Sekunden ein Signal an Analytics senden (Stichwort „trackPageview“). Nicht elegant, aber effektiv.
@Carola: Gerade in Sachen SEO hätte ich mit Nachteilen gerechnet, wenn man nicht spezifische Seiten anlegt. Ich würde vermuten, weil dann viel Inhalt in einem Dokument ist…?
Hat da noch jemand Erfahrungswerte?
Hallo!
Wer sich mit Single-Pages beschäftigt, der sollte sich auf alle Fälle Bootstrap näher anschauen. Da gibt es sehr viele Templates und es sind sehr viele tolle Micro-Sites entwickelt worden. Infos gibt es natürlich bei Wikipedia. Beispiele für für mit Bootstrap umgesetzte Webseiten gibt es hier: http://holdirbootstrap.de/
LG
Wolfgang
Pingback: Vernachlässigte Sites wiederbeleben – Newsletter 10/2018 - benutzerfreun.de