Hilfe:Spaltenlayout

Aus Wikivoyage

Dieser Artikel gibt einige Hinweise zur Verwendung von mehrspaltigen Layouts in Wikivoyageartikeln.

Verwendung von Spaltenlayouts[Bearbeiten]

Wikivoyageartikel weisen viele Parallelen mit typischen Reiseführern in Buchform auf. Der eigentliche Text nimmt daher auch im Regelfall die volle Seitenbreite in einer Textspalte ein, höchstens eingeschränkt durch Bilder und kleine Infoboxen am Seitenrand. Daher sollte im Artikelnamensraum im Regelfall auf ein mehrspaltiges Layout verzichtet werden. In folgenden Fällen können mehrere Spalten vorkommen.

  • Listen mit sehr kurzen Einträgen, die auf den meisten Geräten rechts viel weißen, ungenutzten Platz lassen. Dies könnten zum Beispiel Ortslisten sein, bei denen zu den Orten die Beschreibungstexte fehlen. Du kannst du aber auch als Alternative ein Bild in der freien Zone platzieren.
  • Einzelnachweise und Links am Artikelende sind oft kurz. Bei längeren Linklisten kann es angebracht sein, diese in zwei oder drei Spalten darzustellen.
  • Organisation bei Übersichtsartikeln mit mehrere Textboxen. Diese findet man oft im Projekt- und Hilfenamensraum sowie bei einigen Themenartikeln, wie z. B. beim Reisethemen-Index.

Vorlagen[Bearbeiten]

Mehrspaltiges Layout ist schwierig, besonders bezüglich der Anforderungen an ein responsives Webdesign. Gern griff man früher zu Tabellen, um Inhalte zu strukturieren, was mittlerweile allerdings nicht mehr genutzt werden sollte. Wird ein mehrspaltiges Layout benötigt sollten dabei unbedingt die vorhandenen Vorlagen genutzt werden. Welche Vorlage benutzt wird hängt davon ab, ob man in sich geschlossene Textblöcke oder Fließtext in Spalten anordnen möchte.

Fließtext[Bearbeiten]

Fließtext sollte immer automatisch gleichmäßig auf mehrere Spalten verteilt werden. Dies unterscheidet sich zu den Texten in Übersichtsartikel, bei denen immer in sich geschlossene Abschnitte und Textblöcke verteilt werden. Für den Fließtext gibt es derzeit 4 Vorlagen, je nachdem ob die Spaltenbreite oder die Anzahl der Spalten vorgegeben sein soll. Allen gemeinsam ist, dass sich die Spaltenanzahl automatisch verringert, wenn nicht ausreichend Platz auf der Anzeige zur Verfügung steht. Auf einem hochkant gehaltenen Mobiltelefon wird dann im Regelfall nur noch eine Spalte dargestellt. Vier Vorlagen stehen dabei zur Verfügung:

  • {{Spaltenbreite}} – Hierbei wird die Breite einer Spalte vorgegeben. Je nach Breite der gesamten Seite gibt es dann eine verschiedene Anzahl der Spalten.
  • {{2 Spalten}}, {{3 Spalten}} und {{4 Spalten}} – Die Seite wird in die angegebene Anzahl von Spalten aufgeteilt. Wird eine voreingestellte Breite unterschritten, wird die Spaltenanzahl reduziert.

Ein Klassiker für die Verwendung sind die Einzelnachweise, z. B. zu sehen im Artikel über die polnische Stadt Żagań. Erreicht wird das mit folgender Konstruktion: {{2 Spalten|<references />}}

Textblöcke und Infoboxen[Bearbeiten]

Seitenelemente, die im Ganzen eine Spalte zugeordnet werden sollen, können mit {{MultiColsLayout}} angeordnet werden. Jede Spalte kann dabei einzeln formatiert werden. Auch Fuß- und Kopfzeilen über die gesamte Breite sind möglich. Sie überdeckt aber möglicherweise Bilder und Karten am Seitenrand. Für ein geschachteltes System aus Textblöcken und Infoboxen lässt sie sich aber gut verwenden. Mit den weiteren Vorlagen {{Box}} und {{Zwischentitel}} lässt sich so ein Design wie unsere Hauptseite oder die Themenübersichten und Portale zusammenstellen. Es sind maximal 5 Spalten möglich. Die letzte Breitenangabe entällt im Regelfall.

Das folgende Beispiel ist die einfachste Variante mit zwei Textspalten: {{MultiColsLayout|col1=Textblock linke Spalte|width1=Breite linke Spalte|col2=Textblock rechte Spalte}}


Mit konkreten Werten könnte das so aussehen: {{MultiColsLayout|col1=Lorem ipsum...|width1=50%|col2=Lorem ipsum...}}

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Eine Überschrift zieht auch einen Rahmen nach sich: {{MultiColsLayout|title=Beispiel mit 2 Spalten|col1=Lorem ipsum...|width1=50%|col2=Lorem ipsum...}}

Beispiel mit 2 Spalten
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Auch ein einleitender Einführungstext über die ganze Breite ist möglich: {{MultiColsLayout|title=Beispiel mit 2 Spalten|col1=Lorem ipsum...|width1=50%|col2=Lorem ipsum...}}

Beispiel mit 2 Spalten
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Zu guter Letzt die Spalteninhalte in Boxen: {{MultiColsLayout|title=Beispiel mit 2 Spalten|intro=Lorem ipsum...|col1={{Box|title=Spalte 1|Lorem ipsum...}}|width1=50%|col2={{Box|title=Spalte 2|Lorem ipsum...}}}}

Beispiel mit 2 Spalten
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Spalte 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Spalte 2
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Prüfung des Layouts[Bearbeiten]

Wie schon angedeutet sind mehrspaltige Layouts durchaus heikel in der Umsetzung. Besonders, wenn es auf vielen stationären und mobilen Endgeräten brauchbar angezeigt werden soll. Komplexere Layouts solltest du unbedingt unter unterschiedlichen Bedingungen testen.

  • Schiebe mal das Browserfenster eng zusammen und prüfe es in einem schmalen Browserfenster.
  • Schalte im Browser auf „mobile Ansicht“ um und teste es ebenfalls im normalen und schmalen Browser.
  • Rufe die Seite auf einem Smartphone auf und prüfe die Ansicht des Artikels.

Siehe auch[Bearbeiten]

Projektseiten[Bearbeiten]