One-Page Websites – was steckt dahinter?

Ein begehrtes Webdesign-Muster ist heutzutage die sog. ’one-pager’ – also wo quasi alle Inhalte auf der gleichen Hauptseite sind. Navigationselemente sind weiterhin vorhanden, beim Anklicken scrollt die Seite automatisch zum gewählten Inhaltspunkt. Wie so eine Website funktioniert, fassen wir im folgenden Artikel zusammen.

Einen modernen, vor Allem interaktiven Eindruck weckt so ein one-pager. Kein Wunder, dass solche Webseiten an der Zahl zugenommen hatten. Die Bewegung zwischen Navigationselementen macht die Nutzung der Seite ein wirklich interaktives, spannendes Erlebnis. Genau so etwas kriegt die Aufmerksamkeit Ihrer Besucher! Daher ergibt sich die Frage, wie denn diese Lösung technisch möglich ist.

 

Der one-pager Aufbau

Von dem Aufbau her sind solche Seiten ähnlich wie herkömmliche Websites. Als Ausgangspunkt gibt es ja mehrere Seiten. Diese sind vom Design her gleich oder auch unterschiedlich, dies macht von der Umsetzung her keinen Unterschied. Auch haben sie ihre eigenen Inhalte: Texte, Fotos, Videos, Animationen usw.

 

Der Normalfall vs. one-pager

Was passiert nun im bekannten Fall? Durch die Navigation gelingt man von der einen Seiten auf die Andere. Dabei wechselt man von einer Bildschirmdarstellung auf eine komplett andere.

Beim one-pager ist genau dies etwas unterschiedlich. Die Seiten folgen untereinander auf der gleichen Hauptseite. Statt die komplette Seitendarstellung zu wechseln, scrollt man also automatisch von einem Teil zum Nächsten. Die eventuell dazwischen liegenden Inhaltsteile werden durchgescrollt. Die ganze Bewegung passiert jedoch vor unseren Augen, also das Durchscrollen durch verschieden Seiten sieht man auch.

Die technische Umsetzung

ist gar nicht so kompliziert. Was am Ende passiert, ist folgendermaßen. Alle ’Seiten’, also Inhalte werden auf eine Hauptseite, untereinander eingepflegt und mit einem ID gekennzeichnet. Beispielsweise #seite1, #seite2, #blumen, #hunde, #preisliste. Bei der Erstellung der Navigation kommt dann der nächste Trick: man fügt nicht einfach alleinstehende Seiten in die Navigation ein. Stattdessen erstellt man sog. ’custom links’, die jeweils auf den gewollten Inhaltsteil zeigen: #seite1, #preisliste, usw. Das Ergebnis wird wie gewünscht aussehen: durchs Anklicken der Navigationselemente scrollt die Seite automatisch zum geklickten Teil. Gut gemacht!

 

Hinweis: die obige Beschreibung beschreibt die Erstellung eines one-pager im WordPress CMS. Andere CMS Systeme unterscheiden sich jedoch nicht signifikant.

Die SternCo Agentur ist nach vorheriger Absprache, bei Bedarf erreichbar in Nürnberg unter:

Zeltnerstraße 3, 90443 Nürnberg