Handbuch zum Webrelaunch der Universität Kassel · CSS-Framework YAML. Mehr hierzu im...

30
Handbuch zum Webrelaunch der Universität Kassel Entwurf Stand: 3.1.2011

Transcript of Handbuch zum Webrelaunch der Universität Kassel · CSS-Framework YAML. Mehr hierzu im...

Page 1: Handbuch zum Webrelaunch der Universität Kassel · CSS-Framework YAML. Mehr hierzu im Support-portal. Spaltenbreiten Folgende Spaltenbreiten liegen dem Template zu-grunde - Navigationsspalte:

Handbuch zum Webrelaunch der Universität Kassel

EntwurfStand: 3.1.2011

Page 2: Handbuch zum Webrelaunch der Universität Kassel · CSS-Framework YAML. Mehr hierzu im Support-portal. Spaltenbreiten Folgende Spaltenbreiten liegen dem Template zu-grunde - Navigationsspalte:

CD-Manual Web l Universität Kassel l Januar 2011 2

INHALT

1 EINLEITUNG 31.1 DER WEBRELAUNCH 41.2 DIE NUTZER/INNEN VERSTEHEN 41.3 DER NEUE WEBAUFTRITT 51.4 DIE VORGABEN 6

2 LAYOUT 72.1 SEITENRASTER 82.2 KOPFBEREICH 92.3 NAVIGATION 92.4 INHALTSELEMENTE 112.5 FUSSZEILE 12

3 KERNELEMENTE 133.1 LOGO 143.2 LINIENSPIEL 15 4 DIE BILDSPRACHE 164.1 BILDER IM KOPFBEREICH 174.2 BILDER IM INHALT 18

5 ZENTRALE SEITENTYPEN 19

6 DIE SPRACHE 226.1 KONVENTIONEN 236.2 GESCHLECHTSNEUTRALE SPRACHE 23

7 GESETZLICHER RAHMEN 247.1 BARRIEREFREIHEIT 257.2 URHEBERRECHT 257.3 DATENSCHUTZ 25

8. HILFE 268.1 ANSPRECHPARTNERINNEN 278.1 DAS SUPPORTPORTAL 27

9 AUSBLICK 289.1 DIE DAUERBAUSTELLE WEBAUFTRITT 29

IMPRESSUM 30

Page 3: Handbuch zum Webrelaunch der Universität Kassel · CSS-Framework YAML. Mehr hierzu im Support-portal. Spaltenbreiten Folgende Spaltenbreiten liegen dem Template zu-grunde - Navigationsspalte:

CD-Manual Web l Universität Kassel l Januar 2011 3

1 EINLEITUNG

Page 4: Handbuch zum Webrelaunch der Universität Kassel · CSS-Framework YAML. Mehr hierzu im Support-portal. Spaltenbreiten Folgende Spaltenbreiten liegen dem Template zu-grunde - Navigationsspalte:

CD-Manual Web l Universität Kassel l Januar 2011 4

1 EINLEITUNG

1.2. Die Nutzer/-innen verstehen

Besucherinnen und Besucher eines Webauftrittes haben in der Regel ein konkretes Ziel. Sie suchen Informationen oder eine Lösung für ein Problem („Wer ist Ansprechpartner für…?“). Dabei wollen sie in kürzester Zeit verstehen, wo sie sind und ob sie ihr Ziel auf dieser Webseite erreichen kön-nen. Texte werden hierbei meist nur überflogen und selten vollständig gelesen. Die Entscheidung, auf einen Link zu klicken, fällt dabei oft intuitiv. Es entstehen Suchpfade der Ungeduld, dabei wol-len Nutzerinnen und Nutzer die gesuchten Inhalte möglichst sofort erhalten. Was bei dieser Informationsarbeit hilft, sind kla-re Orientierungsangebote. Dazu zählen z.B. ein verständliches Seitenraster, Einheitlichkeit des

Erscheinungsbildes, aber auch leicht erkennbare Unterscheidungsmerkmale, um einzelne Bereiche besser als in sich geschlossenes Informations-angebot wahrnehmen zu können. Es macht also durchaus Sinn, wenn sich die Hochschule ent-scheidet, Corporate-Design-Lücken zu schließen, ein visuelles Grundkonzept in alle Unterbereiche zu tragen und damit die Wiedererkennbarkeit und Bekanntheit zu fördern. Denn die Zufriedenheit der Besucherinnen und Besucher trägt zur Image-pflege der Hochschule bei.

Wollen Sie mehr zum Thema Nutzerverhalten im Web lesen? Linktipps hierzu finden Sie im Sup-portportal.

Der Webauftritt der Hochschule wird immer mehr zum Leitmedium für die Außen- und Binnenkom-munikation. Viele tausend Zugriffe am Tag belegen die Bedeutung der webbasierten Kommunikation mit Schülerinnen und Schülern, Studierenden, Forscherinnen und Forschern und Hochschul- interessierten in aller Welt. Umso wichtiger sind ein ansprechendes, konsistentes Erscheinungs-bild und damit eine eindeutige visuelle Identität über alle universitären Bereiche hinweg.

Dieses Handbuch zum Webrelaunch liefert Basis-informationen rund um den neuen Webauftritt der Universität Kassel. Die Umstellung der Dachseiten, also jenes Bereiches, der alle übergreifenden In-formationen zur Universität als Ganzes beinhaltet,

