One-Pager erstellen – Von der Planung, über die Technik, bis zur fertigen Seite.

One-Pager erstellen - Von der Planung, über die Technik, bis zur fertigen Seite.Im letzen Artikel von mir ging es darum, warum One-Pager unter gewissen Umständen eine gute Möglichkeit sind, um Aufmerksamkeit zu erzeugen und Kunden anzusprechen.

Heute dagegen möchte ich über die Planung, Technik und Umsetzung dieser Form von Website sprechen. Wer also Interesse daran hat, in naher Zukunft einen One-Pager zu erstellen, der sollte nun unbedingt weiterlesen. Hier gibt es alles Wissenswerte, was ihr für die saubere Umsetzung von One-Pagern benötigt, inklusive Page Buildern, Plugins, Services und einer Checkliste.

One-Pager erstellen – Planung ist das A und O

Anders als bei den gängigen Websites üblich, ist die Planung bei One-Pagern deutlich wichtiger. Wo ein Blog zum Beispiel auch einfach mal umgesetzt und später noch angepasst werden kann, sollten One-Pager nur sehr durchdacht und vor allem fertig online gestellt werden.

Bei der Planung geht es aber nicht nur um eine saubere und korrekte Technik, sondern auch um die Art und Weise, wie ihr mit dem One-Pager eine Geschichte erzählen wollt. Genau dafür ist diese Form von Website nämlich prädestiniert, doch gute Geschichten erzählt ihr eben nur mit einer gelungenen und vorher erdachten Komposition.

Wie im anderen Artikel bereits angesprochen, muss ein One-Pager den Nutzer deshalb bis zum Ende durch die Inhalte leiten und ihn dabei immer wieder überraschen und motivieren, sodass er tatsächlich auch bis dorthin liest oder scrollt. Deshalb ist die Planung das A und O, denn so überlasst ihr nichts dem Zufall.

Das Ziel bei bei einem One-Pager ist und bleibt, den Nutzer quasi direkt an die Hand zu nehmen. Er sucht nicht, er findet alles auf der einen Seite und es wird ihm stilvoll und behutsam präsentiert. Empfehlenswert ist es daher auch, vorab ein durchdachtes Konzept zu zeichnen und sich zunächst einmal zu überlegen, welche Informationen als Highlight präsentiert werden können. Was lässt sich animieren, welche Elemente sollen wo vorhanden sein und so weiter.

Das Ganze mal auf ein Blatt Papier zu zeichnen und zu entwerfen, hilft dabei den Überblick zu behalten. Profis können auch Prototypen erstellen, wichtig ist eben nur ein durchdachtes Konzept, welches nicht wirr und wild umgesetzt wird. One-Pager entwickelt man nicht einfach ins Blaue hinein, sondern nur mit viel Überlegung. Das gilt auch für die dahinterstehende Technik.

Technik von One-Pagern

Ja, es gibt Baukästen und fertige Themes bzw. HTML-Templates für One-Pager. Nein, die solltet ihr in aller Regel nicht verwenden. One-Pager sind deshalb so genial, weil sie fast immer individuell gestaltet werden. Das ist ihr eigentlicher Vorteil. Die Seite wird um die Inhalte herum gebaut und realisiert, nicht umgekehrt. Deshalb funktionieren sie so gut und konvertieren auch. Natürlich ist mir aber bewusst, dass nicht jeder einen One-Pager programmieren kann und will. Gerade die Animationen sind für viele ein Problem, von Dynamiken und mehr mal ganz abgesehen. Vorteil hin oder her, es muss immer auch praktisch bleiben und viele wünschen sich daher einen einfachen Baukasten.

Bei WordPress gibt es da verschiede Page Builder, die sich ganz und gar auf One-Pager spezialisiert haben. Die Plugins One Page Builder oder Aesop Story Engine sind hier zu nennen. Hiermit lassen sich relativ einfach sehr unterhaltsame One-Pager erzeugen, die dann aber natürlich nicht so individuell oder besonders ausfallen. Aber das ist eben der Preis den ihr zahlt, wenn ihr eine entsprechende Fertiglösung verwendet.

One-Pager erstellen - Von der Planung, über die Technik, bis zur fertigen Seite.
One-Pager Elemente im Plugin “Aesop Story Engine”

Weitere Alternativen sind der BeaverBuilder, Divi von Elegant Themes und Elementor. Mit solchen Page Buildern lässt sich in WordPress relativ einfach mehr als nur ein Blog realisieren. So richtig sinnvoll empfinde ich WordPress für One-Pager allerdings trotzdem nicht. Zu überladen, zu träge, zu viel PHP für eine im Vergleich eigentlich recht simple Sache.

