Wie auf der Portabilitätscheckliste vermerkt, wird empfohlen, auf Inline-Styling zu verzichten, um Besucher, die die Seite auf einem mobilen Endgerät betrachten, zu berücksichtigen. Im folgenden Text wird erklärt, weshalb Inline-Styles Portabilitätsprobleme verursachen können.
Was sind Inline-Styles?[]
Als Inline-Styling bezeichnet man CSS-Codes, die direkt auf die Artikelseite oder Vorlagen eingefügt werden. Diese findest du, wenn du auf einer Seite style="..." entdeckst.
Inline-Styles stehen im Gegensatz zu den Stylesheets, welche unabhängig der Inhalte existieren, wodurch die Darstellung des Inhalts vom eigentlichen Inhalt getrennt wird. Das Stylesheet einer FANDOM-Community kannst du unter MediaWiki:Wikia.css finden und bearbeiten. Du kannst die Portabilität deines Wikis enorm verbessern, wenn du dich vom Inline-Styling fernhältst und die gesamten Style-Befehle in einem Stylesheet sammelst.
Denke daran, den Überblick nicht zu verlieren. Sei dir im Klaren darüber, was dein Code bewirkt. Dein CSS in einem Stylesheet zu bünden, bedeutet nicht automatisch, dass deine Inhalte portabel sind!
Wozu dienen Styles?[]
Styles ändern das Design einer Seite. Sie beeinflussen die visuelle Darstellung deiner Informationen. Zum Beispiel können sie einem Bild eine bestimmte Größe verpassen, oder es in einer bestimmten Position anzeigen. Du kannst damit auch einen Rand um ein Element auf deiner Seite setzen oder die Farbe des Textes verändern.
Einige der Style-Befehle nehmen jedoch keine Rücksicht darauf, ob die Seite nun auf dem Desktop oder auf einem mobilen Gerät mit verschiedenen Bildschirmgrößen betrachtet wird. Durch Einschränkungen dieser Art kann es sein, dass deine Layouts und Styles nicht so wie gewünscht dargestellt werden, da ein Smartphone-Display deutlich kleiner und schmaler ist, als ein Laptop-Bildschirm.
Aus diesem Grund wird das Styling auf mobilen Geräte ignoriert und die Inhalte des Artikels werden vereinfacht und ohne benutzerdefinierte Designveränderungen dargestellt. Wenn das Gerät den Inhalt vom Styling-Code nicht unterscheiden kann, weil sie in der Seite gemischt wurden, kann es zu erheblichen Portabilitätsproblemen führen.
Hier ein extremes Beispiel:
Das erste Bild zeigt einen Artikel mit tollen, interaktiven Karten in der Desktopversion. Doch auf dem zweiten Bild sehen wir, dass diese Karten in der mobilen Version nicht wie gewünscht dargestellt werden.
Doch auch weniger komplexe Seiten können davon betroffen sein, zum Beispiel können Tabellen ohne ihre individuellen Styles doof aussehen. Es ist schwer, vorherzusagen, wie sehr die einzelnen Styles die Seite in der mobilen Ansicht beeinflussen. Auf dem einen Gerät kann der Artikel super aussehen, doch auf anderen wirkt die Seite irgendwie kaputt. Deshalb wird geraten, mit Styles vorsichtig zu sein und sie nicht im Artikel direkt zu verwenden.
Je komplexer der Code, umso mehr Problemquellen[]
CSS-Styling kann großartiges aus deinen Seiten machen und Inhalte wahnsinnig gut aussehen lassen. Communitys verwenden es, um ihre Artikel auf vielfältige Weise und äußerst kreativ darzustellen.
Da die meisten Codes (Styles eingeschlossen) auf dem Desktop erstellt werden, werden die Bedürfnisse von mobilen Nutzer oft ignoriert. Vor allem ältere Seiten, die erstellt wurden, bevor die mobile Nutzung sich großflächig durchsetzte, berücksichtigen die mobile Nutzung meist nicht.
Wenn du CSS benutzt, bedenke bitte folgendes:
- Denk über die Leistung nach. Styling kann die Leistung beeinflussen und dazu führen, dass die Seite langsamer lädt. Bei einem kleinen Telefon in deiner Hand wird es deutlich länger dauern, eine komplexe Seite zu laden, als auf deinem Vierkernprozessor-Monster unter deinem Schreibtisch.
- Beachte, dass einige Bildschirme kleiner als deiner sein können und mobile Besucher deine Seiten eher im Hochformat betrachten werden.
- Versuche, jedes Element (Infobox, Navbox, etc.) als Vorlage auf Seiten einzubinden und es über eine CSS-Klasse zu designen.
- Erfinde nicht gleich das Rad neu. Denke daran, dass einige Elemente, wie portable Infoboxen, bereits über spezielle CSS-Selektoren und Klassen verfügen. Andere Elemente, wie Navboxen, können auch auf diese Klassen zugreifen und damit ausgestattet werden, um die Infobox-Styles zu duplizieren und so ein gleichmäßiges Design zu gewährleisten.
- Die größte Sünde aus Sicht des Wiki-Servers ist es, Inline-Styles oder Tabellen für das Layout von kompletten Seiten zu missbrauchen. Das ist in etwa so, als würde man die gesamte Wohnung eines Blinden ohne dessen Wissen neu möblieren und es mit tödlichen Fallen und Tücken ersetzen. Anstatt dies aber zu tun, solltest du Block-Elemente erstellen (alias
<div>) und mit einer Klasse ausstatten.
tl;dr: Halte deinen Code so einfach wie möglich. Je simpler alles gestaltet ist, umso weniger anfälliger ist er, zu zerfallen.
Es geht nicht immer nur um das Äußere[]
Viele Benutzer denken nur darüber nach, wie die Seite aussehen wird, wenn sie Vorlagen und Inhalte designen, und denken nicht daran ihren Code elegant, lesbar und effizient zu gestalten. Sie lassen außer Acht, dass möglicherweise auch andere Admins oder neue Benutzer in Zukunft mit dem Code arbeiten und ihn verstehen müssen.
Die häufigsten Beispiele, in denen Code missbräuchlich verwendet wird, sind Infoboxen, die als Tabellen aufgebaut sind, oder Definitionslisten (mit Semikolon ; im Wikitext) die verwendeten werden um Zitaten und Dialogen darzustellen. Ein mobiles Gerät versucht zu interpretieren, was die Vorlage sein könnte und wird womöglich das Zitat nicht als Zitat erkennen oder die Tabelle nicht als Infobox, wodurch die Seite möglicherweise nicht wie gewollt dargestellt wird. Dies sind nur einige Beispiele, doch es gibt noch viele andere Wege, dass der eigentliche Inhalt durch das CSS nicht vollständig oder nur fehlerhaft geladen werden kann.
Eine Person, die nur darauf aus ist, durch den Inhalt einer Seite zu stöbern, merkt vielleicht nicht den Unterschied zwischen einer Infobox und einer Tabelle, denn diese sehen in der mobilen Version fast gleich aus. Auf eine Maschine, wie zum Beispiel eine Suchmaschine, kann sich dieser Mischmasch jedoch negativ auswirken. Ganze Inhalte können sogar dadurch ausgeblendet werden, wenn es zu kompliziert wird; die Suchmaschine gibt quasi mit der Indexierung einer Seite auf.
Aber ich kann ohne Inline-Styles nicht leben![]
Viele Benutzer erreichen erstaunliche Dinge mit den Standard-Codes und Werkzeugen, die mit FANDOM, Wikitext und CSS verfügbar sind. Es mag vielleicht für den Anfang ein wenig konfus und schwer aussehen, aber mit ein paar Versuchen, einigen Tricks und Zeit erreicht man das Ziel. Stößt du jedoch auf ein Problem, das zu viele Tricks benötigt und möglicherweise auch die Portabilität negativ beeinflusst, kann es sein, dass die gewünschte Funktion auf FANDOM fehlt. Berichte uns davon und teile dein Feedback mit uns!
Es gibt ein FANDOM-Team, das sich auf dieses Thema konzentriert und weitere Werkzeuge entwickeln möchte, um das Styling für den normalen Benutzer zu vereinfachen. Bist du an einem Punkt angekommen, an dem du nicht mehr weiterweißt, wie du etwas plattformunabhängig oder mobilfreundlich gestalten kannst? Lass uns wissen, welchen Wikitext, CSS oder JS du bereits zusammengestellt hast. Möglicherweise kämpfen auch andere Benutzer mit dem gleichen Problem. Jederzeit kannst du das Team hier unter Weiterentwicklung der Portabilität erreichen.
Benutze MediaWiki:Wikia.css[]
Um dein Wiki plattformunabhängig zu gestalten, kannst du das CSS im Stylesheet deiner Community festhalten, du findest es dort auf MediaWiki:Wikia.css. Ein Stylesheet dient dem gleichen Zweck wie die Inline-Styles, kann jedoch in der gesamten Community etwas bewirken und nicht nur auf einzelnen Seiten. Somit kann dein Styling-Code von mobilen Geräten nicht mit Anweisungen verwechselt werden, die sie nicht verarbeiten können.
Hast du immer noch Fragen?[]
Du kannst dich jederzeit mit anderen Benutzern im Hilfe-Forum in Verbindung setzen oder die Administratoren des Portabilitäts-Hubs oder die FANDOM-Mitarbeiter kontaktieren. Sie sind immer bemüht, deine Fragen direkt zu beantworten oder dir zu zeigen, an wen du dich wenden kannst.