Hallo zusammen!

Wie bei der Einführung von FandomDesktop im März versprochen, setzen wir unseren „Mehr ist mehr“-Ansatz fort, um euch die Änderungen vorzustellen, die Desktop-Nutzerinnen und Nutzer auf Fandom und Gamepedia erwarten können. Mehr Transparenz, durchdachte Designs und mehr Informationen darüber, was sich verändert. Heute wollen wir einen Blick darauf werfen, wie der neue Theme-Designer von FandomDesktop funktioniert.

Neuer Look, neue Funktionen

Während wir andere Funktionen eher versuchen zu verbessern, wurde der Theme-Designer von Grund auf neu gebaut. Wir haben in der Vergangenheit viel Feedback zur Funktionalität erhalten und sahen beim Theme-Designer Chancen für Verbesserungen. Damit gibt es in FandomDesktop eine neue Grundlage zum Erschaffen einer individuellen Community-Identität.

To the left, to the left

Seit der Einführung des ersten Theme-Designers geht der Trend bei Desktopgeräten immer weiter in Richtung großer, breiter und hochauflösender Bildschirme. Aus diesem Grund haben wir den Theme-Designer nun an der linken Seite ausgerichtet. Das ermöglicht die Vorschau von mehr Seiteninhalt.

Theme Designer Light.png

Echte Live-Vorschau

Apropos Vorschau: diese funktioniert im neuen Theme-Designer mit beliebigen Seiten im Wiki. Beim Experimentieren siehst du also keine Platzhalter-Inhalte mehr, sondern echte Artikel aus der Community.

Theme Designer - Page URL.png

Um die Vorschau einer ganz bestimmten Seite im Theme-Designer zu sehen, kannst du einfach die über der Vorschau angezeigte URL-Zeile anpassen.

Achja … Auch Favicon-Änderungen sind nun bereits in der Vorschau sichtbar!

Tag und Nacht

Wie du hoffentlich in vorigen Blogs und auf Vorschaubildern schon gesehen hast, wird mit FandomDesktop eine Unterstützung von hellen und dunklen Designs eingeführt. Beide Varianten können im neuen Theme-Designer unabhängig gestaltet werden.

Beim Arbeiten im Theme-Designer kannst du einfach zwischen dem hellen und dunklen Modus hin- und herwechseln, um diese zu vergleichen und zu optimieren. Dabei muss die Vorschau nicht neu geladen werden. Außerdem kannst du ganz simpel auswählen, welcher Modus der Standard für die Community sein soll.

Ein paar Hinweise dazu, wie der helle und dunkle Modus aus Benutzersicht funktioniert:

  • Wenn die Option zur Nutzung von FandomDesktop für die ersten Wikis freigeschaltet wird („opt-in-Launch“), werden ausschließlich angemeldete Benutzerinnen und Benutzer die Möglichkeit haben, zwischen hellem und dunklem Design zu wechseln. Dafür wird es eine Option in den Einstellungen geben.
    • Wurde keine Präferenz gewählt, wird die vom Admin gewählte Option genutzt.
  • Der Wechselschalter, der in den bisherigen Designs zu sehen war, wird voraussichtlich hinzugefügt, bevor die ersten Wikis komplett zu FandomDesktop wechseln.
  • Dieser wird sowohl für angemeldete als auch unangemeldete Benutzerinnen und Benutzer sichtbar sein.
    • Ist man angemeldet, beeinflusst der Schalter deine Einstellungen und gilt somit global.
    • Ist man nicht angemeldet, wird die Auswahl für die aktuelle Sitzung gespeichert. Startet man eine eine neue Sitzung, wird wieder die Auswahl der Admins genutzt.

Für die Entwicklung der Einstellung und des Wechselschalters sowie der Logik dahinter brauchen wir etwas mehr Zeit. Aus Transparenzgründen wollten wir euch bereits über diese Abweichung vom Gezeigten informieren.

Schriftarten