bildet den Auftakt für eine umfassende Harmonisie-rung und Entfaltung des neuen Layouts. Im Laufe der nächsten Monate werden schließlich Websei-ten mit gesamtuniversitärer Bedeutung folgen.

Ziel ist es, einen „Portalverbund“ mit harmonisie-render Optik und Basisstruktur unter dem Dach der Universität Kassel aufzubauen. Hierbei soll die Universität als Ganzes durch ein einheitliches Ge-staltungsraster erkennbar sein. Zugleich sollen die einzelnen Untereinheiten (Fachbereiche, Institute, Fachgebiete, zentrale Einheiten usw.) aber ausrei-chend voneinander unterscheidbar bleiben. Dabei geht es nicht um Uniformität in der Darstellung, vielmehr um Orientierungshilfe für die Nutzer in einer komplexen Informationsumgebung.

1.1 Der Webrelaunch

Page 5: Handbuch zum Webrelaunch der Universität Kassel · CSS-Framework YAML. Mehr hierzu im Support-portal. Spaltenbreiten Folgende Spaltenbreiten liegen dem Template zu-grunde - Navigationsspalte:

CD-Manual Web l Universität Kassel l Januar 2011 5

1 EINLEITUNG

1.3 Der neue Webauftritt

Hochschulwebsites sind große, mehrstöckige „Informationstanker“, die inhaltlich nur schwer zentral gesteuert werden können. Lehr- und For-schungseinrichtungen, die Hochschulverwal-tung und die zentralen Einrichtungen pflegen daher aus gutem Grund ihre eigenen Websei-ten. Trotzdem sollen sie zukünftig technisch (Typo3) und optisch einen Verbund bilden.

Dachseiten

Im Mittelpunkt steht das allgemeine Angebot, die Dachseiten. Dieser Bereich wird primär von der zentralen Hochschulverwaltung betreut und infor-miert die Besucherinnen und Besucher über die Universität, das Studienangebot, das Forschungs-spektrum, bietet Fachbereichsportraits und Einbli-cke in das Campusleben vor Ort.

Fachbereiche, Institute, Fachgebiete, wissen-schaftlichen Zentren - Mikrokosmos Hochschule

Fachbereiche, Institute und Fachgebiete, die wissenschaftlichen Zentren und alle zentralen Organisationseinheiten werden weiterhin ein eigenständiges Portal redaktionell verantworten – allerdings im vorgestellten Corporate Design für das Web.

Arbeiten an der Uni – ein Mitarbeiterportal im Web

Neu aufgebaut wird ein Beschäftigtenportal. Im Rahmen einer zweijährigen Umstellungsfrist werden die bisherigen Informationsangebote der Abteilungen zugunsten eines themenorien-tierten Portals aufgelöst. Auf der Startseite wer-den zukünftig die für die Binnenkommunikation wichtigen Informationen gebündelt: Aktuelles aus der Verwaltung, ein Beschäftigtenmagazin, Meldungen aus dem ITS, zeitnahe Fortbildungs- veranstaltungen, Personalia...

Der Portalverbund im Überblick:

Homepage

Besucherinnen und Besucher unserer Homepage haben Informationsbedürfnissen, die sich im Lau-fe der Zeit stark verändern. Erfahrungsgemäß wandern sie mehr und mehr in die tieferen, spezi-alisierten Bereiche der Website, je länger sie den Webauftritt der Universität nutzen.

Studierende informieren sich überwiegend auf den Fachbereichswebseiten und auf den Seiten der relevanten Webapplikationen (Moodle und Co.). Sie klicken nur noch selten die Homepage der Uni an. Beschäftigten der Universität steht zu-künftig ein eigenes Informationsportal zur Verfü-gung.

Die Startseite der Universität wird daher primär von einem sehr heterogenen Publikum besucht (Studieninteressierte, Unternehmerinnen und Unternehmer, Wissenschaftlerinnen und Wissen-schaftler, Journalistinnen und Journalisten, Bür-gerinnen und Bürger aus der Region) und dient primär der Markenpflege und -sicherung. Die globale Webwelt blickt auf dieses Einstiegstor. Un-ter diesen Gesichtspunkten werden die Themen und Verlinkungen ausgewählt.

Portalverbund Universität Kassel

Page 6: Handbuch zum Webrelaunch der Universität Kassel · CSS-Framework YAML. Mehr hierzu im Support-portal. Spaltenbreiten Folgende Spaltenbreiten liegen dem Template zu-grunde - Navigationsspalte:

CD-Manual Web l Universität Kassel l Januar 2011 6

1 EINLEITUNG

1.4 Die Vorgaben

Unser Ziel ist es, das Vertrauen der Nutzerinnen und Nutzer zu gewinnen. Die wichtigste Kompo-nente ist dabei die redaktionelle Glaubwürdigkeit, aber Layout und Technik müssen diese untermau-ern. Ähnlichkeit im Aufbau fördert den intuitiven Umgang und dient der Orientierung. Eine portal-übergreifende gleichartige Nutzerführung (Navi-gation) erleichtert die Bedienung.

Die Vorgaben zielen daher primär darauf ab, ein System aufzubauen, das den Nutzerinnen und Nutzern eine optimale Umgebung für ihre Infor-mationssuche anbietet. Vorgaben sind jedoch zwecklos, wenn Sie nicht mit einem engagierten und verantwortungsvollen Umgang der Beteilig-ten mit den Regeln verbunden werden.

