One Page Design - Die ganze Website auf einer Seite

One-Page Varianten

Vertikal

Endlos weit nach unten scrollen, wie man es zb von Facebook gewohnt ist: dazu braucht man kein spezielles Template, jedes halbwegs responsive Template ist geeignet. Eventuell macht es Sinn, das Menü auszubauen; man braucht es ja nicht. Das geht sauber, indem man die entsprechenden Codezeilen im Template auskommentiert, oder Hau-Ruck, indem man es per CSS auf display:none setzt. Danach legt man einfach Abschnitt um Abschnitt an.

Etwas schwieriger ist es, wenn man Blöcke haben will, die "floaten", also je nach Bildschirm-Breite neben-/untereinander purzeln. Hier sollte man zu einem Modul greifen, das selbst mehrere Inhaltsblöcke erzeugen kann, etwa Members, Topics oder viele andere, und dafür sorgen, dass diese mit einem kontrollierbaren DIV-Container ausgeliefert werden. Diverse Modul-Inhalte kann man dann mit dem Droplet „SectionPicker“ einfügen - das nötige CSS dazu muss man aber selbst dazuladen.

Will man das nicht, muss man in den WBCE-Code und die Ausgabe so ändern, dass jeder Abschnitt mit einem DIV versehen wird.
Weitere Möglichkeit: so viele DIV+Contentblöcke im Template anlegen, wie man will. Nachteil: Diese müssen dann auch Inhalt haben, sonst bleibt nur ein leerer DIV.

Bei mehr als 2 floatenden Div-Blöcken nebeneinander gibt es ein spannendes kleines Problemchen: Sind die Blöcke verschieden hoch, "verkeilen" Sie sich gerne mal ineinander; ein Block floatet nicht ganz nach links, sondern hängt irgendwo mitte-halb-rechts. Mit Media-Queries kann man das aber in den Griff bekommen.

 

Tricky: Horizontale Seiten

Ein Prototyp eines horizontalen One-Page-Designs ist das alte Template "Rooms". Der Grund, warum ich es nicht mehr zum Download anbiete: Zuviele Fragen im Forum, per eMail, sogar telefonisch. Klar gesagt: Wer ein horizontales Design haben will, muss wissen, was er tut - und das setzt eben auch Kenntnisse in HTML, CSS und die Funktion von Websitebaker selbst voraus. „Rooms“ ersetzt nicht das Wissen, sondern nur einen Teil der Umsetzung.
Eine ganz besondere Herausforderung ist es auch, ein horizontales Design für Mobilgeräte mit kleinen Screens brauchbar zu machen.

Nicht alle Module spielen mit

Vereinfacht kann man sagen: Keine Interaktion, keine Parameter, keine Module, die selbst Seiten erzeugen. Der Grund ist einfach: So wird aus den One-Page-Design ein Multipage-Design, das unkontrollierbar ist. Welcher Parameter gilt für welches Modul? Wohin mit dem Output eines Moduls?

Eine Möglichkeit ist es, zb das Kontaktformular als iFrame anzulegen und alles was Target ist, zu unterdrücken. Dennoch: Jetzt haben wir plötzlich mit den Tücken von Frames zu tun, und damit kann nicht jeder umgehen. Ein Beispiel: Mit jQuery geöffnete Overlays beschränken sich auf den Platz des iFrames

Und was hält Google davon?

One-Page-Designs sind nicht ganz leicht in die Rankings zu bringen, aber es geht natürlich. Mehr dazu bei webeye.at: One-Page-Designs, Googles Liebling oder nicht des Rankings wert?

Wer seine Kunden vor allem über die Google-Suche gewinnen will, sollte eher ein konventionelles Design wählen.