Wikipedia:Hauptseite/!DOKU

Hier werden technische und organisatorische Hintergründe zur inhaltlichen und softwareseitigen Gestaltung der Hauptseite zusammengestellt.

Inhalte

Beiträge finden sich auf:

Wikipedia aktuell (optional, nur bei Bedarf, wenig Inhalt)
Artikel des Tages (früher: Vorlage:AdT-Vorschlag)
Jahrestage/Monat/Tagnummer
Aktuelles (früher: Vorlage:Hauptseite Aktuelles)
Verstorbene (früher: Vorlage:Hauptseite Verstorbene)
Schon gewusst – Wochentags-Unterseiten

Organisation

Allgemeines auf Bearbeitungshinweis.

Vorschau

Das zukünftige Erscheinungsbild lässt sich kontrollieren:

Kaskadierende Sperre

Alle erwähnten Artikel im ANR werden durch kaskadierende Sperre gegen Bearbeitung geschützt; sind also nur für Administratoren zugänglich.
Dies wird ausgelöst durch die Dummy-Einbindungen in die Seite Heute.
Alle sonstigen in die Hauptseite eingebundenen Ressourcen müssen mindestens per Dreiviertelschutz (move=sysop) gegen Sabotage geschützt sein.

Gestaltung

Die wesentlichen Unterseiten, die zum vordergründigen Erscheinungsbild beitragen, sind:

Responsives Design

Abhängig von Gerät und Schriftgröße bei den Lesern wird die Hauptseite unterschiedlich dargestellt. Die bisherige Konzeption kannte nur zwei Darstellungen:

Desktop – immer zweispaltig, die gesamte Breite des Bildschirmfensters ausfüllend.
Mobile Website – immer einspaltig.

Die neue Konzeption geht von der Menge der Buchstaben aus, die in einer Textzeile sichtbar sind.

Die maximale Anzahl der Buchstaben pro Zeile, die Menschen je nach Lese- bzw. Sprachkompetenz verstehen können, liegt um 100 – Gebildete auch 150, bei kognitiven oder sonstigen Einschränkungen auch nur 80 oder 60.
Wer schlechte Augen hat, hat vielleicht viele Pixel, aber zoomt oder stellt die Browser-Basisschriftgröße recht groß ein und hat auf dem Desktop vielleicht auch nur wenige Buchstaben in einer Zeile. Die traditionelle zweispaltige Version teilte jedoch auf dem Desktop immer in zwei Spalten ein, von denen nun jede nur noch wenige Wörter nebeneinander enthält.

Es werden jetzt die in den nachstehenden Abschnitten umrissenen Fälle unterschieden.

Zweispaltig

Klassische Ansicht, wie bisher auf dem Desktop.

Jedoch etwa auch auf einem Tablet, auch in der Mobildarstellung.
Erfordert eine gewisse Mindest-Zeilenlänge in jeder Spalte.

Einspaltig (Platzmangel)

Gleiches Design wie in der zweispaltigen Darstellung.
- POLS.
- Wenn von Desktop → mobil → Desktop → mobil gewechselt wird, dann soll man sich nicht auf einem anderen Planeten wiederfinden.
- Es ändert sich nur die Anordnung in einer Spalte; alle anderen Merkmale bleiben weitgehend erhalten.
Es wird ein kleines Inhaltsverzeichnis im Seitenkopf eingeblendet, falls es nicht mehr als zwei Zeilen erfordert.
Icons werden nicht dargestellt.
Redundante inhaltliche Blöcke im oberen Bereich werden weggelassen.
- Das betrifft die vielen Themenportale, die genauso über die Artikel-Kategorien erreichbar wären. Es navigiert aber niemand über Geo → Kontinente → Staaten → Städte → Zürich, sondern gibt das ins Suchfeld ein.
- „Archiv der Hauptseite“, „Statistik“ und „Sprachversionen“ dürften für mobile Informationssucher nachrangig sein und entfallen zwecks besserer Fokussierung auf die wichtigen Verlinkungen.
- „Mitmachen“ ist sehr wichtig, „Kontakt“ und „Presse“ sicher auch.
Die Umrahmungen um Textblöcke zwecks Abgrenzung zur Nachbarspalte sind mangels Nachbarspalte überflüssig und kosten nur Platz; entfallen deshalb.
Zum Seitenbeginn kann aus den Titelleisten heraus gesprungen werden.

Extremer Platzmangel

Gleiches Design wie in der einspaltigen Darstellung.