Theme Designer - Font.png

Eine weitere Funktion des neuen Theme-Designers ist die Möglichkeit, andere Schriftarten für Überschriften zu wählen. Wir starten mit sechs Schriftarten, die von unseren Teams in Hinsicht auf Nutz- und Lesbarkeit auf Herz und Nieren getestet wurden. Es handelt sich (wie auf dem Bild zu sehen) um die Schriftarten Rubik, Work Sans, Lora, Roboto Slab, BioRhyme und Inknut Antiqua. Weitere Schriftarten können weiterhin mithilfe von CSS importiert werden, solange diese die Barrierefreiheit nicht einschränken.

Signifikante Verbesserungen

Zusätzlich zur Funktionalität und zum Aussehen des Theme-Designers haben wir auch die Chance genutzt, um einige Verbesserung auf Grundlage von eurem Feedback und Erfahrungen aus den UCP-Migrationen vorzunehmen.

Bessere Speicherlösung

Der alte Theme-Designer speichert bestimmte Dateien, wie zum Beispiel den Wiki-Hintergrund, außerhalb von MediaWiki. Das führte zu Problemen während den UCP-Migrationen, denn manchmal wurden die Dateien nicht korrekt migriert und waren danach schwer wiederherstellbar.

In Zukunft werden alle Dateien des Theme-Designers MediaWikis Dateisystem nutzen. Die Bilder und Versionen können dann mit den Standardwerkzeugen von MediaWiki verwaltet werden. Diese Änderung verhindert zukünftige Probleme, falls wir Änderungen an unseren Dateimanagementsystemen machen müssen, denn die Design-Bilder werden dann als Teil des Wikis behandelt.

Mehr Farben und bessere Auswahlmöglichkeit

Im alten Theme-Designer gab es zwei Möglichkeiten zur Wahl von Farben: vorgegebene Farbfelder oder Hex-Farbcodes. Das ist gut für designbegeisterte Admins, die alle Hex-Codes auswendig kennen oder einfach vorgeschlagene Farben wählen. Für alle anderen ist diese eingeschränkte Auswahl aber eher hinderlich.

Farbauswahl in Oasis

Im neuen Theme-Designer sieht man zuerst ein Auswahlfeld mit einer MENGE Optionen im gesamten sichtbaren Spektrum des Lichts… oder man fügt weiterhin einfach einen Hex-Code ein.

Better Color Picker.png

Wir denken mit dem Hintergedanken, das Erstellen barrierefreier Designs noch einfacher zu machen, bereits über die Zukunft dieses Werkzeug nach. Mehr darüber werden wir vom CATS-Team nach der Veröffentlichung von FandomDesktop hören.

Theme Designer - Color.png

Größer ist besser

Wie bereits weiter oben erwähnt, geht der Trend zu großen, hochauflösenden Bildschirmen. Wir bewegen uns schon jetzt in Richtung 8K für den täglichen Gebrauch. Parallel zu den Technologievorlieben müssen auch wir uns weiterentwickeln.

Dank dieses Trends und den Anforderungen unserer Communitys wird die maximale Dateigröße für Hintergrundbilder von 300 kB auf 1 MB angehoben.

Logos

Einer der größeren Unterschiede zwischen dem Design von Fandom- und Gamepedia-Wikis ist der Ausdruck der Wiki-Identität mit einem Logo. Gamepedia-Wikis nutzen einen quadratischen Avatar, während Fandom-Wikis ein rechteckiges „Wordmark“ nutzen.

Theme Designer - Logo.png

In FandomDesktop werden wir beide Stile unter dem einfachen Namen „Logo“ unterstützen. Die maximale Größe dafür wird 500 x 500 Pixel betragen, wodurch beide bisherigen Formate weiterhin passen werden. Auf Desktopgeräten werden Logos im Avatar-Stil in einer Größe von 100 x 100 Pixeln (bzw. 80 x 80 auf Tablets) angezeigt, während Logos im Wordmark-Stil weiterhin mit 250 x 65 Pixeln angezeigt werden.