Neben WordPress gibt es auch viele Homepagebaukästen, die die Erstellung von simplen One-Pagern ermöglichen. WordPress ist da eher ungeeignet und nicht zwingend von Vorteil, weil One-Pager in der Regel nur HTML-Seiten sind. Egal ob wix.com oder ein auf Landing Pages spezialisierter Service wie leadpages.net, beide können ebenfalls gute One-Pager erzeugen.

Doch all das ist eben nur ein Baukasten und gute One-Pager sind immer handgemacht, sehr individuell und überraschen den Nutzer mit Dingen, die er eben noch nicht kennt. Das geht mit derartigen Diensten aber eher selten, dafür müsst ihr selbst HTML, CSS und Javascript beherrschen. Handgemacht ist und bleibt in diesem Bereich das absolut Beste, weil alles wie erwähnt sehr individuell sein sollte, um tatsächlich zu wirken.

One-Pager mit Analysen perfektionieren

Das Web ist und bleibt unberechenbar. Egal wie viele Gedanken ihr euch macht, gewisse Dinge entscheidet die Zielgruppe. Daher empfinde ich es als besonders wichtig, One-Pager nach der Veröffentlichung noch einmal mit den Erkenntnissen der Nutzer zu überarbeiten. Sobald ihr rankt und eure Zielgruppe ansprecht, gilt es daher einen Service für Heatmaps zu verwenden. Mit diesem lassen sich Klicks, Mausbewegungen und Scrollverhalten messen. Ist der Content nicht spannend genug, scrollen die Nutzer nicht. Sind die Buttons schlecht platziert oder farblich unattraktiv, klicken sie nicht. Und je nachdem wo die Maus üblicherweise platziert wird, sollten dort wichtige, konvertierende Elemente untergebracht werden.

Solche Geheimnisse offenbaren Heatmaps.

One-Pager erstellen - Von der Planung, über die Technik, bis zur fertigen Seite.

Wichtig dabei ist, dass ihr dafür bereits an richtiger Stelle rankt und die Heatmaps eure Zielgruppe messen, nicht wild hinzugekaufte Werbeklicks oder ähnliches. Ich selbst kann da den Service von Hotjar empfehlen, der auch kostenlos gut nutzbar ist, zumindest wenn euer Projekt nur über wenige Aufrufe verfügt. Zu sehr möchte ich hier aber nicht auf das Thema Heatmaps eingehen. Zum einen, weil es ein Thema für sich ist, zum anderen, weil Peer dazu bereits eine interessante Artikelserie geschrieben und alle wichtigen Services genauer vorgestellt hat.

Checkliste für beeindruckende One-Pager

One-Pager müssen begeistern und damit sie das tun, benötigen sie verschiedene Elemente. Meine persönlichen Tipps und Tricks findet ihr hier. Jeder Punkt der Checkliste sollte vorhanden oder umgesetzt sein. Wenn nicht, arbeitet daran ihn hinzuzufügen.

