Alles im Überblick?

Ein Design-Trend, den es eigentlich schon lange gibt, wurde durch Responsive Design neu beflügelt: Der gesamte Inhalt einer Website auf einer mehr oder weniger umfangreichen Seite beisammen.

One Page Design - Die ganze Website auf einer Seite

Ich habe schon viele solcher Websites gemacht: Alles auf einer Seite. Gerne verwende ich als Basis dazu das alte "Rooms" - Template, das mehrere WB-Seiten auf einer horizontalen Seite zusammenfasst. Die Links im Menü sind eigentlich nur Sprungmarken, per Javascript wird dorthin gescrollt.

Je nach Inhalt kann man dabei durch aus auch Vertikal/horizontal mischen: Einzelne Blöcke ragen eben weiter nach unten, so dass auch nach unten gescrollt werden kann/muss.

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 Rau-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 WB-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 Klassiker: Rooms

 

Von der beliebten Foldergallery kann man in einem One Page Design nur genau einen Abschnitt anlegen, und dieser darf auch nur eine Kategorie haben. iFrame mit mehreren Kategorien geht nicht, wegen der Overlays.

Bei News oder Topics kann man nur Titel und Teaser verwenden. Auf Kommentare muss man dabei verzichten. Gästebuch? Njet.

 

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 site-check.cc: 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.

Neuere Themen:

Kommentare: moderiert

Braucht man eine Google-Sitemap?
Kinder - seid ihr alle da?

Ältere Themen:

Praktisch: Google Webmastertools
Der Website unter den Rock geschaut.

Mal was anderes: Grid-Design
Alle Kästchen im Kasten.

Zurück


Kommentare:

28.07.2013

Anke

Sehr guter Artikel mit vielen wichtigen Informationen gespickt.

28.07.2013

Chio

Und so langsam werde ich die Begriffe "Safari" und "Kenia" in den Spamfilter stecken.

Das CMS WebsiteBaker im professionellen Einsatz