STYLEGUIDE FÜR DEN INTERNETAUFTRITT DER UNIVERSITÄT DES SAARLANDES www.uni saarland.de WARUM DIESE RICHTLINIEN? Dieser Styleguide bietet Hilfestellung bei der Verbesserung des Webauftritts der Universität des Saarlandes. Nutzer des Webangebots sollen sich zielgerichtet auf den Internetseiten bewegen können und gesuchte Informationen rasch auffinden. Auch das längere Verweilen und das Surfen auf den Seiten soll Spaß machen schließlich gibt es an der Saar Uni viel zu entdecken. Und auch sehbehinderte Menschen müssen vom Webangebot der Universität profitieren können. Einen qualitativ hochwertigen, die Orientierung des Nutzers erleichternden Internetauftritt erkennt man an folgenden Kriterien: der Webauftritt wirkt seriös und professionell die Nutzerfreundlichkeit steht im Mittelpunkt Informationen sind rasch zu finden und leicht zugänglich die Seiten haben einen hohen Wiedererkennungswert die Navigation ist logisch aufgebaut, das Menü gut bedienbar die Inhalte sind übersichtlich strukturiert die Internetseite ist gut bei Google zu finden Gründe, von den Richtlinien dieses Styleguides abzuweichen, kann es geben. Doch sollten Sie dabei stets die Interessen der Nutzer Ihres Webangebots im Blick behalten. DAS LAYOUT Für den Internetauftritt der Universität des Saarlandes gibt es drei verschiedene Layoutvorlagen: das Universitätslayout (L1), das sog. Institutslayout (L2) und das Layout des Masterportals. Universitätslayout (L1) Layout des Masterportals 1
Institutslayout (L2) Seitenaufbau L2 Die meisten Redakteure der Universität des Saarlandes betreuen Seiten, die im Institutslayout angelegt sind. Daher beziehen sich die folgenden Ausführungen auf dieses Layout. DER SEITENAUFBAU Eine Internetseite besteht aus veränderlichen und unveränderlichen Bestandteilen. Zu den unveränderlichen Bestandteilen des L2 gehört das Logo der Universität in der oberen linken Ecke, die Navigationsleiste (Menü) und der Seitenfuß (Footer). Veränderliche Bestandteile sind das Kopfmotiv mit oder ohne eigenem Logo sowie verschiedene Inhaltselemente. DAS UNI LOGO zeigt dem Nutzer, dass diese Seite zum Internetauftritt der Universität des Saarlandes gehört. Sie erlaubt es, bei Bedarf mit einem Klick auf die Homepage der Uni zu gelangen. DAS MENÜ enthält die Navigation der Webseite. Es wird automatisch aus den Seitentiteln erstellt. ÜBER DEN FOOTER ist jede Seite automatisch mit der Suchfunktion, den Quick Links und dem Impressum der Universität verbunden. Diese Informationen müssen also nicht extra bereitgestellt werden. Außerdem finden sich im Seitenfuß die Druckansicht (Seite drucken), die Sprachauswahl und die Einstellung der Schriftgröße. Ganz unten wird automatisch das letzte Änderungsdatum angezeigt. Bei Bedarf kann dem Footer ein weiterer Punkt hinzufügt werden, z.b. ein Punkt "Kontakt" mit den Kontaktdaten Ihrer Einrichtung und Ihres Webmasters. IM SEITENKOPF finden sich neben der Uni Eule ein Kopfmotiv, bestehend aus Kopfbild und Seitenüberschrift, und gegebenenfalls das eigene Logo. Alle Bestandteile des Seitenkopfes werden auf die Unterseiten vererbt. Somit trägt der Seitenkopf zur besseren Orientierung der Nutzer bei. DAS KOPFBILD dient der Orientierung und Wiedererkennung der Seite. Es soll weniger Informationen transportieren als vielmehr Stimmungen spiegeln oder erzeugen. Die Maße betragen 433 x 79 Pixel, breitere Bilder werden automatisch skaliert. Bei der Auswahl des Kopfbildes sollten Sie darauf achten, dass das Bildmotiv den Zuschnitt auf ein schmales Querformat erlaubt, das Bild in das Corporate Design der Uni passt, es also möglichst schlicht gehalten ist, nicht zu viele Details enthält und nicht zu bunt ist, Sie die Bildrechte besitzen und das Bild im Internet verwenden dürfen. 2
Das Webteam stellt einen Fundus fertig zugeschnittener Kopfbilder zur Verfügung, die diese Kriterien erfüllen und aus dem Sie sich ein Bild aussuchen können. Sie finden die Auswahl unter: www.uni saarland.de/webteam/kopfbilder DIE SEITENÜBERSCHRIFT ist ein Inhaltselement vom Typ HTML. Sie wird vom Webteam beim Anlegen der Seite eingestellt und kann von den Redakteuren nicht geändert werden. Durch Klick auf die Seitenüberschrift gelangt man von jeder Unterseite aus zurück auf die Startseite. Die Seitenüberschrift kann durch eine Unterüberschrift ergänzt werden. DAS EIGENE LOGO, sofern vorhanden, kann oben rechts in den Seitenkopf integriert werden. Das Logo wird automatisch auf 79 Pixel Höhe skaliert. Durch Klick auf das Logo gelangt man von den Unterseiten aus zurück zur Startseite. DER INHALTSBEREICH der Webseite kann einspaltig oder zweispaltig angelegt sein. Die breite, für den zentralen Inhalt vorgesehene Spalte in der Mitte kann also entweder über die ganze Bildschirmbreite laufen oder durch eine zusätzliche schmale Spalte auf der rechten Seite ergänzt werden. Die zweispaltige Ansicht ist als Standard voreingestellt. Bei zweispaltiger Einstellung beträgt die Breite des zentralen Inhalts 430 Pixel, bei einspaltiger Einstellung 600 Pixel. IN DER RECHTEN SPALTE können Zusatzinformationen untergebracht werden. Bei Bedarf können Inhaltselemente der rechten Spalte auf die Unterseiten "vererbt" werden, d.h. der Inhalt wird dann auf allen Unter und Unter Unterseiten angezeigt. Die Breite der rechten Spalte beträgt 200 Pixel. DIE NAVIGATION Eine logische und übersichtliche Struktur mit verständlichen Menüpunkten ist das A und O für eine nutzerfreundliche und barrierefreie Internetseite. Je vorhersehbarer ein Internetangebot aussieht und funktioniert, desto einfacher ist es für die Nutzer, durch die Seiten zu navigieren und die gesuchten Informationen zu finden. Daher ist es sinnvoll, bekannte und bewährte Strukturen zu verwenden. Für eine Fachrichtungs oder Lehrstuhlseite bietet sich beispielsweise das Raster "Startseite, Aktuelles, Institut, Studium, Forschung, " an. Auf keinen Fall sollte die Internetseite Verwaltungsstrukturen abbilden. Achten Sie darauf, die Anzahl der Menüpunkte so gering wie möglich zu halten. Ideal sind nicht mehr als sieben Punkte. Beispiele für gute Seitenstrukturen: 3
DER SEITENINHALT DIE ÜBERSCHRIFT zeigt an, worum es auf einer Seite geht. Da in unserem TYPO3 System der Seitentitel nicht automatisch als Überschrift angezeigt wird, sollte die Hauptüberschrift den Inhalt der Seite beschreiben. Wählen Sie als Überschrift also nicht "Herzlich Willkommen auf unserer Homepage", sondern sagen Sie den Nutzern, welche Inhalte sie erwarten. Seien Sie dabei knapp und präzise, benutzen Sie keine Fremdwörter oder Abkürzungen. Dasselbe gilt für UNTERÜBERSCHRIFTEN, die den Inhalt des folgenden Abschnitts wiedergeben, damit die Nutzer auch beim Überfliegen der Seite die gesuchten Informationen finden. Die Überschrift des ersten Inhaltselements einer jeden Seite wird automatisch formatiert. Alle weiteren Überschriften können Sie selbst formatieren. Bitte beachten Sie, dass am Ende einer Überschrift kein Punkt oder Doppelpunkt steht. DER TEXT auf Ihren Seiten sollte logisch gegliedert sein: Das Wichtigste steht ganz oben, Unwichtigeres weiter unten. Vermeiden Sie ABKÜRZUNGEN. Auch die für Uni Mitarbeiter geläufige Abkürzung "UdS" wird außerhalb des Campus' nicht verstanden und von Google schlecht gefunden. Benutzen Sie sie daher nur auf Seiten, die sich an eine uni interne Zielgruppe richten. Auf allen anderen Seiten können Sie die Abkürzung "Saar Uni" verwenden. LISTEN ODER AUFZÄHLUNGEN auf Ihren Seiten sollten nicht mehr als sieben Punkte enthalten. Wenn es mehr werden, sollten Sie die Liste inhaltlich sinnvoll unterteilen. Unbedingt sollten Sie die folgen Hinweise zur TEXTFORMATIERUNG beachten: Setzen Sie Fließtext linksbündig, nicht als Blocksatz. Vermeiden Sie Fett und Kursivsetzungen. Wenn überhaupt, benutzen Sie sie nur zur Hervorhebung einzelner Wörter. Unterstreichungen sind in unserem TYPO3 System nicht vorgesehen und sind auch nicht sinnvoll. TIPP: Geben Sie alle Texte, die Sie auf die Internetseite stellen möchten, zunächst in den Editor ein. Sie vermeiden dadurch, dass Formatierungen z.b. aus Word in TYPO3 übernommen werden. TELEFONNUMMERN sollten nach DIN 5008 dargestellt werden: Internationale Nummern: +49 681 302 2708 Nationale Nummern: 0681 302 2708 Beispiele für gut strukturierte Seiteninhalte: 4
Bilder erfüllen unterschiedliche Aufgaben: VERWENDUNG VON BILDERN Bilder transportieren Inhalte oder tragen zur Verdeutlichung von Inhalten bei. Bilder werden als Schmuckelement eingesetzt. Bilder erzeugen Stimmungen. Bilder erhöhen den Wiedererkennungswert von Seiten und dienen so der Orientierung der Nutzer. Diese letzte Aufgabe wird von den Kopfbildern übernommen. Darüber hinaus benötigen die Seiten der Universität des Saarlandes eigentlich keine Schmuckelemente. Ein Bild sollte daher immer einen Mehrwert darstellen, d.h. es sollte nur dort verwendet werden, wo der Seiteninhalt ohne Bild nicht oder nicht gut verständlich ist oder wo die Orientierung der Nutzer mit Hilfe eines Bildes erleichtert wird. Bei der Verwendung von Bildern sollten Sie auf folgende Punkte achten: Sie müssen die Bild und ggf. Persönlichkeitsrechte besitzen bzw. beachten. Das Bild muss in einem der Formate JPG, GIF oder PGN vorliegen. Das Bild muss scharf sein und darf nicht verzerrt oder "verpixelt" sein. Das Bild muss vor dem Hochladen auf die gewünschte Größe gebracht werden. Vor dem Verlinken sollte das Bild in die Dateiliste im TYPO3 Backend hochgeladen werden. Unter "Barrierefreiheit > Alternative Texte" muss eine Bildbeschreibung eingetragen werden, die sehbehinderten Menschen vom System vorgelesen werden kann. Die Funktion "Bei Klick vergrößern" sollte nur aktiviert werden, wenn das Bild Details enthält, die ansonsten nicht zu erkennen sind. VERLINKUNGEN Unser TYPO3 System sieht vier verschiedene Arten der Verlinkung vor: Interne Links verweisen auf Seiten innerhalb des Systems, d.h. auf Seiten, deren URL mit "www.uni saarland.de" beginnt. Externe Links verweisen auf "fremde" Internetseiten außerhalb unseres Systems. Dateilinks führen zu PDF oder Word Dateien oder zu JPGs. E Mail Links öffnen auf dem Computer des Nutzers das Mailprogramm und setzen die angeklickte Mailadresse automatisch in das Empfängerfeld einer neuen Mail. Externe, Datei und E Mail Links werden automatisch mit Hilfe kleiner Icons gekennzeichnet: Bei allen Arten der Verlinkung müssen Sie darauf achten, sog. SPRECHENDE LINKS zu setzen. Jeder Link muss anzeigen, wohin er führt. Das ist wichtig für die Orientierung der Nutzer, es ist aber auch wichtig für Google. Verlinken Sie also nicht Wörter wie "hier", "herunterladen" oder "weiter". Nicht: Informationen zum Studium finden Sie hier. Besser: Hier finden Sie Informationen zum Studium. 5
Dasselbe gilt für URLs, die in der Regel nur schwer zu verstehen sind. Einfacher zu verstehen ist ein sprechender Link, der mit der URL hinterlegt ist: Nicht: http://www.uni saarland.de/campus/studium/bewerbung undeinschreibung/internationale bewerber/antrag auf zulassung.html Besser: Zulassungsantrag für internationale Studienbewerber ACHTUNG: Durch die blaue Schrift sind Links bereits hervorgehoben. Setzen Sie sie also nicht extra noch fett. WO VERLINKEN? Einzelne Wörter oder Wortgruppen innerhalb eines Fließtextes zu verlinken, ist aus Nutzersicht keine gute Idee. Besser ist es, am Ende der Seite oder des Seitenabschnitts die wichtigsten Links zusammenzufassen, was allerdings nicht in lange Linklisten ausarten sollte. EXTERNE LINKS stellen einen erhöhten Pflegeaufwand dar, da sie ständig kontrolliert werden müssen. Daher sollten externe Webseiten nur dann verlinkt werden, wenn dies wirklich notwendig und thematisch passend ist. ACHTUNG: Die Universität des Saarlandes macht keine kostenlose Werbung für kommerzielle Internetangebote. Verlinkungen auf kommerzielle Webseiten sind daher nicht erwünscht und sollten unterlassen werden. Vor allem sollten Sie keine Linklisten mit kommerziellen Webangeboten anlegen. DATEILINKS (meist PDF) dienen der Bereitstellung größerer Textmengen. Wichtige Informationen sollten aber immer direkt auf der Internetseite zu finden sein und nicht in einem PDF "versteckt" werden. Überlegen Sie sich daher genau, welche Informationen für alle Nutzer von Bedeutung sind und wo es sich um (ausführliche) Zusatzinformationen für besonders interessierte Nutzer handelt. Laden Sie die Datei vor dem Verlinken in die Dateiliste im TYPO3 Backend hoch und denken Sie daran, die Größe des PDF zu reduzieren (nicht mehr als 1 MB). FÜR EXTERNE LINKS UND DATEILINKS GILT: Bei der Verlinkung müssen Sie im TYPO3 Backend unter "Zielfenster" die Möglichkeit "Neues Fenster" (_blank) auswählen. Die aufgerufene Seite bzw. das PDF geht dann in einem neuen Tab auf, was sinnvoll ist, damit die Ursprungsseite nicht "verloren" geht. Nur interne Links sollten im selben Tab aufgehen. WEITERE TIPPS UND INFOS gibt es auf den Internetseiten des Webteams unter: www.uni saarland.de/webteam. Hier finden Sie Schritt für Schritt Anleitungen für das Backend, FAQs zu technischen Fragen sowie eine Checkliste für den inhaltlichen Aufbau Ihrer Seite. Außerdem helfen Ihnen die Mitarbeiter des Webteams und der Online Redaktion gerne weiter: FRAGEN ZU TYPO3 Webteam: wwwadm@uni saarland.de Rechteverwaltung und Redaktionsarbeit Katharina Reppekus, Durchwahl: 3627 Tobias Lana, Durchwahl: 5528 FRAGEN ZU INHALT UND GESTALTUNG Online Redaktion Christiane Coester, Durchwahl: 2708 presse.coester@uni saarland.de Technische Fragen Joachim Blum, Durchwahl: 3474 6