Style Guide LMU Klinikum - Auftritte in Fiona
Der Web Style Guide befasst sich mit den Verantwortlichkeiten im Projekt WebContentManagementSystem (WCMS) Fiona am LMU Klinikum und gibt Auskunft über die gewünschte Trennung von:
- Inhalt
- Layout/Struktur
Zudem zeigt dieser Style Guide den Einsatz von standardisierten Vorlagen, Texten, Überschriften, Tabellen, Gliederungspunkte und Links auf.
Die einzelnen Einrichtungen des LMU Klinikums und diverse Projekt- bzw. Kongress-Seiten haben Ihre eigene Webauftritte, welche hinter der Domain des LMU Klinikums liegen www.klinikum.uni-muenchen.de/<Einrichtungs-, Projekt- bzw. Kongressname> bzw. mit verschiedenen Möglichkeiten des Aufrufs dorthin weitergeleitet werden.
Allgemeines
Wozu dient dieser Style Guide?
Dieser Style Guide für die Webseiten des LMU Klinikums soll technische und Layout betreffende Rahmenbedingungen festlegen. Diese sollen Webseiten mit hohem Wiedererkennungswert für alle Einrichtungen des LMU Klinikums und deren Portalseite bewirken.
Daneben soll auf diese Weise ein hoher Grad an Bedienbarkeit (Usability) gewährleistet werden, welcher nicht zuletzt dazu dient, die Internetauftritte des LMU Klinikums gemäß der Verordnung der Schaffung barrierefreier Informationstechnik (BITV) zu gestalten.
Vollständigkeit und Fortentwicklung
Dieser Style Guide hegt noch keinen Anspruch auf absolute Vollständigkeit. Es wird einzelne Fälle geben, die hier nicht dargestellt sind. Dieser Style Guide soll dazu dienen, einen verantwortungsvollen Umgang mit den Webinhalten zu fördern.
Bedenken Sie dabei, dass Sie von Zeit zu Zeit Ihr Wissen hier online überprüfen, da sich das Projekt ständig weiterentwickelt. Auch das Internet bzw. die Art und Weise der Auftritte entwickelt sich sehr schnell weiter, weshalb es zukünftig sicherlich zu Anpassungen und Ergänzungen im Style Guide kommen wird.
Zentrales System
Das zentrale WebContentManagementSystem (WCMS) Fiona des LMU Klinikums steht allen Einrichtungen des LMU Klinikums kostenlos für die Erstellung und Pflege ihrer Webseiten (Intranet) zur Verfügung.
Es ist über einen Webbrowser aufrufbar. Daher ist keine Installation einer Spezialsoftware auf dem eigenen Computer erforderlich. Auch laufen alle sicherheitskritischen Datenverbindungen verschlüsselt ab.
Durch die strikte Trennung von Inhalt, Layout und Struktur im ausgegebenen Webseitengrundgerüst (Corepaket) wird nicht nur das Corporate Design konsequent eingehalten, sondern auch die Einhaltung rechtlicher Vorgaben (z.B. der barrierefreien Informationstechnik-Verordnung) sichergestellt.
Sehr leicht können so Webauftritte erstellt werden, die automatisch dem Corporate Design des LMU Klinikums entsprechen.
Notwendige Kenntnisse
Die verantwortlichen Redakteure und Inhaltsverantwortlichen der Einrichtungs-, Projekt- und Kongress-Seiten erstellen und pflegen die jeweiligen Inhalte.
Es bedarf keinerlei Programmier-, bzw. Auszeichnungskenntnisse, um im WCMS Fiona des LMU Klinikums Webseiten für die eigene Einrichtung bzw. für das eigene Projekt zu erstellen. Lediglich die Teilnahme an einer 4-stündigen Basisschulung ist Voraussetzung für das Arbeiten in den Autorensystemen Internet bzw. Intranet.
Fortgeschrittenen Schulungen, Layout&Design Schulungen und insbesondere die neuen Schulungen zur Barrierefreiheit steigern die Qualität Ihrer Auftritte.
Hinweis:
Vor der Systemumstellung Fiona --> SCRIVITO haben wir den Besuch weiterer Schulungen des "Schulungskonzepts WCMS Fiona am LMU Klinikum" empfohlen. Diese sind aber ausgesetzt, und wir animieren Sie gerne im Selbststudium die von uns angebotenen Handouts/Webseiten zu besuchen.
Die Aufgabe eines Content-Management-Systems ist die Trennung zwischen Inhalt, Layout und Struktur. Der Inhalt soll nicht mit dem Rest vermischt werden, weshalb die Verantwortlichkeiten getrennt sind. Das ist im Web Style guide nochmal zusammengefasst.
Inhalt
Sie, als RedakteurIn, können sich deshalb auf das Wichtigste bei Webseiten konzentrieren: die Inhalte.
Nur regelmäßig aktualisierte und ständig sich verändernde Webauftritte genießen einen hohen Stellenwert bei den Webseitenbesuchern. Diese kehren dann häufiger zu Ihren Webauftritten zurück.
Bei den Inhalten unterstützen wir Sie und bieten Ihnen Schulungen an, welche Barrieren zu Ihren Webseitenbesuchern verhindern sollen. Sowohl Texte, als auch Menüpunkte, Bilder, PDFs und Videos können Barrieren enthalten.
Layout/Struktur
Das Design (Layout und Struktur) wird zentral gesteuert und entlastet Sie als RedakteurIn von der Aufgabe, die Inhalte über die vorgesehenen Möglichkeiten hinaus zu gestalten.
An folgenden Stellen können Sie auf das Design Einfluss nehmen:
- Kopfbild: Die Kopfbilder Ihres Webauftritts können Sie selber bestimmen und einbinden. Dies sogar an jeder beliebigen Stelle in Ihrem Webauftritt.
- Hintergrundfarbe: Melden Sie uns, wenn Sie zwischen den erlaubten Hintergrundfarben (Standard-Grau und Weiß) wechseln wollen
- Auszeichnungsfarbe: Melden Sie uns, wenn Sie in Ihrem Auftritt eine andere Auszeichnungsfarbe als das Standard-Grün haben möchten.
Für die Weiterentwicklungen sowie den Betrieb der gesamten Webauftritte des LMU Klinikums im Autorensystem Fiona waren folgende Einrichtungen gemeinsam verantwortlich:
- Abteilung Medizintechnik und IT (MIT)
- Stabsstelle für Kommunikation und Medien
Hinweis
Alle Weiterentwicklungen im Projekt und somit auch des Webseitengrundgerüsts (Corepaket) wurden aufgrund der Systemumstellung Fiona --> SCRIVITO eingestellt!
Impressum
Der §5 Telemediengesetz verpflichtet die Betreiber von Webseiten ein Impressum zu führen. Für alle Webauftritte des LMU Klinikums, genauer für alle ihm inhaltlich bzw. technisch zuzuordnenden Seiten ist der Vorstand des LMU Klinikums verantwortlich.
Deshalb enthält das Webseiten-Grundgerüst (Corepaket) des LMU Klinikums ein einheitliches und rechtsverbindliches Impressum mit einem festen Platz am Fuß der Webseite. Lediglich Name und Adresse der Einrichung, der Leiter der Einrichtung und die Inhaltsverantwortung muss noch vor dem Live stellen des Webauftritts in der vorbereiteten Vorlage eingefügt werden.
Darüber hinaus ist es innerhalb des LMU Klinikums nicht zulässig, ein eigenständiges Impressum zu erstellen.
Urheberrecht
Werke der Literatur, Wissenschaft und Kunst:
- Texte
- Bilder
- Audiomaterial
- Videomaterial
sind in Deutschland entsprechend des § 1 Urheberrechtsgesetzes geschützt.
Wenn Sie nicht selbst der Urheber des Werkes sind, haben Sie auch kein Recht zur Veröffentlichung und Verwertung (§ 12 und 15 UrhG). Sie müssen stets über die Genehmigung des Urhebers, Verlages oder der Institution verfügen, das betreffende Werk auf ihren Webseiten elektronisch zu vervielfältigen und zu verbreiten.
Diese Vorschrift gilt insbesondere auch für Bilder, die „frei“ im Web gefunden werden oder für digitalisierte Artikel z.B. aus Zeitungen. Die unerlaubte Verwertung von urheberrechtlich geschützten Werken kann gemäß § 106 UrhG strafrechtliche Folgen haben und begründet erhebliche Schadensersatzansprüche.
Rechte am eigenen Bild
Das Recht am eigenen Bild oder Bildnisrecht ist eine besondere Ausprägung des allgemeinen Persönlichkeitsrechts. Jeder Mensch darf grundsätzlich selbst darüber bestimmen, ob und in welchem Zusammenhang Bilder von ihm veröffentlicht werden (§ 22 Satz 1 Kunsturheberrechtsgesetz (KUG/KunstUrhG)).
Bei selbst gemachten Bildaufnahmen müssen Sie also dieses Bildnisrecht beachten. Holen Sie deshalb die Erlaubnis der abgelichteten Personen ein, das Foto auf der Webseite zu veröffentlichen. Für diesen Zweck stellen wir Ihnen die angefügten Wordvorlagen zur Verfügung.
Downloads
Struktur und Layout
Den Internetseiten des LMU Klinikums liegt ein schnell erfassbarer Seitenaufbau zugrunde. Insbesondere wurde bei der Gestaltung auf die Bedürfnisse des Nutzers eingegangen. Hierzu zählt:
- Eine Wiedererkennung von LMU Klinikums Webseiten wird u. a. durch den Kopfbereich gegeben
- Die Integration der einzelnen Einrichtungen wird optimal unterstützt, da diese durch den Austausch der Hintergrundbilder und Bezeichnungen in der 3. Box ihre eigene Webseite individuell gestalten können
- Suche, Quicklinks und Sprachauswahl befinden sich in der Funktionsleiste, die sich zwischen Kopf- und Inhaltsbereich befindet
- Der Servicebereich, der sich rechts neben dem Inhaltsbereich befindet, ist optional. Er kann individuell dem Inhalt einer Seite angepasst werden. Es können dort Links, wichtige Informationen, Termine etc. angezeigt werden
- Ein nach unten hin offenes Layout wurde gewählt, damit der Inhalt je nach Länge einfach mitwachsen kann
Hinweis
Die Struktur und das Layout der bisherigen Webauftritte im WCMS Fiona des Klinikums entsprechen nicht der neuen Marke des LMU Klinikums. Aufgrund der anstehenden Migration der Auftritte werden die bisherigen Auftritte aber nicht mehr angepasst, sondern stellen den Stand vor Einführung der neuen Marke dar!
Seitenaufbau
Hinweis
Der Seitenaufbau der bisherigen Webauftritte im WCMS Fiona des Klinikums entspricht nicht der neuen Marke des LMU Klinikums. Aufgrund der anstehenden Migration der Auftritte werden die bisherigen Auftritte aber nicht mehr angepasst, sondern stellen den Stand vor Einführung der neuen Marke dar!
Der Seitenaufbau ist durch die Auslieferung und Verwendung des Webseiten-Grundgerüsts (Corepaket) am LMU Klinikum automatisch vorgegeben. Die rechte Marginalie (Servicebereich) kann optional ausgeblendet werden.
Dadurch ist in großem Umfang das Corporate Design des LMU Klinikums gewährleistet. Maße, Abmessungen und Funktionalitäten sind festgelegt. Es kann zwischen der 3-spaltigen und 2-spaltigen Darstellung gewählt werden.
Darstellung 1: Seitenaufbau 3-spaltig
- Kopfbereich (oben)
- Suche (zwischen Kopf- und Navigationsbereich)
- Navigationsbereich (links)
- Quick-Links (zwischen Kopfbereich und Navigationspfad)
- Navigationspfad (zwischen Quick-Links und Inhaltsbereich)
- Inhaltsbereich (mitte)
- Funktionsleiste (zwischen Kopf- und Inhaltsbereich)
- Sprachleiste (zwischen Kopf- und Servicebereich)
- Servicebereich (rechts)
- Fußzeile (unten)
Darstellung 2: Seitenaufbau 2-spaltig
- Kopfbereich (oben)
- Suche (zwischen Kopf- und Navigationsbereich)
- Navigationsbereich (links)
- Quick-Links (zwischen Kopfbereich und Navigationspfad)
- Navigationspfad (zwischen Quick-Links und Inhaltsbereich)
- Inhaltsbereich (mitte)
- Funktionsleiste (zwischen Kopf- und Inhaltsbereich)
- Sprachleiste (zwischen Kopf- und Servicebereich)
- Fußzeile (unten)
Der Kopfbereich ist ein zentrales Element der Webseiten und gewährleistet ein einheitliches Erscheinungsbild der Auftritte des LMU Klinikums.
Die Maßangaben im Kopfbereich sind durch das Corporate Design des Klinikums vorgeschrieben. Durch die Verwendung der von uns zur Verfügung gestellten Vorlagen (Photoshop und GIMP) können Sie diese leicht einhalten.
Grundmaße
- Breite 955 Pixel
- Höhe 155 Pixel
- Hintergrundbild 955 x 117 (Breite x Höhe)
Um die von Ihnen gesuchten Inhalte schnell zu finden, ermöglicht Ihnen die von uns eingebundene erweiterte Suche die Suchkriterien einzuschränken bzw. Suchbegriffe zu verknüpfen.
Die Einstellungsmöglichkeiten der erweiterten Suche erhalten Sie durch Anklicken des schwarzen Buttons mit dem weißen Pfeil. Sie können jedoch auch einfach Ihren Suchbegriff in das Textfeld eingeben und die erweiterte Suche startet in der von uns gewählten Voreinstellung. Diese können Sie nach Erhalt der Suchergebnisse noch wie gewünscht verfeinern.
Anhand des Navigationsbereichs erhält man einen Überblick über die auf der Webseite aufgeführten Inhalte.
Sie bietet Orientierung und ist ein fester Bestandteil jeder Seite. Es ist möglich die Navigation bis in die vierte Ebene aufzubauen.
Darüber hinaus können Sie bei sehr großen Webauftritten noch weitere Ebenen verlinken, ohne dass diese im Navigationsbereich mit angezeigt werden. Auch der rechte Servicebereich kann für weitere Links genutzt werden.
Die Quick-Links werden auf jeder Seite des Webauftritts angezeigt. Standardmäßig verlinkt sind:
- Sitemap
- Startseite des Klinikums
- RSS (optional, sprich sobald der erste Newsfeed eingestellt wurde, erscheint dieser Link automatisch)
Darüber hinaus können Sie gezielt wichtige Links dort mit einbinden lassen.
Der Navigationspfad, auch Brotkrumen-Zeile genannt, befindet sich zwischen der Funktionsleiste und dem Inhaltsbereich.
Dieser beginnt bei der Startseite und zeigt den Verlauf bis zu der aktuell aufgerufenen Seite an. Der Navigationspfad bietet dem Nutzer Orientierung auf der Webseite. Zudem ist er neben der Navigationsleiste eine zusätzliche Option durch die Webseite zu navigieren.
Im Inhaltsbereich werden Informationen zu den jeweiligen Menüpunkten ausführlich angezeigt.
Hier können Text, Bilder, Videos, Grafiken, Tabellen, Gliederungspunkte und Links integriert werden.
Der Inhaltsbereich ist mit eingeblendetem Servicebereich 535 Pixel breit und mit ausgeblendetem Servicebereich 735 Pixel breit.
Der horizontale Abstand zwischen Navigation und Inhaltsbereich sowie Inhaltsbereich und Servicebereich ist jeweils 20 Pixel.
Die Funktionsleiste stellt die beiden Icons Drucken und Top (zurück nach oben) dar.
Mit Betätigen des Icons Drucken kann die aktuelle Seite ausgedruckt werden. Ist der Hauptinhalt einer Seite länger und man befindet sich am Ende, so kann man mit Anklicken des Buttons Top (hoch zum Anfang) an den Seitenanfang springen.
Desweiteren wird zwischen den Icons Drucken und Top die Verantwortlichen für den Inhalt (vorausgesetzt das Feld "Verantwortlicher für Inhalt" in der Feldruppe Inhalt wurde ausgefüllt) angezeigt.
In der Sprachleiste werden die Kürzel (Links) der vorhandenen Sprachversionen der Webseite angezeigt.
Soweit der Platz reicht, kann die Sprachleiste mit beliebig vielen Kürzeln versehen werden. Sollte es keine anderssprachige Webseite geben, so bleibt die Sprachleiste leer.
Der Servicebereich hat eine Breite von 180 Pixel und schließt sich rechts an den Inhaltsbereich an.
Er enthält zusätzliche Funktionalitäten wie z.B.:
- Linklisten
- Aufklappbare Linklisten
- Textblöcke
- Bildlinks
- Bildzoom
- Veranstaltungskalender
- etc.
Meist bezieht sich der Servicebereich direkt auf den Inhalt der aktuell angezeigten Seite. Auch kann der Servicebereich individuell für jede Seite eingerichtet aber auch ausgeblendet werden.
Die Fußzeile ist 18 Pixel hoch und schließt sich unterhalb der Navigation, des Inhalts- und Servicebereiches an. Sie ist ein fester Bestandteil jedes Internetauftritts am LMU Klinikum.
Die Fußzeile umfasst voreingestellt Links zum Impressum, Datenschutz und Kontakt.
Schrift - Typographie
Die ursprüngliche Hausschrift LMU Compatil wird weiterhin verwendet jedoch nur noch im Schnitt Regular und für die Einrichtungsbezeichnung unterhalb des Logos oder den Claim.
Hinweis
Die Schrift der bisherigen Webauftritte im WCMS Fiona des Klinikums entspricht nicht der neuen Marke des LMU Klinikums. Aufgrund der anstehenden Migration der Auftritte werden die bisherigen Auftritte aber nicht mehr angepasst, sondern stellen den Stand vor Einführung der neuen Marke dar!
Auszeichnungsstile / Schriftfarben
Nachdem der Einsatz von Farbe bei Schriften nur den Links vorbehalten ist, dürfen lediglich die Auzeichnungsstile bold (fett) und italic (kursiv) verwendet werden.
Die Schriftgrößen für Überschriften, Navigation usw. sind ebenfalls voreingestellt.
Hinweis
Die Schriftfarben der bisherigen Webauftritte im WCMS Fiona des Klinikums entsprechen nicht der neuen Marke des LMU Klinikums. Aufgrund der anstehenden Migration der Auftritte werden die bisherigen Auftritte aber nicht mehr angepasst, sondern stellen den Stand vor Einführung der neuen Marke dar!
Farben
Hinweis
Die Farben der bisherigen Webauftritte im WCMS Fiona des Klinikums entsprechen nicht der neuen Marke des LMU Klinikums. Aufgrund der anstehenden Migration der Auftritte werden die bisherigen Auftritte aber nicht mehr angepasst, sondern stellen den Stand vor Einführung der neuen Marke dar!
Farben spielen eine zentrale Rolle und fördern die Wiedererkennung von Webseiten. Bei der Auslieferung des Webseitengrundgerüsts ist die Auszeichnungsfarbe grün voreingestellt. Eine alternative Auszeichnungsfarbe (für Links) pro Webauftritt ist erlaubt, d.h. Sie können diese bei Ihrem Webauftritt frei wählen.
Die Änderung kann jedoch nur vom Projektteam vorgenommen werden, da bei der Auswahl der Farbe zu kontrollieren ist, dass z.B. der Kontrast hoch genug ist. Texte müssen z.B. auch von Personen mit einer Sehbehinderung gut erkennbar sein.
Hintergrundfarben
Standard-Grau
#efefe9
Standard-Weiss
#ffffff
Textfarben
Überschriften H1 / H2, Navigation, Inhaltstexte
#333333
Überschrift H3
#555555
Überschriften H4 / H5
#666666
Auszeichnungsfarbe
Standard-LMU-Grün
#007e36
Navigationsfarben
bei "mouse over"
#e5e5e4
bei "active"
#cccccc
Sonstige Farben
Rahmenlinie
#999999
Ikonographie
Hinweis
Die Ikonographie der bisherigen Webauftritte im WCMS Fiona des Klinikums entsprechen nicht der neuen Marke des LMU Klinikums. Aufgrund der anstehenden Migration der Auftritte werden die bisherigen Auftritte aber nicht mehr angepasst, sondern stellen den Stand vor Einführung der neuen Marke dar!
Symbole, auch Icons genannt, erleichtern und unterstützen die optische Darstellung einiger Funktionen. Die Icons auf den Webseiten des Klinikums sind 10 x 12 Pixel groß und durch ihre klare Formensprache und Farbe gut erkennbar.
Icons gehören zum Corporate Design des Klinikums und sind somit bei den einzelnen Webauftritten nicht veränderbar.
Wie kann ich Icons im Hauptinhalt einfügen?
Icons sind nicht mehr über den Bilder-Ordner verfügbar. Sie können diese weiterhin bei Bedarf im Hauptinhalt verwenden.
Fügen Sie hierfür über den HTML-Editor ein Bild im Hauptinhalt ein und geben Sie im Feld "Ziel" die Adresse zum gewünschten Icon an.
http://www.klinikum.uni-muenchen.de/oneforall/images/icons/audio.gif
http://www.klinikum.uni-muenchen.de/oneforall/images/icons/ausgeklappt.gif
http://www.klinikum.uni-muenchen.de/oneforall/images/icons/ausklappen.gif
http://www.klinikum.uni-muenchen.de/oneforall/images/icons/download.gif
http://www.klinikum.uni-muenchen.de/oneforall/images/icons/drucken.gif
http://www.klinikum.uni-muenchen.de/oneforall/images/icons/edit.gif
http://www.klinikum.uni-muenchen.de/oneforall/images/icons/excel.gif
http://www.klinikum.uni-muenchen.de/oneforall/images/icons/externlink.gif
http://www.klinikum.uni-muenchen.de/oneforall/images/icons/fax.gif
http://www.klinikum.uni-muenchen.de/oneforall/images/icons/funk.gif
http://www.klinikum.uni-muenchen.de/oneforall/images/icons/go.gif
http://www.klinikum.uni-muenchen.de/oneforall/images/icons/handy.gif
http://www.klinikum.uni-muenchen.de/oneforall/images/icons/lupe.gif
http://www.klinikum.uni-muenchen.de/oneforall/images/icons/mail.gif
http://www.klinikum.uni-muenchen.de/oneforall/images/icons/next.gif
http://www.klinikum.uni-muenchen.de/oneforall/images/icons/pdf.gif
http://www.klinikum.uni-muenchen.de/oneforall/images/icons/powerpoint.gif
http://www.klinikum.uni-muenchen.de/oneforall/images/icons/previous.gif
http://www.klinikum.uni-muenchen.de/oneforall/images/icons/square.gif
http://www.klinikum.uni-muenchen.de/oneforall/images/icons/square_border.gif
http://www.klinikum.uni-muenchen.de/oneforall/images/icons/square_small.gif
http://www.klinikum.uni-muenchen.de/oneforall/images/icons/telefon.gif
http://www.klinikum.uni-muenchen.de/oneforall/images/icons/toplink.gif
http://www.klinikum.uni-muenchen.de/oneforall/images/icons/uhr.gif
http://www.klinikum.uni-muenchen.de/oneforall/images/icons/video.gif
http://www.klinikum.uni-muenchen.de/oneforall/images/icons/word.gif
http://www.klinikum.uni-muenchen.de/oneforall/images/icons/www-intranet.gif
http://www.klinikum.uni-muenchen.de/oneforall/images/icons/www.gif
http://www.klinikum.uni-muenchen.de/oneforall/images/icons/zimmernummer.gif
http://www.klinikum.uni-muenchen.de/oneforall/images/icons/zip.gif
http://www.klinikum.uni-muenchen.de/oneforall/images/icons/zoom_in.gif
http://www.klinikum.uni-muenchen.de/oneforall/images/icons/zoom_out.gif
http://www.klinikum.uni-muenchen.de/oneforall/images/icons/zurueck.gif
Logo
Hinweis
Das Logo der bisherigen Webauftritte im WCMS Fiona des Klinikums entsprechen nicht immer der neuen Marke des LMU Klinikums. Aufgrund der anstehenden Migration der Auftritte werden die bisherigen Auftritte aber nicht mehr angepasst, sondern stellen den Stand vor Einführung der neuen Marke dar!
Das hier dargestellte Logo entspricht schon dem Logo der neuen Marke des LMU Klinikums und kann jederzeit von den Webredakteuren verwendet werden.
Das Logo des LMU Klinikums besteht aus dem Logo der LMU München und dem Klinikum-Schriftzug. Der Abstand zwischen den beiden Elementen ist festgelegt und darf keinesfalls verändert werden.
Einrichtungen des Klinikums
In der Hierarchie ist an oberster Stelle der Standort München, darunter steht die Bezeichnung der Klinik, Abteilung oder Station. Je nach Bedarf kann München auch weggelassen werden und ausschließlich die Klinik, Abteilung oder Station genannt werden.
Bilder
Der Einsatz von Bildern und Grafiken auf einer Webseite ist erlaubt und belebt diese zugleich. Allerdings sollte darauf geachtet werden, dass die Wirkung und Aussage von Bildern und Grafiken seriös und sachgemäß ist.
Achten Sie darauf, dass Bilder und Grafiken, die nicht dem Klinikum gehören, mit einer Quellangabe versehen werden müssen.
Auch sollten Bilder Bezug zum Text besitzen und die Aussagen des Textes unterstützen. Nähere Informationen erhalten Sie unter dem Menüpunkt "Inhalt" dieses Web Style Guides.
Neueste empirische Erkenntnisse mittels Eye-Tracking-Versuchen haben gezeigt, dass reine "Schmuckbilder", also Bilder ohne Bezug zum Text von den Webseitenbesuchern nicht beachtet werden.
Hinweis
Die Verwendung der Bilder der bisherigen Webauftritte im WCMS Fiona des Klinikums entspricht nicht der neuen Marke des LMU Klinikums. Aufgrund der anstehenden Migration der Auftritte werden die bisherigen Auftritte aber nicht mehr angepasst, sondern stellen den Stand vor Einführung der neuen Marke dar!
Normale Illustrationen, 3 Bildgrößen möglich
Breite: 130 Pixel
Höhe: 98 Pixel
Breite: 198 Pixel
Höhe: 134 Pixel
Breite: 260 Pixel
Höhe: 195 Pixel
Bilder bei Newsmeldungen in der Mediathek
Breite: 233 Pixel
Höhe: 155 Pixel
Automatische Verkleinerung des Bildes bei Einstellung des Layout 4 im News-Container
Bilder im Textblock (unterhalb der Vorlage Sammelbox)
Bildbreite für die Anzeige im Textfluss
Auswahl, mögliche Werte: 130 Pixel, 198 Pixel, 260 Pixel
Bilder im Servicebereich (rechts)
Breite: maximal 186 Pixel
Bilder im Servicebereich (rechts)
Bild wird automatisch in der Breite von 194 Pixel dargestellt.
Slideshow Bilder
Breite mit Servicebereich: 530 Pixel
Breite ohne Servicebereich: 735 Pixel
Auswahl Höhe, mögliche Werte: 200 Pixel, 300 Pixel, 400 Pixel, 500 Pixel, 600 Pixel
Slideshow Bilder mit Text
Bildbreite für die Anzeige im Textfluss
Auswahl, mögliche Werte: 130 Pixel, 198 Pixel, 260 Pixel und
Breite mit Servicebereich: 530 Pixel (kein Textumfluss möglich, Text steht unterhalb des Bildes)
Breite ohne Servicebereich: 735 Pixel (kein Textumfluss möglich, Text steht unterhalb des Bildes)
Höhe: bis max. Quadrat
Bildergalerien
max. 530 Pixel Breite (Sowohl Hochformat-, als auch Querformatdarstellung möglich)
Sonstige Größen
Darüber hinaus sind im Text auch abweichende Formate möglich, jedoch sollen Bilder grundsätzlich im Querformat eingesetzt werden (entspricht den normalen Sehgewohnheiten) und es sollen keine unterschiedlichen Bildgrößen auf einer HTML-Seite erscheinen. Aus rein technischen Gründen kann die Breite des Bildes 530 Pixel nicht übersteigen
Webtaugliche Formate
Im Web werden immer Rastergrafiken (auch Bitmapgrafiken bzw. Pixelgrafiken genannt) verwendet. Die folgende Übersicht zeigt unsere Empfehlung der gängigsten Dateiformate für das Web und deren Einsatzgebiet auf.
- Grafiken, Strichzeichnungen: Verwendung von gif, svg
- Bildern und Verläufen: Verwendung von jpeg, jpg
Wissenswertes zur Auflösung
Man unterscheidet zwischen absoluter und relativer Auflösung.
Relative Auflösung
Ist wichtig bei der Anzeige auf Bildschirmen und wird meist folgendermaßen angegeben:
- Punktdichte in dpi (dots per inch, engl. für Punkte pro Zoll),
- Pixeldichte in ppi (pixel per inch, engl. für Pixel pro Zoll),
- Zeilendichte in lpi (lines per inch, engl. für Zeilen pro Zoll)
Die relative Auflösung spielt im Web eine große Rolle, da Computerbildschirme in der Regel eine Auflösung von 300 dpi besitzen und eben nur soviel Punkte pro Zoll auf den Bildschirm "passen". Die Darstellungsgröße kann somit leicht festgelegt werden, ohne dass es zu automatischen Verkleinerungen durch die Browser kommen muss.
Absolute Auflösung
Spielt eine Rolle bei Digitalkamera-Angaben und somit keine Rolle im Web.
Beispiel: 6 Mega-Pixel = 6 Millionen Pixel = 2000 x 3000 Pixel
GIF-Format
Begrenzung auf 256 Farben, kleinere Animationen sind möglich
JPG-Format
Die Datei wird verlustbehaftet komprimiert, d.h. je kleiner die Datei (Byte), umso größer die Komprimierung. Die Qualität des Bildes kann darunter leiden. Animationen sind in diesem Format nicht möglich.
PNG-Format
Bilder werden verlustfrei komprimiert und die Qualität des Bildes bleibt erhalten. Allerdings ist die Datei deutlich größer, als wenn das gleiche Bild im JPG-Format gespeichert wird.
SVG-Format
Das SVG ist das vom WWW empfohlene Dateiformat zur Darstellung zweidimensionaler Vektorgrafiken und basiert auf XML. Bevorzugter Einsatzzweck ist das Logo.
Man unterscheidet u.a. die Farbmischmodelle bzw. Farbräume in RGB und CMYK. CMYK ist eher für den Printbereich von Bedeutung, RGB spielt insbesondere für die Bildschirmdarstellung eine Rolle. Deshalb muss darauf geachtet werden, dass die Bilder mit einem RGB-Profil erstellt, bearbeitet und für das Web abgespeichert werden. Betriebssysteme, Programme, Drucker und Bildschirme haben alle ein Farbprofil.
Bildurheberrecht
Verwertungsrechte
Der Begriff Verwertungsrecht stammt aus dem Urheberrecht. Es umschreibt die ausschließlich und absoluten Rechte des Urhebers eines Werkes es zu:
- Vervielfältigung
- Verbreitung
- Veröffentlichung
Persönlichkeitsrechte
Das Persönlichkeitsrecht ist ein Grundrecht, welches den Schutz der Persönlichkeit einer Person regelt.
Dazu zählt:
- Anerkennung der Urherberschaft
- Verbot von Entstellung
Rechte am eignen Bild
Das Recht am eigenen Bild oder auch Bildnisrecht genannt ist eine Ausprägung des allgemeinen Persönlichkeitsrecht. Es besagt, dass jeder Mensch grundsätzlich selbst darüber bestimmen darf, ob und in welchem Zusammenhang Bilder von ihm veröffentlicht werden. Ausnahmen:
- Bildnisse dürfen nur mit Einwilligung des Abgebildeten verbreitet oder öffentlich zur Schau gestellt werden
- Bei Entlohnung
- Nach dem Tod, nach Ablauf von 10 Jahren ohne Einwilligung der Angehörigen
Inhalt
Inhalte sind das wichtigste Gut bei den Webauftritten. Eine regelmäßige Aktualisierung der Inhalte und regelmäßige Meldungen zu Neuigkeiten und Aktivitäten führen dazu, dass die Webseite nicht nur ein statisches Aushängeschild ist, sondern dass regelmäßig Webseitenbesucher die Webseite besuchen und eine Bindung zu diesen entsteht.
Wie Inhalte
- dargestellt werden (bei Verwendung von Vorlagen)
- dargestellt werden sollen (bei Verwendung der Standard-Vorlagen mit freien Gestaltungsmöglichkeiten)
wird in diesem Teil des Web Style Guides erläutert.
Damit die Wiedererkennung bei Webauftritten im Altsystem WCMS Fiona im Corporate Design des LMU Klinikums gewährleistet war und diese von den Redakteuren des Klinikums einfach einzuhalten war, wurden die meisten Style-Angaben zentral gesteuert.
Hinweis
Auch wenn es an der einen oder anderen Stelle möglich ist, die Vorgaben des Corporate Design (CD) mit technischem Sachverstand zu umgehen, weisen wir darauf hin, dass Sie dies vermeiden sollten.
Dennoch können Fälle auftreten, die im jetzigen Stand des Projektfortschritts noch nicht erfasst sind. Helfen Sie in diesen Fällen mit und geben uns Feedback hierzu (eMail an WAD.support@med.uni-muenchen.de). Das Projekt befindet sich noch sehr in Entwicklung und die Bedürfnisse sind noch nicht vollständig bekannt bzw. erfasst.
Verwenden Sie soweit möglich Vorlagen, um eine optisch einheitliche Darstellung von bestimmten Inhalten wie z.B. News, Veranstaltungen, Linklisten etc. zu gewährleisten. Dies fördert die Wiedererkennung von Webseiten des LMU Klinikums und ist Bestandteil des Corporate Designs.
Die Vorlagen stehen jedem Redakteur des Autorensystems zur Verfügung. Mit Hilfe dieser kann der Redakteur Inhalte in Felder bzw. Eingabefenstern eingeben. Die Darstellung dieser Inhalte wird dann automatisch vom System geregelt (Templates).
Bei Fließtexten bedarf es an einiger Regeln, damit die Webseite einheitlich gestaltetet ist und empirisch gewonnenen Erkenntnissen zum Verhalten von Webseitenbesuchern gehorcht. Dies bedeutet:
- Fließtexte sollen linksbündig ausgerichtet sein.
- Auf Blocksatz sollte unbedingt verzichtet werden. Empirische Eye-Tracking Studien haben gezeigt, dass das Lesen im Web einem Scannen im stabilen "F-Muster" erfolgt. Zudem zeigen viele Browser Blocksätze nur mit großen Lücken, da keine automatische Trennung der Wörter stattfindet.
- Fließtexte (wie Überschriften) sollten in Normalschrift (Style-Vorgabe "Standard") also der vom System voreingestellten Schriften geschrieben werden. Der Redakteur muss in dieser Hinsicht nichts einstellen. Um einzelne Begriffe hervorzuheben können die Auszeichnungen "Fett" und Kursiv" verwendet werden.
- Zum Auszeichnen einzelner Begriffe ist keine weitere Farbe erlaubt. Die Auszeichnung mit Farbe ist nur Links vorbehalten und vom System auch einheitlich in einer Farbe vorgegeben.
- Auf Unterstreichungen von einzelnen Begriffen und Sätzen sollte verzichtet werden, da dies im Web als Kennzeichnung von Links bekannt (geworden) ist.
- Für die Darstellung von Aufzählungen sollten Gliederungspunkte verwendet werden. Dies ist ein wichtiges Stilmittel bei der Erstellung von Webtexten (unterstützt das Scannen im stabilen F-Muster).
Überschriften im Inhaltsbereich können den Fließtext optisch auflockern und ihn inhaltlich gliedern. Die Überschriften unterscheiden sich in Größe und Farbe. Auch der Abstand sowohl vor, als auch nach der Überschrift ist voreingestellt.
Der Titel Ihrer Webseite wird vom System automatisch als Überschrift 1.Ordnung eingefügt.
Da Webtexte mehr gescannt als gelesen werden (im stabilen F-Muster) sollten Sie als Grundregel versuchen zumindest die Überschrift 2.Ordnung auf der Webseite unterzubringen. Zudem dürfte die 3.Ordnung für die Darstellung von Inhalten meist ausreichen.
Darüber hinaus stehen Ihnen noch weitere 2 Überschriften (also bis zur 5.Ordnung) zur Verfügung. Diese sollten jedoch nur im Ausnahmefall genutzt werden.
Überschrift 1. Ordnung
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Überschrift 2. Ordnung
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Überschrift 3. Ordnung
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Überschrift 4. Ordnung
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Überschrift 5. Ordnung
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Überschrift 6. Ordnung
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Erlaubter Einsatz
Der Einsatz von Tabellen sollte nach den Richtlinien der Barrierefreiheit ausschließlich nur dann stattfinden, wenn Daten tabellarisch dargestellt werden sollen.
Unerlaubter Einsatz
Für die Gestaltung von Texten und Bildern ist der Einsatz einer Tabelle heutzutage nicht mehr üblich, ja sogar verpönt und im obigen Sinne nicht mehr gesetzeskonform und zu unterlassen.
Möglichkeiten
- table class="classic"
- table class="edit"
- table class="edit_invers"
- table class="person"
- table class="publication"
- table class="linklist"
Es gibt zwei verschiedene Arten Gliederungspunkte aufzubauen: die Auflistung und die Aufzählung.
Gliederungspunkte bieten bei einer Seite mit langem Inhalt einen besseren Überblick und sind gut für die Orientierung. Insbesondere sind Gliederungspunkte gut geeignet, neueren empirischen Untersuchungen Rechnung zu tragen, die besagen, dass Webseitenbesucher mehr scannen als Lesen.
Auflistungen
- Listeneintrag
- Listeneintrag
- Listeneintrag
- Listeneintrag
- Listeneintrag
- Listeneintrag
- Listeneintrag
- Listeneintrag
- Listeneintrag
- Listeneintrag
- Listeneintrag
Aufzählungen
- Listeneintrag
- Listeneintrag
- Listeneintrag
- Listeneintrag
- Listeneintrag
- Listeneintrag
- Listeneintrag
- Listeneintrag
- Listeneintrag
- Listeneintrag
- Listeneintrag
Links werden im Web grundsätzlich farbig und unterstrichen dargestellt. Somit heben sie sich sowohl vom Fließtext, als auch von der gesamten Webseite hervor und sind damit für den Nutzer eindeutig erkennbar.
Das Autorensystem führt diese Auszeichnungen automatisch durch. Die Redakteure müssen die Links dann mit einem Alternativtext hinterlegen. Dieser soll darauf hinweisen, wohin der Link geht und aus Gründen der Usability - mit wenigen Ausnahmen - im gleichen Fenster geöffnet werden. Sollten Sie jedoch von dieser Ausnahme Gebrauch machen, bitten wir Sie den Suffix "(neues Fenster)", z.B. "Link zum Thema "Barrierefreiheit" auf den Seiten von Wikipedia (neues Fenter)", zu verwenden.
Bei der Vorlage Linkliste oder bei weiterführenden Links werden vor den Links automatisch Icons vorangestellt. So wird bei einem PDF das vorgesehene Icon automatisch angezeigt. Ebenso wird bei Linklisten die Größe der Datei mit aufgeführt. Beispiele (siehe Spickzettel)!
Der Einsatz von Bildern oder Grafiken im Inhaltsbereich ist ein Text unterstützendes Gestaltungsmittel.
Sie sollten darauf achten, dass die Aussage des Bildes den Inhaltstext unterstützt. Die sogenannten "Schmuckbilder" werden von Webseitenbesuchern nicht beachtet.
Hinweise zum Einbinden von Bildern:
- Der Textumfluss darf rechts aber auch links um das Bild gehen.
- Bilder zu zentrieren ist nicht erlaubt.
- um den Anforderungen der Barrierefreiheit gerecht zu werden, sollte bei jedem Bild ein Alternativtext angegeben werden.
- Sollten Sie Bilder verlinken, beachten Sie bitte die beim Menüpunkt Links gemachten Präfix-Vorschläge
- Beachten Sie auch die Vorgaben zu Bildgrößen und Bildformaten
- Denken Sie an die verschiedenen Bezugsquellen für Bilder (ohne Urheber- bzw. Persönlichkeitsrechte zu verletzen)
Beispiele
Umfluss rechtsseitig
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Umfluss linksseitig
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.