Zum Beispiel läßt sich Barrierefreiheit letztlich nur durch die Achtsamkeit der Redakteurinnen und Re-dakteure bei ihrer täglichen Arbeit erreichen. Vor-gaben, wie Bilder mit Alternativtexten zu belegen, verständliche Texte anzubieten, Konventionen bei Adressen einzuhalten oder geschlechtsneutrale Begriffe zu verwenden, nützen hier wenig, wenn die Redakteurinnen und Redakteure dies nicht als sinnvolles Gebot akzeptieren.

Daher skizzieren wir hier zunächst nur unsere Webvision für das Jahr 2013:Alle Webseiten mit gesamtuniversitärer Bedeu-tung sind in das neue Weblayout übertragen. So-fern es sich nicht um Webapplikationen handelt oder andere wichtige Gründe dagegen sprechen, nutzen Sie Typo3, damit wir das Gesamtsystem technisch und gestalterisch weiterentwickeln kön-nen. Der Webauftritt ist annähernd barrierefrei und standardkonform – technisch wie inhaltlich. Es gibt regelmäßige Konferenzen für Redakteurin-nen und Redakteure, in denen die Weiterentwick-lung des Hochschulwebs vorangetrieben wird. Alle Design-, Struktur- und Funktionsentscheidun-gen basieren auf evaluierten Ergebnissen.

Der praktische Weg dorthin:

Fachbereiche/Institute/FachgebieteIm Rahmen einer einjährigen Umstellungsfrist werden die Dachseiten der Fachbereiche in das neue Weblayout überführt. Die Institute werden im Rahmen einer zweijährigen Frist umgestellt. Die Fachgebiete sollten diesen Zeitraum ebenfalls für eine Umstellung nutzen. Für die Fachbereichs-Dachseiten ist die Umstellung verbindlich. Ebenso verbindlich ist die Abbildung von Basisinformatio-nen. Viele Studierende müssen sich auf mehreren Fachbereichseiten orientieren. Ihnen wollen wir diese Arbeit erleichtern. Daher muss ein Grund-stock von einheitlich strukturierten und benann-ten Basisinformationen fachbereichsübereifend entstehen. Mehr hierzu erfahren Sie im Support-portal.

Zentrale OrganisationseinheitenDie zentralen Organisationseinheiten werden verbindlich umgestellt. Ausnahme bildet die Bi-bliothek, die das Layout in Absprache mit dem Bereich Webkommunikation (siehe Ansprechpart-ner/innen) adaptiert.

Projektwebsites/Kooperationen mit einem Partner Für Projektwebsites gelten Minimalanforderun-gen (Logo im Kopfbereich links,Verlinkung mit der Startseite der Hochschule). Im Falle von Koopera-tionsprojekten wird die federführende Organisa-tion das Corporate Design vorgeben. Sollte dies die Universität Kassel sein, sind die Projektver-antwortlichen zur Abstimmung mit dem Bereich Webkommunikation aufgefordert.

WebapplikationenFür den Bereich der Webapplikationen steht eine spezielle, anpassbare Kopfgestaltung zur Verfü-gung.

Mehr Hintergrundinformationen (Präsidiumsbe-schluss, Migrationskonzept, Ressourcenplanung) finden Sie im Supportportal.

Page 7: Handbuch zum Webrelaunch der Universität Kassel · CSS-Framework YAML. Mehr hierzu im Support-portal. Spaltenbreiten Folgende Spaltenbreiten liegen dem Template zu-grunde - Navigationsspalte:

CD-Manual Web l Universität Kassel l Januar 2011 7

2 LAYOUT

Die Gestaltung folgt einer seriösen, aber dennoch frischen Layoutsprache. Das Design setzt auf wenige, aber klar er-kennbare Elemente. Das etablierte Corporate Design der Hochschule mit seinen Rot- und Grautönen wird mit dem neuen Layout weiter entwickelt und modernisiert. Details zum Entstehungsprozess des Layouts finden sich im Uni-Blog: [blogs.uni-kassel.de/uniweb].

Page 8: Handbuch zum Webrelaunch der Universität Kassel · CSS-Framework YAML. Mehr hierzu im Support-portal. Spaltenbreiten Folgende Spaltenbreiten liegen dem Template zu-grunde - Navigationsspalte:

CD-Manual Web l Universität Kassel l Januar 2011 8

2 LAYOUT

2.1 Seitenraster

Die Grundstruktur der Website gliedert sich in ein 2- und 3-spaltiges Layout (Navigationsspalte, In-haltsbereich und ggf. Zusatzinformationsbereich) mit Kopf- und Fußbereich. Der gesamte Inhaltsbe-reich ist auf eine fixe Breite von 1000px angelegt. Die Basis der technischen Umsetzung bildet das CSS-Framework YAML. Mehr hierzu im Support-portal.

SpaltenbreitenFolgende Spaltenbreiten liegen dem Template zu-grunde - Navigationsspalte: 250px- Inhaltsbereich: 545px- Zusatzinformationspalte: 185px

Grundsätzlich sollte das 3-spaltige Layout mit einer Zusatzinformationsspalte rechts Standard sein. Nicht immer lassen sich die Inhalte aber so optimal präsentieren (z.B. mehrspaltige Tabellen). Daher steht auch ein 2-spaltiges Template zur Ver-fügung, das mit einer Breite von 730px Inhalts- und Zusatzinformationsbereich zusammenfasst. Mehr hierzu im Supportportal.

