Webkit Guidelines Allgemeine Don'ts
Auch wenn Vieles technisch möglich ist, sollten einige Dinge auf Seiten im Webkit unterlassen werden - die meisten aus Gründen der Zugänglichkeit und Barrierefreiheit, manche aus Gründen der Einheitlichkeit für die Außenkommunikation.
Inhalte
Paragraph Text
Stil Lead für Text, der nicht im ersten Absatz steht
Damit Seiten gut von Suchmaschinen gefunden werden (SEO), sollten der erste Absatz des Seitentexts als Lead formatiert sein. Dieser Absatz sollte einen kurzen Überblick über das Seitenthema enthalten, der durch den größeren Text hervorgehoben wird. Alle weiteren Texte auf der Seite sollten im normalen Textstil formatiert sein. Werden weitere Texte im Stil Lead formatiert, kann dies dazu führen, dass Suchmaschinen die Seite „abwerten“ und sie somit schlechter auffindbar ist.
Mehrere Absätze in Stil Lead
s.o.
Stil Lead gemeinsam mit fetter Schriftart
Für Suchmaschinen sowie Assistenzprogramme wie Screenreader kann die doppelte Formatierung uneindeutig sein. Dies kann dazu führen, dass Suchmaschinen die Seite "abwerten" und sie somit schlechter auffindbar ist, und dass die Seiteninhalte nicht barrierefrei zugänglich sind.
Verlinkte Wörter innerhalb des Textes
Um den barrierefreien Zugang zu Inhalten zu gewährleisten, sollten Links immer separat vom Text in dafür vorgesehenen Elementen wie Teasern, Buttons oder Links als Zusatzelemente zum Text eingefügt werden. Werden Teaser in Textbereiche per HTML-Coding eingefügt, so sind diese für Assistenzprogramme wie Screenreader nicht zuverlässig identifizierbar.
Buttons
Button inmitten von Text
Mit einem Button wird die wichtigste, mit vorangehenden Inhalten im Zusammenhang stehende Seite verlinkt. Wird er inmitten eines Textes verwendet, so lenkt er stark von den Textinhalten ab und unterbricht den Lesefluss.
Mehr als zwei Buttons nebeneinander
Ein Button ist dafür gedacht, dass er auf das im Zusammenhang mit dem vorangegangenen Inhalt stehende wichtigste Linkziel verlinkt. Gibt es mehrere Buttons, verliert die Seite an Übersichtlichkeit und der Button kommt in seiner Funktion nicht mehr zur Geltung.
Teaser
Lange Texte in Description & Sidebar Teasern
Die Beschreibungen in den genannten Teasern sollen den Inhalt der verlinkten Seite kurz zusammenfassen, um auf einen Blick erfassbar zu sein. Ist der Text im Teaser zu lang, kann es dazu führen, dass benachbarte Teaser zusätzlich in die Länge gezogen werden. Außerdem ist zu beachten, dass Besucher:innen der Seite lange Texte beim Durchsuchen der Seite tendenziell eher nicht lesen. Die Beschreibung im Teaser darf außerdem nicht relevant sein, um die verlinkte Seite selbst zu verstehen, da die Beschreibungen beispielsweise in der mobilen Ansicht der Seiten nicht angezeigt werden.
Description Teaser ohne Beschreibung
Werden Description Teaser ohne Beschreibung in eine Seite eingefügt, so erscheinen die Link-Pfeile an anderer Stelle als in den anderen Teasern auf der Seite. Dies kann zu Irritationen der Besucher:innen führen. Existiert für einen Teaser tatsächlich kein Text, so sollte dieser als Multiple Links Teaser mit nur einem Link eingefügt werden. Dieser verhält sich genau wie die anderen Teasern und hat den Link-Pfeil an derselben Stelle.
Sidebar-Teaser ohne Titel
Da Sidebar-Teaser in Paragraphen verwendet werden, die selbst keine Titel enthalten oder enthalten sollten, ist zur besseren Verständlichkeit der Teaserinhalte darauf zu achten, dass Titel im Sidebar-Teaser enthalten sind.
Lange Titel in Teasern
Ein einzelner Teaser verfügt nur über eine begrenzte Breite, damit mehrere Teaser nebeneinander auf einer Seite angezeigt werden können. Da die Titel der Teaser dennoch recht groß angezeigt werden, benötigen diese vor allem bei schmalen Browserbreiten oder der mobilen Ansicht viele Umbrüche, was bei langen Titeln zu einer schlechten Lesbarkeit führen kann.
Paragraph Teaser
Mehrere Visual Teaser nebeneinander
Der Visual Teaser hebt einen Link durch sein großflächiges Bild innerhalb anderer Teaser deutlich hervor. Diese Funktion geht verloren, sobald mehrere Visual Teaser nebeneinander stehen. Darum sollte dieser Teaser nur für wenige und ausgewählte Verlinkungen innerhalb einer Seite verwendet werden.
Darstellungsvariante Sidebar mit Titel und/oder Button im Paragraph Teaser selbst
Da jeder Sidebar-Teaser selbst über einen Titel und einen Button verfügt, sollte der Paragraph Teaser nicht zusätzlich Titel und Button enthalten, da die Zugehörigkeit der Elemente nicht eindeutig ist und damit zu Irritationen führen könnte.
Nutzung des Navigation Teaser auf Start-, Themen- oder Contentseiten
Der Navigation Teaser ist nur für Landingpages vorgesehen.
Nutzung des Sidebar Teasers auf Themen- oder Contentseite
Der Sidebar Teaser ist nur für Start- und Landingpages vorgesehen.
Nutzung des Link List Teasers
Der Link List Teaser ist veraltet und funktioniert nicht zuverlässig. Da er aber noch auf einigen sehr alten Seiten verwendet wird, wurde er noch nicht vollständig aus dem Webkit entfernt.
Bilder
Hero Homepage mit Bilder-Collage
Die auf der Webseite verwendeten Bilder sollen die Universität und ihre Einrichtungen möglichst authentisch darstellen. Daher sollte auf Bild-Collagen verzichtet werden. Diese haben zudem den Nachteil, dass sie in der mobilen Ansicht nicht mehr gut zu erkennen sind.
Ankündigungen
Mehrere Ankündigungen auf einer Seite
Ankündigungen sind für wichtige, aktuelle und seitenübergreifende Meldungen gedacht. Sie fallen durch ihre besondere Optik im Vergleich zum übrigen Seitendesign stark auf. Dieser Effekt verschwindet, wenn mehrere Ankündigungen nacheinander auf der Seite zu sehen sind.
Ankündigung als dauerhaftes Element auf einer Seite
Ankündigungen sind für wichtige, aktuelle und seitenübergreifende Meldungen gedacht. Sie fallen durch ihre besondere Optik im Vergleich zum übrigen Seitendesign stark auf. Dieser Effekt verschwindet, wenn eine Ankündigung als dauerhaftes Element auf einer Seite platziert wird, da sich die Besucher:innen an das Element gewöhnen.
Weiteres
Hauptnavigation mehr als 5 Menüeinträgen
Um schnell auf die wichtigsten Seiten eines Internet-Auftritts zugreifen zu können, sind in der Kopfzeile des Frontends Verlinkungen zu den Hauptbereichen des Webkits hinterlegt. In der Regel handelt es sich um 3 - 5 Elemente, die auf jeder Seite automatisch eingeblendet werden. Befinden sich so viele Elemente in dieser Hauptnavigation, dass diese in das Einrichtungslogo oben rechts laufen würden, so wird die komplette Hauptnavigation ausgeblendet. Das geschieht vor allem, wenn Seiten in schmalen Browsern oder mobil angesehen werden.
Lange Menütitel in der Hauptnavigation
Um schnell auf die wichtigsten Seiten eines Internet-Auftritts zugreifen zu können, sind in der Kopfzeile des Frontends Verlinkungen zu den Hauptbereichen des Webkits hinterlegt. Diese tragen in der Regel kurze Titel. Zu lange Titel in dieser Hauptnavigation führen dazu, dass diese in das Einrichtungslogo oben rechts laufen würden und damit schlecht lesbar sind. In diesem Fall wird die komplette Hauptnavigation ausgeblendet. Das geschieht vor allem, wenn Seiten in schmalen Browsern oder mobil angesehen werden.
Paragraph News - Übersicht auf einer Seite mit weiteren Paragraphen
Da der News-Paragraph alle News einer Einrichtung umfasst, und damit über die Zeit sehr lang werden kann, sollten keine weiteren Elemente auf der Seite verwendet werden.
Paragraph Kalender auf einer Seite mit weiteren Paragraphen
Da der Kalender-Paragraph alle zukünftigen Veranstaltungen einer Einrichtung umfasst, und damit über die Zeit sehr lang werden kann, sollten keine weiteren Elemente auf der Seite verwendet werden. Um nur ausgewählte Veranstaltungen anzuzeigen sollte der Paragraph Veranstaltungen verwendet werden.