Das kleine Inhaltsverzeichnis im Seitenkopf benötigt jetzt drei oder mehr Zeilen, vielleicht die halbe Höhe des Bildschirms, und wird deshalb nicht mehr angezeigt.

Beträfe extrem kleine Mobilgeräte, oder aber Mobilgerät und Leser kann nicht gut gucken, oder jemand will WP-Artikel auf seiner Armbanduhr lesen (kommt auch noch irgendwann).

HD-Großbildfernseher

Moderne HD-Geräte haben abenteuerliche Pixelbreiten von 4000 und mehr; es kann auch vom Sofa aus der Flachbildfernseher mit 100″ Bildschirmdiagonale genutzt werden.

Das Szenario geht dahin, dass ein Browser-Fenster zwar auf 4000 Pixel Breite ausgedehnt würde, der Browser jedoch nicht als Vollbild den gesamten Bildschirm einnehmen solle.
Es kann ja auch die obere Hälfte oder die oberen 2/3 eines Bildschirms und für Kinofilme in 16:9 eingestellt sein, und darunter würde es noch ein drittel oder die halbe Bildschirmhöhe für weitere Apps und Icons geben.
Dort sähen zwei Spalten in lesbarer Schriftgröße und Zeilenlänge mit 3/4 ungenutztem Platz links und rechts jedoch auch doof aus.
Die überkommene Anordnung stellt hier genau zwei Spalten dar, jede Textzeile so lang wie in die Spalte hineinpasst, also mit hunderten von Buchstaben.

Bei auffallend breiten Darstellungsbereichen wird von zwei- auf mehrspaltig gewechselt.

Zunächst bekommt der „Artikel des Tages“ eine eigene Spalte.
- Falls temporär „Wikipedia aktuell“ geschaltet ist, wird dies noch darüber angeordnet.
Für „Was geschah am“ wird der Rest der bisherigen linken Spalte genutzt.
Die bisherige rechte Spalte bleibt erhalten.
- Hier stehen nur Aufzählungen. Diese Spalte wird breiter dargestellt als die ersten beiden, die jeweils meist nur eine Box enthalten, weil hier weiterhin drei Boxen untergebracht werden müssen. Zu hoffen ist, dass die Aufzählungspunkte jeweils in eine bis zwei Zeilen passen, wodurch diese breiten Boxen jetzt vertikal weniger Platz benötigen und die drei Boxen übereinander nicht allzuviel höher ausfallen als die beiden Boxen der ersten Spalte.

Ist noch mehr Platz vorhanden, was auf einem klassischen Büroschreibtisch kaum noch zu erwarten wäre, dann wird das Design vierspaltig.

Die oberste Box der rechten Spalte „In den Nachrichten“ erhält nun eine eigene Spalte, es verbleiben zwei.
Hier ist oft etwas mehr Inhalt vorhanden, die Höhe passt zu den Nachbarn.
Alle vier Spalten haben jetzt gleiche Breite; es sähe sonst zu unruhig aus.

Wenn tatsächlich auf Kinoleinwand dargestellt wird, ergibt sich eine fünfte Spalte.

Jede große Box hat jetzt eine eigene Spalte.
Alle fünf Spalten haben gleiche Breite.

Barrierefreiheit

Keine Layout-Tabellen mehr (die traditionelle zweispaltige Version war eine Tabelle).
- Wenn ein Screenreader in der Seite eine Tabelle antrifft, wird der Benutzer gefragt, ob diese Tabelle geöffnet oder übersprungen werden soll.
- Wird die Tabelle geöffnet, wird der Benutzer gefragt, zu welchen Zellen gesprungen werden soll oder ob mit der ersten Zelle begonnen werden soll.
Keine Icons, keine Bilder, nur noch Nettotext, weil es auf der Hauptseite keine enzyklopädisch wichtigen Illustrationen gibt.
- Icons und eye-catcher, die keine andere und zusätzliche Information transportieren als gleichzeitig im nebenstehenden Text auch, erschweren nur das Verständnis. Sie sollen deshalb für Screenreader als nicht-existent markiert werden. Sehende bekommen dadurch eine optische Orientierung, und Icons haben für sie Wiedererkennungswert und machen das Durchlesen des zugehörigen Textes ggf. überflüssig.
Navigation durch Auflistung von Elementen (Links, Schwesterprojekte, „weitere Infos“) erfolgen über eine Aufzählung. Diese kann im Ganzen übersprungen werden, und die Zusammengehörigkeit der einzelnen Elemente ist für den Screenreader erkennbar und kann elementweise navigiert werden.
- Bisher war das ein unstrukturierter Fließtext gewesen, in dem hintereinander teilweise Icons mit Verlinkungen, dann Texte und auch Verlinkungen und hin und wieder unverständliche Zeichen vorgelesen wurden.
Die Überschriften der Boxen haben (wie bisher auch) die Qualität H2. Daraus generieren Screenreader automatisch beim Besuch der Seite ein Inhaltsverzeichnis und bieten es als besonderes Navigationselement zum Einstieg an.
role=contentinfo bzw. navigation wo zutreffend.