Page 9: Handbuch zum Webrelaunch der Universität Kassel · CSS-Framework YAML. Mehr hierzu im Support-portal. Spaltenbreiten Folgende Spaltenbreiten liegen dem Template zu-grunde - Navigationsspalte:

CD-Manual Web l Universität Kassel l Januar 2011 9

2 LAYOUT

2.2 Kopfbereich (Header)

Der Kopfbereich enthält die Breadcrumbs-Naviga-tion (Brotkrümmelpfad), die Funktionslinks „Ser-vice“ und „Beschäftigtenportal“, den Verweis zum englischsprachigen Informationsangebot und das Suchfeld. Das Logo der Universität Kassel wird auf einem aussagekräftigen Imagebild präsen-tiert. Diese Imagebilder haben eine Größe von 1000x140px.

Das Imagebild des Kopfbereiches dient der Iden-tifizierung und der visuellen Identitätsstiftung der Untereinheiten im Verbund der „Webfamilie“ Universität Kassel. Übergeordnetes Leitmotiv im Bereich der Dachseiten ist die Darstellung des „Lebensgefühles“ auf dem Campus Kassel. Für Unterbereiche (Fachbereiche, Institute etc.) wird ein thematischer Bezug oder eine prägnante Dar-stellung der räumlichen Gegebenheiten empfoh-len.

2.3 Navigation

AllgemeinAls Redakteurin oder Redakteur können Sie eine Menge dazu beitragen, dass die Navigation – das Herzstück der Benutzbarkeit eines guten Webauftrittes – einfach zu bedienen und übersichtlich für die Nutzerinnen und Nutzer bleibt.

Einige Tipps:

• Formulieren Sie kurze, prägnante Begriffe für die Seitentitel. Nutzen Sie ggf. die Möglichkeit, einen speziellen, gekürzten Navigationstitel zu vergeben.

• Verwenden Sie keine Abkürzungen oder englischen Begriffe.

• Verlinken Sie in der Navigation nicht auf ein Dokument oder auf eine externe Webseite. Auch Bereichswechsel, also Verlinkungen in ein anderes Portal, verwirren nur.

Page 10: Handbuch zum Webrelaunch der Universität Kassel · CSS-Framework YAML. Mehr hierzu im Support-portal. Spaltenbreiten Folgende Spaltenbreiten liegen dem Template zu-grunde - Navigationsspalte:

CD-Manual Web l Universität Kassel l Januar 2011 10

2 LAYOUT

Lokale Navigation

Im Detail:Die Navigation für die Dachseiten der Hochschule ist in eine Topmenünavigation (globale Navigation) und eine lokale Navigation unterteilt. Die globale Navigation wird überall auf den Dachseiten angezeigt und dient den Nutzerinnen und Nutzer als Standortmarkierung für den ausgewählten Hauptmenüpunkt („Ich befinde mich jetzt im Themenstrang Studium“). Die lokale Navigation zeigt die Menüpunkte der jeweiligen Unterkategorien.

Für Portale (Fachbereiche, Institute etc.) ist primär eine lokale Navigation vorgesehen, da in der Regel eine flachere Struktur ausreicht. In begründeten Fällen kann hiervon abgewichen werden.

Aufgrund des neuen Navigationskonzeptes mit eingebetteten Unterebenen stehen maximal vier Unterebenen zur Verfügung. Für die Nutzerinnen und Nutzer erleichtert diese Darstellung die Orientierung, da sie den Strukturbaum im Blick behalten können. Insbesondere für Besucherinnen und Besucher, die über Suchmaschinen auf die unteren Ebenen gelangen, ist diese Menüpunktdarstellung eine wichtige Orientierungshilfe.

Dies bedeutet aber für die Redakteurinnen und Redakteure: Beschränkung auf das Wesentliche, keine Überfrachtung durch ein Überangebot an Inhalten. Versuchen Sie, Texte kurz und prägnant zu formulieren. Als Hilfsmittel zur Strukturierung von umfangreicheren Inhalten stehen Ihnen Aufklappmenüs und 3-Spalten-Tabs zur Verfügung. Mehr hierzu im Supportportal.

Topmenünavigation

Page 11: Handbuch zum Webrelaunch der Universität Kassel · CSS-Framework YAML. Mehr hierzu im Support-portal. Spaltenbreiten Folgende Spaltenbreiten liegen dem Template zu-grunde - Navigationsspalte:

CD-Manual Web l Universität Kassel l Januar 2011 11

2 LAYOUT

2.4 Inhaltselemente

Farben des Linienspiels Farben der Webseiten

Typografie

Gute Lesbarkeit im Netz zu erreichen ist nicht leicht. Webtypografie hängt von vielen Faktoren ab: Schriftart und -größe, Zeilenabstand, Weißflä-chen. Im neuen Webauftritt wird die weboptimier-te, serifenlose Schrift Verdana für den Fließtext verwendet und Arial für die Navigation.

Eine der zentralen Anforderungen aus dem Be-reich der Barrierefreiheit ist die Skalierbarkeit der Texte. Alle Schriftauszeichnungen sind im neuen Weblayout daher grundsätzlich prozentual ange-geben.

