Was ist ein OnePager und wie erstellt man ihn? (Mit Bei­spie­len)

Als Online-Aus­hän­ge­schild eines Un­ter­neh­mens ist die Website die erste An­lauf­stel­le, wenn po­ten­zi­el­le Kunden und Kundinnen nach In­for­ma­tio­nen und Angeboten suchen. Je nach Branche sind mehr oder weniger in­no­va­ti­ve Design-Lösungen an­ge­bracht. Wem die kon­ven­tio­nel­le Website-Ge­stal­tung nicht genügt, könnte Gefallen am OnePager bzw. One-Page-Design finden.

Was ist ein OnePager bzw. One-Page-Design?

In der Regel sind Websites ähnlich wie ein klas­si­sches Print­me­di­um aufgebaut. Auf der Suche nach In­for­ma­tio­nen und Inhalten springt man von Seite zu Seite – wie man im Print durch das Magazin blättert, klickt man sich online durch die Na­vi­ga­ti­on.

Beim One-Page-Webdesign, auch Single-Page-Design oder Pageless-Design genannt, durch­bricht man diesen Usus des „Von-Seite-zu-Seite-Springens“ und wählt eine andere Struktur: Der Website-Aufbau be­schränkt sich beim OnePager auf eine einzige Seite. Alle re­le­van­ten In­for­ma­tio­nen, die man nor­ma­ler­wei­se auf ver­schie­de­nen Un­ter­sei­ten findet, sind auf einer einzigen un­ter­ge­bracht. Ohne weitere Klicks sehen Nutzer und Nut­ze­rin­nen alle wichtigen Inhalte, eine einfache Na­vi­ga­ti­on führt sie intuitiv durch das Ein-Seiten-Konzept.

OnePager erstellen: Welche Vor­aus­set­zun­gen sind zu erfüllen?

Um die Vorteile des One-Page-Designs zu nutzen, benötigen Sie ein gut durch­dach­tes Konzept für die Seite. Soll es sich bei­spiels­wei­se um eine klas­si­sche Un­ter­neh­mens­sei­te mit Kon­takt­mög­lich­kei­ten handeln oder planen Sie eine Landing­pa­ge, die ganz gezielt der Lead­ge­ne­rie­rung dient oder ein Produkt, ein Event oder ein be­stimm­tes Thema in den Vor­der­grund stellen soll?

Bevor Sie den ge­schmie­de­ten Plan dann in die Tat umsetzen, sollten Sie zunächst eine passende Domain wählen und re­gis­trie­ren. Zudem müssen Sie sich ent­schei­den, wie Sie Ihren OnePager erstellen, und eine geeignete Hosting-Umgebung finden.

Die passende OnePager-Domain finden

Eine gute Idee für den Inhalt des OnePagers ist nur die halbe Miete: Fast glei­cher­ma­ßen ent­schei­dend ist es, eine aus­sa­ge­kräf­ti­ge Web­adres­se zu re­gis­trie­ren. Diese sollte so gut wie möglich zu Ihnen bzw. Ihrem Content passen. Nutzen Sie die bran­chen­ty­pi­schen Domain-Checker der ver­füg­ba­ren Anbieter, um eine gute Kom­bi­na­ti­on aus Do­main­na­me und Top-Level-Domain (Do­main­endung) zu finden.

OnePager pro­gram­mie­ren: Homepage-Baukasten, CMS oder Webdesign-Service?

Im Vergleich zu einer komplexen Website mit ver­schie­de­nen Un­ter­sei­ten erfordert ein OnePager deutlich weniger Pro­gram­mier­auf­wand. Un­ter­schät­zen sollten Sie diese Aufgabe dennoch nicht: Überlegen Sie sich also gut, ob Sie das One-Page-Design mithilfe eines Homepage-Bau­kas­tens oder Content-Ma­nage­ment-Systems selbst rea­li­sie­ren möchten oder ob Sie die Pro­gram­mie­rung lieber in die Hände einer pro­fes­sio­nel­len Agentur bzw. eines Webdesign-Services legen. Dabei gilt es Aufwand und Kosten abzuwägen – be­rück­sich­ti­gen Sie aber auch das eigene Know-how, um am Ende eine zu­frie­den­stel­len­de Lösung parat zu haben.

