Vor einer Woche habe ich über Trends geschrieben, die das Design deiner Website beeinflussen. Der Abschnitt über Onepager hat einige Reaktionen ausgelöst, darum gehe ich heute etwas tiefer ins Detail. Weil Onepager einfach strukturiert sind, eignen sie sich vor allem für Websites mit wenig Inhalt oder mit Inhalten, die eng verknüpft sind. Besonders beliebt sind sie bei Fotografen oder Grafikern, die ihre Arbeiten zeigen, Beratern, die ihre Dienstleistungen vorstellen, oder Firmen, die ihre Produkte präsentieren wollen.

Mehr Spielraum
Ein Onepager oder eine Single-Page-Webseite hat, wie der Name sagt, nur eine Seite. Das gibt dem Designer viel Spielraum. Er muss nicht in Seiten oder Rastern, er kann in Bühnen oder Kapiteln (gleich Seiten) denken. Das gibt ihm mehr Freiraum, beispielsweise, um ein grafisches Element konsequent durchzuziehen. Die Navigation ist links oder oben fix platziert. Durch die Webseite navigierst du mit Klicks auf die Navigation. Du kannst allerdings auch mit der Maus rauf- oder runterscrollen, oft auch mit den Pfeiltasten der Tastatur. Onepager setzen auf HTML5 und CSS3, viele passen sich automatisch der Bildschirmgrösse an (Responsive Design).

Im Internet gibt es inzwischen viele Vorlagen, fast alle aus den USA. Wenn du nach «One pager template» suchst, listet Google über 6,2 Millionen Treffer auf. Eine grosse Auswahl an kostenlosen oder -pflichtigen Vorlagen findest du zum Beispiel bei One Page Love, CSS Templates oder ThemeForest. Viele Gratistemplates sind gut und eignen sich zum Üben. Wenn HTML und CSS für dich keine Fremdworte sind, kannst du sie problemlos anpassen. Falls du mehr ändern willst, solltest du etwas von JavaScript und allenfalls Ajax verstehen.

Onepager: Setz alles auf eine Seite
shadow

Tipps aus der Praxis
Fünf Tipps aus der Praxis für die Praxis:

  • Die Navigation muss einfach strukturiert sein, drei bis sechs Punkte müssen reichen.
  • Die Navigation muss immer sichtbar sein, auch wenn du ganz nach unten scrollst.
  • Jeder Navigationspunkt braucht einen Anker, damit die Seiten verlinkt werden können.
  • Halte dich kurz, schränk dich ein, bring alle wichtigen Informationen auf den Punkt.
  • Überleg dir Alternativen, wenn du viel Inhalt hast. Zum Beispiel vertikal scrollen.

Neugierig? Dann schau dir die Beispiele auf Webdesigner Depot an und lass dich inspirieren.

Onepager: Setz alles auf eine Seite

Sandro Bertschinger

Er fand Computer relative lange nicht so spannend. Ein Amiga 500 als "Game-Machine" war der Höhepunkt. Als das Internet aufkam und man entsprechend "coole" Webseiten machen konnte, kam das Thema Computer schon eher in den Mittelpunkt. Per Zufall kreuzte dann 2001 eine Internetfirma seinen Weg.

0