Gestaltungselement Schriftart Schriftgröße Schriftgröße ca. px

H1 Verdana 100 % 16 pxH2 Verdana 92 % 14,7 pxH3 Verdana 90 % 14 pxFließtext Verdana 80% 12,8 pxVerweis Verdana 80% 12,8 pxKontextmenü/Quicklinks Verdana 74% 11,2 pxNavigation Arial 62% 10,2 pxFußleiste Verdana 70% 11,2 px

Page 12: Handbuch zum Webrelaunch der Universität Kassel · CSS-Framework YAML. Mehr hierzu im Support-portal. Spaltenbreiten Folgende Spaltenbreiten liegen dem Template zu-grunde - Navigationsspalte:

CD-Manual Web l Universität Kassel l Januar 2011 12

2.5 Fußzeile

Die Fußzeile enthält die Kontaktinformationen des jeweiligen Bereiches, die Verlinkung zum Impres-sum und zu den Anfahrtsplänen, redaktionelle Infos (Erstelldatum, Redaktion) sowie (optional) Social-Bookmarking-Icons und ggf. Social Media-Links.

2 LAYOUT

Zusatzinformationen

Im optionalen Kontextinformationsbereich rechts vom Inhaltsbereich sollten primär ergänzende Links, Verlinkungen zu Dokumenten oder Kurzin-formationen platziert werden. Berücksichtigen Sie bitte, dass dieser Bereich leicht übersehen wird und nur von jenen Nutzern wahrgenommen wird, die den Text im Mittelblock intensiv lesen. Platzie-ren Sie hier daher Informationen, die primär er-gänzenden Charakter haben.

Page 13: Handbuch zum Webrelaunch der Universität Kassel · CSS-Framework YAML. Mehr hierzu im Support-portal. Spaltenbreiten Folgende Spaltenbreiten liegen dem Template zu-grunde - Navigationsspalte:

CD-Manual Web l Universität Kassel l Januar 2011 13

3 KERNELEMENTE

Page 14: Handbuch zum Webrelaunch der Universität Kassel · CSS-Framework YAML. Mehr hierzu im Support-portal. Spaltenbreiten Folgende Spaltenbreiten liegen dem Template zu-grunde - Navigationsspalte:

CD-Manual Web l Universität Kassel l Januar 2011 14

3 KERNELEMENTE

3.1 Logo

Logo der Universität KasselDas Logo der Universität Kassel ist das zentrale Corporate-Design-Merkmal der Hochschule. Auf-grund der zentralen Bedeutung für die Markenpfle-ge der Universität ist eine einheitliche Darstellung zwingend notwendig. Zukünftig sollen alle Web-seiten daher das Logo an der festgelegten Position links oben in der vorgegebenen Größe führen. Es dürfen nur noch Originaldateien mit der Farbge-bung rot-schwarz auf weißem Grund verwendet werden. Diese Minimalvorgabe ist verbindlich für alle Bereiche der Hochschule. Die Dateien finden Sie im Supportportal.

Logos der einzelne Unterbereiche (Fachbereiche, Institute)Fachbereichs-, Instituts- und Projektlogos sind im rechten Bereich zu platzieren. Das Logo ist hierdurch auf allen Bereichsseiten eingebunden. Eine Logobreite von 160px sollte nicht überschritten werden. Gegebenfalls muss eine Webvariante erstellt werden. Projektportale mit mehreren Bereichslogos können diese im Header über das Imagebild legen.

Bezug der Originaldateien unter: www…..

Page 15: Handbuch zum Webrelaunch der Universität Kassel · CSS-Framework YAML. Mehr hierzu im Support-portal. Spaltenbreiten Folgende Spaltenbreiten liegen dem Template zu-grunde - Navigationsspalte:

CD-Manual Web l Universität Kassel l Januar 2011 15

3.2 Das Linienspiel

Alleinstellungsmerkmal der Webpräsentation ist das Linienspiel, das die globale und lokale Navi-gation umrahmt. Im Bereich der Dachseiten än-dert sich die Linienführung je nach ausgewähltem Topmenüpunkt.

Die Farbwerte der Linien sind:

Universität: 197 0 90 (RGB)Studium: 255 186 198 (RGB)Forschung: 157 11 77 (RGB)Fachbereiche: 156 158 159 (RGB)Einrichtungen: 218 218 218 (RGB)

3 KERNELEMENTE

Page 16: Handbuch zum Webrelaunch der Universität Kassel · CSS-Framework YAML. Mehr hierzu im Support-portal. Spaltenbreiten Folgende Spaltenbreiten liegen dem Template zu-grunde - Navigationsspalte:

CD-Manual Web l Universität Kassel l Januar 2011 16

4. Die Bildsprache

Im neuen Webauftritt haben die Bildwahl und die Bildverwendung einen hohen Stellenwert. Im Mit-telpunkt steht hierbei der Campus mit seinen All-tagssituationen. Bewusst werden Situationen und Räumlichkeiten gezeigt, die einen hohen Wieder-erkennungswert bei Studierenden und Beschäftig-ten der Hochschule erzielen.

Zentrale Örtlichkeiten, besondere Blickwinkel, ruhige Lern- und Arbeitssituationen, reduzierte Motivwahl sowie eine leichte, dezente und helle Farbstimmung passend zum Linienspiel sind die Merkmale der neu aufzubauenden Bildwelt.