Wir ermutigen Wikis dazu, über quadratische Logos nachzudenken. Damit kann man die Wiki-Identität einfacher an verschiedenen Orten zeigen als mit rechteckigen Logo-Varianten. Beim Scrollen kann zum Beispiel eine quadratisches Logo in der schmalen Navigation weiterhin sichtbar bleiben, während ein rechteckiges Logo zu viel Platz einnehmen würde. Die Anzeige des Logos in der schmalen („sticky“) Navigation ist optional.

Theme-Designer-Avatar-Scroll.png

Umstieg

Ihr lests das vielleicht und wundert euch: „Wie wird das alles ablaufen, wenn die Wikis auf FandomDesktop umsteigen?“ Das CATS-Team hat sich auch darüber einige Gedanken gemacht. Ihre Lösung ist ziemlich gut und unterscheidet sich in Fandom- und Gamepedia-Wikis.

Fandom-Wikis haben die Wahl

Wenn du als Admin mit FandomDesktop den Theme-Designer aufrufst, wirst du vor die Wahl gestellt: Die bisherigen Farben aus dem alten Theme-Designer importieren oder einen Neuanfang wagen.

Theme Designer Choice.png

Hinweis: Entscheidest du dich für einen Neuanfang, geht das alte Design dadurch nicht verloren. Während der opt-in-Phase wirst du weiterhin jederzeit die Möglichkeit haben, das alte Design zu importieren. Für Wikis ohne aktive Admins werden die alten Designs aus Oasis automatisch übertragen werden, sobald die Wikis vollständig auf FandomDesktop umsteigen.

Während des Imports versucht der Theme-Designer zu ermitteln, ob das Oasis-Design eher hell und dunkel ist und importiert es entsprechend. Gleichzeitig wird eine passende helle/dunkle Gegenvariante entwickelt. Importiert die Jedipedia zum Beispiel ihr Design, wird dieses als hell erkannt und es wird ein Standard für das dunkle Design zugewiesen. Ich für meinen Teil bin schon sehr gespannt, die verschiedenen Designs zur hellen und dunklen Seite der Macht in den Star-Wars-Wikis zu sehen.

Gamepedia

Gamepedia-Wikis hatten keinen Theme-Designer und das Layout wurde durch Wiki-Repräsentanten und Admins während der Wiki-Erstellung mit CSS erstellt. Wird FandomDesktop in einem ehemaligen Gamepedia-Wiki eingeführt, wird das helle oder dunkle Design aus dem Favicon, dem Logo und einigen Standardfarben bestehen. Ob ein helles oder dunkles Design genutzt wird, wird dadurch entschieden, ob zuvor Hydra oder HydraDark genutzt wurde. Da die Wikis nahezu ohne eigenes Design starten, werden unsere Community-Teams in Gamepedia-Wikis besonderes unterstützen.

Zum Thema der Anpassungen werden noch weitere Informationen folgen – besonders für die CSS-Meister unter euch, denn Dateien, Werte, Selektoren und Variablen werden sich mit FandomDesktop ändern. Haltet eure Augen also offen, bevor der opt-in-Launch startet, für den wir bald ein Datum ankündigen können!

Wie immer freuen wir uns über Fragen und Feedback!


SpacePucky avatar.png

Pucky FANDOM-HELFER

SpacePucky ist Mitglied des International Volunteering Teams und übersetzt unter anderem Blog-Beiträge für die deutschsprachige Community. Außerdem kümmert er sich um die Aktualisierung der Hilfeseiten. Zu seinen sonstigen Projekten gehören aktuell das YouTube Wiki und das Deponia Wiki.

Willst du weitere Updates von Fandom erhalten? Klicke hier, um diesen Blog zu verfolgen.

Nutzung von Community-Inhalten gemäß CC-BY-SA, sofern nicht anders angegeben.