Geeignete Hosting-Struk­tu­ren schaffen

Damit Ihr OnePager unter der ge­wünsch­ten Web­adres­se über das Internet verfügbar ist, benötigen Sie außerdem eine geeignete Hosting-Umgebung. Prin­zi­pi­ell können Sie die Seite in Ei­gen­re­gie hosten – ins­be­son­de­re, weil das One-Page-Design im Vergleich zu kom­ple­xe­ren Website-Struk­tu­ren deutlich weniger Res­sour­cen in Anspruch nimmt. Um in puncto Ver­füg­bar­keit und Per­for­mance immer auf der sicheren Seite zu sein, können Sie das Hosting aber auch bei einem pro­fes­sio­nel­len Hoster mieten.

One-Page-Design: Die wich­tigs­ten Elemente und Tipps

Ein OnePager führt die Be­su­che­rin­nen und Besucher im Idealfall in eine Richtung – direkt hin zur Con­ver­si­on. Am Sei­ten­en­de befindet sich deshalb fast immer ein ent­spre­chen­der CTA (Call-to-Action), der zu Kauf, Anmeldung, Be­stel­lung, Teilnahme o. Ä. auf­for­dert. Um Nutzer und Nut­ze­rin­nen in die gewollte Richtung zu führen, müssen die Inhalte ent­spre­chend auf­be­rei­tet und struk­tu­riert sein. Zu den typischen Elementen und Stil­mit­teln zählen folgende:

• Sto­rytel­ling: Wer seine Be­su­cher­schaft über­zeu­gen will, muss eine Ge­schich­te erzählen. OnePager bieten eine her­vor­ra­gen­de Mög­lich­keit, die Ge­schich­te eines Produkts, einer Anwendung oder einer Kampagne zu erzählen. Ziel ist es, durch das Zu­sam­men­spiel von Text und mul­ti­me­dia­len Inhalten eine besondere User-Ex­pe­ri­ence zu schaffen, die den Lesefluss nicht un­ter­bricht.
• Fixierte Na­vi­ga­ti­ons­leis­te: Eine fixierte Na­vi­ga­ti­ons­leis­te gehört bei den meisten OnePagern dazu. Dabei bleibt die Na­vi­ga­ti­on immer im Bild fixiert, man kann jederzeit zu einem anderen Element auf der Seite springen.
• Sprung­mar­ken: Über Sprung­mar­ken oder andere Call-to-Actions geben Sie Nut­ze­rin­nen und Nutzern die Mög­lich­keit, an ver­schie­de­ne Stellen zu springen.
• Scrollspy: Mithilfe eines Scrollspy-Plugins können Sie Ihren OnePager um eine Na­vi­ga­ti­ons­leis­te erweitern, die Usern au­to­ma­tisch anzeigt , an welchem Punkt der Website sie sich gerade befinden.
• In­ter­ak­ti­ve In­fo­gra­fi­ken: OnePager bieten eine gute Mög­lich­keit für die Arbeit mit Ani­ma­tio­nen und in­ter­ak­ti­ven In­fo­gra­fi­ken. Ein gutes Beispiel ist die folgende Grafik, die Ihnen die be­lieb­tes­ten Namen zu einer be­stimm­ten Hun­de­ras­se ausspielt.
• Parallax-Scrolling: Im Gegensatz zum her­kömm­li­chen Scrolling bewegen sich einzelne Elemente und Ebenen der Website beim Parallax-Scrolling in un­ter­schied­li­chem Tempo. OnePager sollen durch den Einsatz der Technik mehr Tiefe bekommen.
• Flat-Design: One-Page-Design wir häufig mit dem so­ge­nann­ten Flat-Design kom­bi­niert. Hierbei ver­zich­tet man bewusst auf Schatten, Verläufe, drei­di­men­sio­na­le Elemente und rea­lis­tisch wirkende Texturen im All­ge­mei­nen. Das Flat-Design soll den re­du­zier­ten, mi­ni­ma­lis­ti­schen Charakter des One-Page-Layouts ver­stär­ken, indem es die wenigen Inhalte in ihrer Ein­fach­heit und Struk­tu­riert­heit in den Mit­tel­punkt rückt.