Page 17: Handbuch zum Webrelaunch der Universität Kassel · CSS-Framework YAML. Mehr hierzu im Support-portal. Spaltenbreiten Folgende Spaltenbreiten liegen dem Template zu-grunde - Navigationsspalte:

CD-Manual Web l Universität Kassel l Januar 2011 17

Die Kopfbilder werden nach einem dreigliedrigen System verwendet. Im Dachseitenbereich enthält jeder Channel (Universität, Studium, Forschung, Fachbereiche, Einrichtungen) ein aussagekräfti-ges Imagebild, das primär Einblicke in den Cam-pus abbildet. Die einzelnen Fachbereiche und wissenschaftli-chen Zentren verwenden ebenfalls vollflächige

Imagebilder mit thematischem Bezug zum jewei-ligen Lehr- und Forschungsfeld – alternativ zur räumlichen Verortung auf dem Campus. Imagebilder von Instituten, Fachgebieten und Pro-jekten können von der vollflächigen Kopfgestal-tung abweichen. Die Motivwahl wird hierdurch er-leichtert, da am linken Bildrand weiß verlaufende Bilder das Spektrum der Darstellungen erhöhen.

4.1 Bilder im Kopfbereich

4 DIE BILDSPRACHE

Page 18: Handbuch zum Webrelaunch der Universität Kassel · CSS-Framework YAML. Mehr hierzu im Support-portal. Spaltenbreiten Folgende Spaltenbreiten liegen dem Template zu-grunde - Navigationsspalte:

CD-Manual Web l Universität Kassel l Januar 2011 18

4.2 Bilder im Inhalt

Bildmaterial im Inhaltsbereich sollte mit Bedacht ausgewählt werden. Die prägnante Kopfgestal-tung bindet die Aufmerksamkeit der Nutzer hinrei-chend. Bildmotive und -größen sind daher so zu wählen, dass sie nicht von den Textinhalten und der Navigation ablenken. Primär sollten im In-haltsbereich farbige oder Schwarz-Weiß-Fotogra-fien verwendet werden, die die Textaussage trans-portieren. Collagen, Montagen, Verläufe, Rahmen oder sonstige Verfremdungen sollten vermieden

werden. Werden Bilder langfristig als stilistisches Mittel eingesetzt, sollte hierbei auf eine Harmonie zwischen Farbwahl, Kopfgestaltung und den ein-gesetzten Farben im Linienspiel geachtet werden. werden.

4 DIE BILDSPRACHE

Page 19: Handbuch zum Webrelaunch der Universität Kassel · CSS-Framework YAML. Mehr hierzu im Support-portal. Spaltenbreiten Folgende Spaltenbreiten liegen dem Template zu-grunde - Navigationsspalte:

CD-Manual Web l Universität Kassel l Januar 2011 19

5 ZENTRALE SEITENTYPEN

Page 20: Handbuch zum Webrelaunch der Universität Kassel · CSS-Framework YAML. Mehr hierzu im Support-portal. Spaltenbreiten Folgende Spaltenbreiten liegen dem Template zu-grunde - Navigationsspalte:

CD-Manual Web l Universität Kassel l Januar 2011 20

Nachfolgend finden Sie eine Übersicht zentraler Seitentypen. Weitere Gestaltungsbeispiele finden Sie im Supportportal.

Startseiten

5 ZENTRALE SEITENTYPEN

Page 21: Handbuch zum Webrelaunch der Universität Kassel · CSS-Framework YAML. Mehr hierzu im Support-portal. Spaltenbreiten Folgende Spaltenbreiten liegen dem Template zu-grunde - Navigationsspalte:

CD-Manual Web l Universität Kassel l Januar 2011 21

Inhaltsseiten

Übersichten

5 ZENTRALE SEITENTYPEN

Page 22: Handbuch zum Webrelaunch der Universität Kassel · CSS-Framework YAML. Mehr hierzu im Support-portal. Spaltenbreiten Folgende Spaltenbreiten liegen dem Template zu-grunde - Navigationsspalte:

CD-Manual Web l Universität Kassel l Januar 2011 22

6 Die Sprache

Page 23: Handbuch zum Webrelaunch der Universität Kassel · CSS-Framework YAML. Mehr hierzu im Support-portal. Spaltenbreiten Folgende Spaltenbreiten liegen dem Template zu-grunde - Navigationsspalte:

CD-Manual Web l Universität Kassel l Januar 2011 23

6 SPRACHE

Texte auf Webseiten zu lesen ist anstrengend. Un-sere Nutzerinnen und Nutzer haben, bevor Sie auf die von Ihnen betreuten Seiten gelangen, in der Regel schon einige Texte überflogen. Sie sollten ihre Inhalte daher so aufbereiten, dass die Nutzer schon beim raschen Lesen der Seite möglichst viele Hinweise auf das Thema erhalten. Heben Sie Schlüsselwörter hervor, fügen Sie häufig Zwi-schenüberschriften ein. Setzen Sie mit Bildern ge-

zielt Ankerpunkte zur Orientierung auf der Seite. Die wichtigsten Schlussfolgerungen sollten in je-dem Abschnitt zunächst kurz präsentiert werden. Das „Anlesen“ von Textabschnitten wird damit er-leichtert und die Nutzerinnen und Nutzer erfahren dennoch die Kernaussagen. Im Idealfall steht am Anfang ein kurzes Abstract, danach folgen jeweils 10-15 Sätze umfassende Absätze mit Zwischen-überschriften.