Ein One-Pager muss…

  • Fesseln: Zieht die Nutzer in euren Bann! Startet den One-Pager mit einem Knall, einem starkem Video oder genialen Bild. Die Hero Images der Vergangenheit, sind hier ein gutes Beispiel, auch wenn sie heute längst ihre Wirkung verloren haben.
  • Leidenschaft: Liebt was ihr schreibt. Wenn jemand für ein Thema brennt, merkt das auch der Leser. Lasst eure Leidenschaft sprechen, damit jeder merkt wie viel hinter dem Content steckt.
  • Reduziert: Google mag zwar lange Inhalte, doch weniger ist dennoch mehr. Nicht unnötig plappern, sondern wortgewandt überwältigen. Google mag nämlich auch Nutzerfeedback, doch Nutzer hassen gestreckte Inhalte, die nur für Maschinen geschrieben sind.
  • Wow-Effekte: One-Pager brauchen Wow-Effekte, wie keine andere Form von Website. Sei es nun eine starke Animation, ein aufwändiges Video, oder wundervoll designte Grafiken. Auf einem One-Pager muss es immer mehrere Wow-Effekte geben, die regelrecht verblüffen.
  • Sozial & emotional: Klingt einfach, ist aber besonders schwer. Sorgt dafür, dass Nutzer emotional und persönlich angesprochen werden und eure Inhalte freiwillig, bereitwillig und gerne teilen. Findet emotionale Trigger der Zielgruppe und baut sie entsprechend ein.
  • Multimedial: Textwüsten sind öde, Videos laden oft nicht überall, Bilder sind zu steril. One-Pager sollten multimedial sein, also alles an der richtigen Stelle einsetzten. Auch hier gilt der Wow-Effekt. Wenn ein Bild langweilig ist, hat es einfach keine Existenzberechtigung. Baut nicht nur Bilder und Videos ein, damit es multimedial ist, sondern baut sie ein, weil sie wirklich helfen und an entsprechender Stelle Sinn machen.
  • Dynamisch: Wer clever ist, entwickelt One-Pager dynamisch. Inhalte, die speziell an den Nutzer oder seine Interessen angepasst werden, sind ein Anfang. Das kann sehr schnell, sehr kompliziert werden, lohnt aber dennoch, weil jede Art von Nutzer so die perfekt für ihn passenden Inhalte präsentiert bekommt.
  • Interaktiv: Sorgt für Mikrointeraktionen, zum Beispiel mit Abstimmungen oder speziellen Funktionen. Diese sorgen dann dafür, dass Nutzer aktiv werden können und länger auf der Seite verweilen. Nutzer auf der eigenen Seite beschäftigen, dies ist auch bei One-Pagern nicht unwichtig, wenn man entsprechend gut ranken möchte. Unterhaltet sie, haltet sie bei Laune.
  • Schnell: Performance ist nicht nur ein Ranking-Faktor, sie ist in Zeiten von gedrosselten Tarifen auf Smartphones auch wichtiger als jemals zuvor. Lädt ein One-Pager zu lange, ist der Nutzer blitzschnell weg. Performance ist bei einem One-Pager eine echte Herausforderung. Die vielen Elemente, Funktionen und Animationen, all das muss entsprechend performant eingebunden und umgesetzt werden. Eine Form von Lazy Load ist hier nur der Anfang. Nur wer die verwendete Technik perfektioniert, kann später auch mit den Inhalten punkten.

Diese Checkliste gibt es auch als PDF zum Download.

One-Pager können eine echte Bereicherung sein

One-Pager sind eine komplizierte Sache. Klar, ihr könnt schnell mal eine Seite mit WordPress oder einem Baukasten aufsetzten, doch hat das wirklich etwas mit einem gelungenen One-Pager zu tun? Ich finde nicht. One-Pager sind technisch eindrucksvolle und inhaltlich sehr clever ausgearbeitete Einzelstücke. Sollten sie zumindest sein. Sie sind eine Bereicherung, gerade weil das Web voll mit Mittelmaß ist.

Was bei dieser so speziellen Form von Website wichtig ist und wie ihr einen One-Pager umsetzt, hat der Artikel aufgezeigt. Wenn ihr die Sache selbst ein wenig anders seht oder noch einen Punkt hinzufügen möchtet, schreibt doch einfach einen netten Kommentar. Feedback freut mich immer, gerade bei einem so umfangreichen Thema.