Für wen eignen sich OnePager? (Mit Bei­spie­len)

Die simple, ein­sei­ti­ge Struktur bringt viele Vorteile mit sich, ist aber nicht für jede Art von Website geeignet. Der erste Aus­schluss­fak­tor ist der Inhalt. Möchte man viele In­for­ma­tio­nen, viel­leicht sogar in un­ter­schied­li­chen Ka­te­go­rien dar­stel­len, ist ein OnePager eher un­ge­eig­net. Ein Nach­rich­ten-Portal wäre z. B. schwer umsetzbar mit dem One-Page-Webdesign.

Abgesehen von der Menge der In­for­ma­ti­on kommt es auf die Intention an, die da­hin­ter­steckt. OnePager eignen sich gut, wenn man vor allem eines im Sinn hat: Verkaufen. Sind die In­for­ma­tio­nen in sinn­vol­ler Rei­hen­fol­ge auf­be­rei­tet, muss sich die po­ten­zi­el­le Kund­schaft die einzelnen Infos nicht aus ver­schie­de­nen Un­ter­sei­ten zu­sam­men­su­chen, sondern hat alles Relevante auf einen Blick.

Un­ter­neh­men mit über­sicht­li­chen Angeboten und Services

Ob Dienst­leis­tun­gen oder Produkte – Un­ter­neh­men mit einem über­schau­ba­ren Portfolio haben mit einem OnePager eine her­vor­ra­gen­de Al­ter­na­ti­ve zur üblichen Website. Ein gutes Beispiel: Die Web­prä­senz des ame­ri­ka­ni­schen Software-Ent­wick­lers Dolox.

Agenturen

Für Agenturen ist das One-Page-Design bestens geeignet, wie die in­for­ma­ti­ve Seite der Web­agen­tur Willow unter Beweis stellt.

Per­sön­li­che Profile (Port­fo­li­os)

Ein OnePager bietet Pri­vat­per­so­nen sowie Frei­be­ruf­lern und Frei­be­ruf­le­rin­nen die Mög­lich­keit, sich in aller Kürze im Web vor­zu­stel­len. Wie man dabei die Auf­merk­sam­keit der Be­su­che­rin­nen und Besucher gewinnt, zeigt die Portfolio-Seite des Wer­be­tex­ters Charlie Pite.

Vor­stel­lung von Projekten oder Kampagnen

Auf einem OnePager lassen sich außerdem einzelne Projekte oder Kampagnen vor­stel­len. Ein ein­drucks­vol­les Beispiel liefert die One-Page-Website der National Domestic Workers Alliance, auf der die Ge­ring­schät­zung für Haus­halts­hil­fen in den USA the­ma­ti­siert und der os­car­prä­mier­te Film „Roma“ über die Haus­häl­te­rin Cleo beworben wird.

Ver­an­stal­tun­gen

Ob Un­ter­neh­men, öf­fent­li­che Ein­rich­tung oder Pri­vat­per­son: Eine an­ste­hen­de Ver­an­stal­tung lässt sich her­vor­ra­gend mit einem OnePager bewerben, wie hier bei der Hochzeit von Jess und Russ.

Vor- und Nachteile des One-Page-Designs

Im richtigen Kontext sowie mit den richtigen Inhalten und Stra­te­gien ein­ge­setzt, bringt ein OnePager eine Menge Vorteile mit sich. Natürlich hat dieses au­ßer­ge­wöhn­li­che Design aber auch ein paar Nachteile, die nicht von der Hand zu weisen sind. Die nach­fol­gen­de Tabelle fasst ab­schlie­ßend die wich­tigs­ten Argumente für und gegen das Single-Page-Design zusammen.