Adressen ...sollten immer vollständig angegeben werden:Universität KasselName der EinrichtungEmpfänger Vorname NachnameStrasse HausnummerPLZ OrtDienstgebäude:Straße / Raum

Beispiel: Alle sportlich Interessierten können am Weiterbil-

dungsangebot des Institutes für Sportwissenschaft (PDF, 2 MB) teilnehmen.

6.2 Geschlechtsneutrale Sprache

Verwenden Sie eine geschlechtsneutrale Sprache. Die gängigsten und höflichsten Möglichkeiten sind:

• Doppelnennungen: Studentinnen und Studenten

• Schrägstrich: Studentinnen/Studenten• Neutrale Begriffe: Studierende

Mehr zum Thema lesen Sie im Supportportal.

6.1 Konventionen

Einheitliche Sprachregelungen erleichtern den Nutzerinnen und Nutzern das schnelle Erfassen von Inhalten. Halten Sie sich bitte an die folgen-den Minimalkonventionen:

Telefon- und Faxnummer...werden nach DIN 5008 dargestellt: +49 561 804-1111

Verlinkungen …Verlinken Sie den Titel der Zielwebseite oder des Dokuments. Verzichten Sie auf Linktitel wie „kön-nen Sie hier downloaden…“

Page 24: Handbuch zum Webrelaunch der Universität Kassel · CSS-Framework YAML. Mehr hierzu im Support-portal. Spaltenbreiten Folgende Spaltenbreiten liegen dem Template zu-grunde - Navigationsspalte:

CD-Manual Web l Universität Kassel l Januar 2011 24

7 GESETZLICHER RAHMEN

Page 25: Handbuch zum Webrelaunch der Universität Kassel · CSS-Framework YAML. Mehr hierzu im Support-portal. Spaltenbreiten Folgende Spaltenbreiten liegen dem Template zu-grunde - Navigationsspalte:

CD-Manual Web l Universität Kassel l Januar 2011 25

7 GESETZLICHER RAHMEN

Barrierefreiheit ist zwar eine Selbstverständlich-keit und mittlerweile eine gesetzliche Vorgabe, jedoch nicht immer einfach einzuhalten. Rein for-mal geht es bei Barrierefreiheit im Web um den Zugang zu den Inhalten. Diese sollen unabhängig vom Ausgabegerät und den motorischen und sen-sorischen Fähigkeiten der Nutzenden verfügbar sein. Da zudem eines der wichtigsten Merkmale von barrierefreien Webseiten auch die Umsetzung von allgemeinen Standards ist, profitieren alle Nutzerinnen und Nutzer von entsprechend opti-mierten Seiten.

Allerdings ist Barrierefreiheit keineswegs aus-schließlich eine technische Aufgabenstellung. Vielmehr müssen die Redakteurinnen und Re-dakteure mit jedem neuen Inhalt dazu beitragen. Mehr zur Barrierefreiheit finden Sie im Support-portal. Als Beispiel hier nur drei Hinweise zu den wichtigsten Aspekten im Rahmen der täglichen redaktionellen Arbeit:

Redundante InhalteFür jede Audio- oder Bildinformation sollte ein vergleichbarer Inhalt, der mit einem anderen Sinnesorgan wahrgenommen werden kann, zur Verfügung stehen. Inhaltstragende Bilder werden demnach immer mit einem bildbeschreibenden alt-Attribut versehen. Praktische Beispiele finden Sie im Supportportal.

Überschriften-HierachieLängere Texte sollten unbedingt durch Zwischen-überschriften gegliedert werden. Blinde und stark sehbehinderte Menschen „hangeln“ sich mit spe-ziellen Vorlesegeräten von Überschrift zu Über-schrift, um den Inhalt einer Seite besser erfassen zu können. Eine gute Strukturierung eines Textes erleichtert diese Orientierungsarbeit ungemein.

Fremdsprachige Wörter und AbkürzungenVorlesegeräte (Screenreader) können fremdspra-chige Wörter in deutschen Texten in der jeweili-gen Sprache vorlesen, wenn diese Wörter vorher

7.1 Barrierefreiheit

7.3 Datenschutz

Personenbezogene Daten auf Internetseiten sind ein brisantes Thema. Grundsätzlich gilt, dass jeder das Recht hat zu entscheiden, ob sein Bild, seine Telefon- oder Faxnummer, die E-Mailadresse oder die Büroadresse (Raum, Gebäude..) usw. veröffentlicht wird. Hierfür bedarf es immer einer schriftlichen Einwilligung der betroffenen Person. Gerade bei Mailadresse bietet sich daher an, besser bereichsübergreifende Adressen (sogennante Funktionsmailadressen) zu veröffentlichen. Sie beugen damit auch der Veröffentlichung ungültiger oder inaktiver Maildaten (und damit der Unzufriedenheit der Nutzer) vor, da immer mehrere Personen über eine solche Funktionsmailadresse erreichbar sind.

7.4 Urheberrecht

Als Redakteurin oder Redakteur sind Sie für die Einhaltung des Urheberrechtes verantwortlich. Dies gilt für Texte, Grafiken, Fotos, Musikstücke, Filme, fremde RSS-Feeds, Mashups (z.B. Google Maps), Flickr-Bilder, Youtube-Videos usw. Jegliches fremde Material unterliegt dem Urheberrecht und eine Verwendung kann nur erfolgen, wenn Sie sich vorher die Rechte gesichert haben.