10 Gedanken zu „One-Pager erstellen – Von der Planung, über die Technik, bis zur fertigen Seite.“

  1. Theoretisch könnte man sich natürlich auch schnell ein ganz einfaches HTML Framework (gern mit Javascripts garniert) bauen, mit dem man dann ultra-schnell ladende Onepager bauen kann.

    Insgesamt finde ich das Thema spannend, gerne mehr dazu.

    Antworten
  2. Ganz sicher eignen sich One-Pager nicht für jedes Thema, aber gerade derjenige, der sich mit seiner Nische ein kleines Business aufbaut, Kunden in seinen Bann ziehen möchte oder vielleicht sich nur auf ein einziges Produkt konzentriert, findet hier sicherlich eine tolle Möglichkeit.

    One-Pager haben aus meiner Sicht drei ganz große Vorteile:

    – Pagebuilder, wie Elementor, können ein einfaches Hilfsmittel für One-Pager sein, wenn mir Programmierwissen oder Webdesignkenntnisse fehlen sollten.
    – Sie sind sehr wartungsfreundlich, da ich alles, was ein mögliches inhaltliches oder technisches Update benötigt, auf meiner einen Seite finde.
    – Meine Besucher können problemlos auf der Seite navigieren und finden sehr schnell das, wonach sie suchen.

    Aktuell scheint es wirklich “in” zu sein, mit One-Pages zu arbeiten. Ausprobieren lohnt also allemal.

    Antworten
  3. Hallo David,

    Gute one pager sind eine sehr geile Sache. Da ich selbst leider nur wenig Programmierkenntnisse habe, reicht es nicht für einen kompletten one pager.

    Werde mir daher mal deine oben genannten Tools anschauen und eventuell darauf aufbauen.

    Aber cooles Thema, zu dem ich gerne mehr lese 😉

    Schöne Grüße Fin

    Antworten
  4. One Pager sind sicherlich der gerade am häufigsten anzutreffende Trend bei Websites.
    Ich persönlich bin ein Fan von nicht zu viel Schnickschnack – das ist besonders verräterisch, wenn man nämlich keine Inhalte zu vermitteln hat.
    Da nützen die Spielereien in Form von bewegten und durch den Bildschirm flitzenden Bildern auch nichts, wenn man nichts klicken, sehen kann oder noch schlimmer: den Überblick verliert. Dann lieber minimalistisch und auf ansprechende Fotos setzen. Meine Meinung. Bei Galia Lahav zB sieht man auf der Website auf den ersten Blick: Hochzeitskleider. Bei einem Portfolio eines Fotografen zB sollte ein gutes Foto als Aushängeschild benutzt werden. Responsive WebDesign ist dabei das Format mit der weitesten Zukunft, denke ich.

    Ich schaue mir auch mal die von dir erwähnten Tools an! Danke

    Liebe Grüße,
    Anna

    Antworten
  5. Hallo,

    vor kurzem habe ich meinen ersten One-Pager erstellt. Der Grund, warum ich mich zu einem One-Pager entschieden habe, war, dass die Nische thematisch recht klein ist. Mehrere Seiten hätte man nicht sinnvoll mit Inhalt füllen können.

    So ist es dann auch technisch eine ziemlich abgespeckte Variante geworden. Also ein ganz normales WordPress-Theme, Menüleiste aufgeblendet und fertig. Also genau das Gegenteil deiner Empfehlungen.

    Mal schauen, wie sich das entwickelt – schlimmstenfalls floppt es halt.

    lg
    Erik

    Antworten
  6. Ich habe auch schon ein paar Versuche von Onepagern hinter mir. Es macht durchaus Spaß, sich komplett auf ein Thema und die nachfolgende Interaktion zu konzentrieren. Grad wenn die Aktion nur für einen begrenzten Zeitraum besteht, muss man sich natürlich die Frage stellen, was man mit dem Traffic danach macht, denn im besten Fall hat man noch einige Links eingesammelt. 301 wäre also lohnend, sofern es ein übergeordnetes Thema gibt, was dem Besucher hilft. (nicht die Startseite ^^). Nur Vorsicht beim inflationären Einsatz von Subdomains, denn man stelle sich nach 50 solcher Aktionen einen Serverumzug vor – der Admin wird sich bedanken, wenn er in den diversen Backend-Tools jede tote Subdomain nochmal anlegen muss 😉 Gruß Martin

    Antworten
  7. Hallo David,
    danke für die Checkliste. Ich habe auch schon die eine oder andere Seite als One-Pager versucht, bin damit aber nie sehr erfolgreich geworden. Insbesondere die Punkte “Wow-Effekt” und “Dynamischen Content” habe ich da wohl immer etwas vernachlässigt.

    Spannend finde ich an diesen Seiten, dass Sie (wenn selbst entwickelt) kaum Pflegeaufwand benötigen. Das ist einer der Hauptpunkte die mich momentan an WP stören. Auch geben viele besonders eng abgesteckten Themen kaum mehr her als eine gut gefüllte Seite.

    Antworten
  8. Was ist denn mit SEO? Wie kann Google einen bestimmten Bereich (also einen Ausschnitt der ganzen Page”) ansteuern? Kann Google damit überhaupt umgehen?

    Was bringt mir eine tolle One-Page-Site wenn diese von Google mehr oder weniger ignoriert wird?

    Antworten
  9. Den Einwand, das WordPress nicht für einen One-Pager geeignet sein soll, wegen der Trägheit etc. würde ich so nicht unterstreichen. WordPress bekommt man schnell genug und der große Vorteil, wenn ich zu meinem OnePager später doch mehr Inhalt dazu packen möchte, kein Problem mit WordPress.

    Und um auf die Frage von Walter zu antworten, einen One Pager sehe ich als Visitenkarte, für Regionale Geschäfte wie Metzger, Blumenläden etc. die benötigen kein aufwendiges SEO.

    Antworten
  10. Der Artikel hat mir sehr geholfen um vielen Dank für die Checkliste.

    Ich überbelege auch gerade ob ich für eine Nische einen One-Pager machen soll.

    Super wäre, wenn man so eine One-Pager Seite mal in echt sehen könnte. Vor allem eine die auch Einnahmen generiert. Könnt ihr da die eine oder andere Seite mit Link hier empfehlen?

    Antworten

Schreibe einen Kommentar