Multilingual

Überschriften, der Einleitungsabschnitt und ggf. konstante Linktexte können mehrsprachig in der Sprache der Leser (GUI-Sprache) angeboten werden.
Die Sprachen der Nachbarregionen oder auch innerhalb DACH, wo anzunehmen ist, dass Aufrufende Deutsch verstehen, werden zentral auf de abgebildet.
Als Rückfallposition für alle anderen Sprachen wäre zumindest Englisch ganz nett.
Dass jemand die täglichen Teaser oder die Nachrichten auch in anderen Sprachen anbietet, wird nicht erwartet, wäre jedoch realisierbar.
Es gibt einen standardisierten Parameter {{{SPRACHE}}} und für Sonderfälle ist auch noch Zugriff auf die noch nicht normalisierte Form {{int:lang}} möglich.

Früheres CSS

Die Gestaltung vor dem Wechsel Sommer 2020 ist über Archiv/styles.css (Doku auf Archiv/styles) aktivierbar.

Projekt-Ressourcen

Die nachstehenden Ressourcen enthalten für das Funktionieren erforderliche Spezifikationen:

Gadget:desktopHauptseite: Seitenüberschrift, Kategorien, Sidebar-Links ausblenden; korrespondierende Sprachversionen verlinken
Gadget:mobileHauptseite: Begrenzung des Inhaltsbereichs ausblenden (volle Bildschirm[fenster]breite erforderlich)
MediaWiki:Minerva.css: Begrenzung des Inhaltsbereichs ausblenden (volle Bildschirm[fenster]breite erforderlich)
MediaWiki:Timeless.css: Begrenzung des Inhaltsbereichs ausblenden (volle Bildschirm[fenster]breite erforderlich)
MediaWiki:Wikimedia-mobile-mainpage-title-loggedin: Minerva-Begrüßungszeile auf der Hauptseite.; Mobile Begrüßung unterdrücken.; MediaWiki:Wikimedia-mobile-mainpage-title-loggedin/en; MediaWiki:Wikimedia-mobile-mainpage-title-loggedin/es; MediaWiki:Wikimedia-mobile-mainpage-title-loggedin/fr; MediaWiki:Wikimedia-mobile-mainpage-title-loggedin/it; Entfällt vielleicht irgendwann global.
MediaWiki:Mainpage: Definiert den Seitennamen der Hauptseite.
MediaWiki:Mainpage-title: Beeinflusst die Anzeige des Hauptseitentitels.

Elementstruktur

TOC (einspaltig) #hauptseite-toc
Einleitung #oben
- #willkommen
  - Einleitungssätze
  - Themenportale .hauptseite-portale
  - Innere Angelegenheiten #intern
Inhaltsbereich #spalten
- #links
  - #links-oben
    - #wikipedia = Wikipedia aktuell (optional, nur bei Bedarf, wenig Inhalt)
    - #artikel = Artikel des Tages
  - #links-unten
    - #ereignisse = Was geschah am
- #rechts
  - #rechts-oben
    - #nachrichten = In den Nachrichten
  - #rechts-unten
    - #rechts-unten-1
      - #verstorbene = Kürzlich Verstorbene
    - #rechts-unten-2
      - #wissenswertes = Schon gewusst?
Footer #unten
- #schwesterprojekte = Schwesterprojekte

Benutzer-CSS

Mit nachstehendem persönlichem CSS können Benutzer sich die Darstellung individuell umgestalten; Beispiele:

/* Deprimiert mich, will ich nicht wissen */
.page-Wikipedia_Hauptseite #verstorbene {
   display: none;
}
/* AdT kommt groß raus */
.page-Wikipedia_Hauptseite #artikel {
   font-size: 110%;
}

Ein Beispiel, wie die Kästen unterschiedlich eingefärbt werden können, kann man in Benutzer:Speravir/CSS: Hauptseite farbiger gestalten finden.