entsprechend gekennzeichnet wurden. Geschieht dies nicht, wird das Wort in jener Sprache ausge-sprochen, die standardmäßig in den Metadaten der Webseite definiert ist – i.d.R. also die deut-sche Sprache. Ähnliches gilt für Abkürzungen, die beim ersten Auftreten erläutert werden müssen. Screenreader lesen diese bei Kleinschreibung der Buchstaben teilweise in einem Wort vor, für blinde und sehbehinderte Menschen wird die Abkürzung damit unverständlich.

Page 26: Handbuch zum Webrelaunch der Universität Kassel · CSS-Framework YAML. Mehr hierzu im Support-portal. Spaltenbreiten Folgende Spaltenbreiten liegen dem Template zu-grunde - Navigationsspalte:

CD-Manual Web l Universität Kassel l Januar 2011 26

8 HILFE

Page 27: Handbuch zum Webrelaunch der Universität Kassel · CSS-Framework YAML. Mehr hierzu im Support-portal. Spaltenbreiten Folgende Spaltenbreiten liegen dem Template zu-grunde - Navigationsspalte:

CD-Manual Web l Universität Kassel l Januar 2011 27

8.1 Ansprechpartner/innen

Haben Sie Fragen, Kommentare, Anregungen zum neuen Webauftritt?

Unter der Mailadresse [email protected] erreichen Sie das organisationsübergreifende Team, bestehend aus Mitarbeitenden des ITS und der Stabstelle Kommunikation, Presse und Öffent-lichkeitsarbeit.

Technische Fragen beanworten Ihnen die Kolle-ginnen und Kollegen aus dem ITS (bei konkretem Hilfebedarf nutzen Sie bitte das Ticketsystem des IT-ServiceDesk). Redaktionelle und organisatori-sche Fragestellungen sowie Anfragen zu neuen Webprojekten oder zum Web-Corporate-Design betreut die Stabstelle Kommunikation, Presse- und Öffentlichkeitsarbeit. Parallel informieren wir Sie im Webblog und im Supportportal über aktuelle Entwicklungen.

8 HILFE

Mit dem Web-Content-Managementsystem Typo3 werden an der Universität Kassel zentral viele tausend Webseiten gepflegt. Ob Anfänger oder Profi – die Materie ist komplex und vielschichtig, so dass Info- und Hilfsangebote gerne genutzt werden. Im Beschäftigtenportal finden Sie die Rubrik „Supportportal Webauftritt“ mit den Themen dieses Handbuchs und vielen zusätzlichen Informationen. Parallel bieten wir einen Webblog zum Uniweb unter der URL: blogs.uni-kassel.de/uniweb an. Auch eine Mailingliste wurde hierfür eingerichtet.

8.2 Das Supportportal

Page 28: Handbuch zum Webrelaunch der Universität Kassel · CSS-Framework YAML. Mehr hierzu im Support-portal. Spaltenbreiten Folgende Spaltenbreiten liegen dem Template zu-grunde - Navigationsspalte:

CD-Manual Web l Universität Kassel l Januar 2011 28

9 AUSBLICK

Page 29: Handbuch zum Webrelaunch der Universität Kassel · CSS-Framework YAML. Mehr hierzu im Support-portal. Spaltenbreiten Folgende Spaltenbreiten liegen dem Template zu-grunde - Navigationsspalte:

CD-Manual Web l Universität Kassel l Januar 2011 29

Ein Webauftritt ist nie fertiggestellt. Design und Technik müssen alle paar Jahre generalüberholt werden, um den Anforderungen der Nutzerinnen und Nutzer zu genügen. Beides ist jedoch nur Form und Basis jener Bestandteile des Angebotes, die über Erfolg und Misserfolg bei den Nutzern entscheiden: Inhalt und Information.

Sie als Redakteurin oder Redakteur sorgen täglich dafür, dass die Universität Kassel in der Außen- und Binnenwahrnehmung qualitativ hochwertig erscheint. Das ist die eigentliche Herausforderung bei der Betreuung der Hochschul-Webseiten.

9.1 Dauerbaustelle Webauftritt

3 AUSBLICK

Page 30: Handbuch zum Webrelaunch der Universität Kassel · CSS-Framework YAML. Mehr hierzu im Support-portal. Spaltenbreiten Folgende Spaltenbreiten liegen dem Template zu-grunde - Navigationsspalte:

CD-Manual Web l Universität Kassel l Januar 2011 30

Impressum© 2011

Universität Kassel

Herausgeberin:Universität Kassel Stabsstelle Kommunikation, Presse und Öffentlichkeitsarbeit

Gesamtleitung:Dr. Guido Rijkhoek, Leitung der Stabsstelle Kommunikation, Presse und Öffentlichkeitsarbeit

Text:Andrea Haferburg, Stabsstelle Kommunikation, Presse und Öffentlichkeitsarbeit

Mitwirkende:Tilla Theis, studentische Mitarbeitende der Stabsstelle Kommunikation, Presse und Öffentlichkeitsarbeit

Fotografien:Paavo Blofield

Layout:Tilla TheisKaren Marschinke, Formkonfekt