Single Page Web Applikationen (SPA) oder OnePager sind Webseiten, die mit nur einer Seite auskommen. Der gesamte Inhalt einer Webseite wird kompakt, gut aufbereitet und übersichtlich auf einer Seite untergebracht. Dieser neue Trend wird im Web immer populärer.
© Visual: www.corporate-interaction.comWebdesignerInnen, die versuchen ihren Finger am Puls der Zeit zu haben, preisen diese Art der Webseitenerstellung als allgemein perfekte Lösung an. Wenn wenig Inhalt, mit stilistischen Elementen in einem Storytelling Sinn macht, sind sie es auch.
Obwohl die Vorteile gegenüber herkömmlichen navigationsbasierten Webseiten groß sind, sind Single Pages nicht für Jedermann geeignet. Nachfolgend werden Single Pages erklärt und Nachteile erläutert, um die Entscheidung zu erleichtern.
Ist eine Single Page die richtige Lösung?
- Wie viel Inhalt soll präsentiert werden?
Zur Präsentation von viel Content sind Single Pages nicht geeignet. Bei einem großen Informationsumfang sollte auf eine herkömmliche Multiseiten-Variante zurückgegriffen werden.
- Wird ein Produkt demonstriert?
Eine Single Page ist hier genau das Richtige, um das Produkt zu präsentieren. Eine sehr schöne Umsetzung gibt es von dyson: https://www.dyson360eye.com
- Kommen Sie mit Ajax und JavaScript (JS) zurecht?
Die Ajax-Technik (Asynchronous Javascript XML) ist zur Zeit der gängigste Ansatz. Auch JS und JQuery werden für die Navigation und gestalterische Elemente eingesetzt. So werden klar strukturierte Webseiten erstellt.
- Stehen die Inhalte in Beziehung?
Es macht nur Sinn, viele Inhalte auf einer Seite zu präsentieren, wenn sie in Bezug zueinander stehen.
Die Beantwortung dieser Fragen erleichtert Ihre Entscheidungsfindung.
6 Tipps für Single Pages
1. Inhalt minimieren
Für Single Pages muss der Inhalt auf ein Minimum reduziert werden. Die gesamten Inhalte werden beim Seitenaufruf geladen. Der Aufbau der Seite dauert länger als bei herkömmlichen Mulitseiten (auch bei der Verwendung von Ajax). Finden Animationen Anwendung, kann auf ausführliche textliche Beschreibung verzichtet werden.
2. Reihenfolge der Inhalte
Um BesucherInnen bestmöglich zu informieren, müssen die Informationen gut sortiert und in einer sinnvollen Reihenfolge präsentiert werden. Die herkömmliche Strukturierung von Webseiten kann als Vorlage bei der Erstellung dienen. Storytelling ist bei Single Pages gut durchführbar.
3. Horizontales Scrolling (Parallax)
Mit neuen Technologien wie HTML5 und CSS3, können interessante und bemerkenswerte Effekte erstellt werden. Richtig eingesetzt, tragen diese Effekte zu einer unvergesslichen Webseite bei. Parallax Scrolling oder Bewegungsparallaxe bezeichnet man den Effekt der entsteht, wenn man aus einem fahrenden Auto oder Zug blickt. Verschiedene Objekte in unterschiedlichen Entfernungen, ziehen mit scheinbar unterschiedlicher Geschwindigkeit vorbei. Durch das zusätzliche Einbauen von horizontalem Scrolling, zum klassischen vertikalen Scrolling, können mehr Inhalte dargestellt werden.
4. Responsive Webdesign
Berücksichtigen Sie den sichtbaren Bereich, wie ihn auch Ihre BesucherInnen vor sich sehen. Achten Sie darauf den Anzeigebereich optimal auszunutzen. Unter Responsive Webdesign versteht man, dass eine Single Page auch auf mobilen Endgeräten ohne zoomen und scrollen auskommt. Die Seite wird automatisch an das Endgerät angepasst.
5. Sektionen klar trennen
Die meisten BesucherInnen sind mit dem herkömmlichen Klicken auf einen Link, Button oder die Navigation vertraut. Wenn einzelne Sektionen der Single Page nicht klar getrennt werden, ist es für BesucherInnen nicht ersichtlich, dass ein neuer Inhalt beginnt. Mehrere Möglichkeiten existieren, um eine klare Unterscheidung zwischen Sektionen zu gewährleisten. (1) Ein Header für jede Sektion (2) unterschiedliche Hintergründe oder Hintergrundfarben (3) Überschriften (4) Whitespace (5) wenig Text.
6. Call-to-Action
Die klar strukturierte Platzierung der Inhalte soll BesucherInnen zu genau einem Ziel fÜhren. Gängige Ziele am Ende der Seite sind: Kontaktformulare, Rufnummern, Anfahrtsskizzen, Newsletter-Abos, Links zum Onlineshop oder Downloads. Ein roter Faden durch die Single Page endet in einem perfekten Abschluss.
Nachteile
- Single Pages sind für Seiten mit viel Content ungeeignet.
- Soll die Seite für mehrere Keywords optimiert werden, reicht eine Single Page nicht aus.
- Bei vielen großen Bildern kann die Ladezeit sehr hoch werden.
Quellen:
http://www.jansemler.de/webdesign/single-page-website-und-wie-man-es-richtig- macht/
http://in2web.de/webdesign-trends-2014-beispiele-und-analyse-one-page-design/
Hier finden Sie zusätzliche Informationen zum Thema. Die Seite ist selbst eine gelungene Umsetzung dieses Trends: