Checkliste

Verortung: Struktur

Eintragen des Einrichtungsnamen, der unterhalb des TU-Logos und im Browser-Tab angezeigt werden soll – Auswahl über den Bereich Struktur auf oberster Ebene www.xx.tu-darmstadt.de > Metadaten > Globale Eigenschaften > Einrichtung, entweder aus Datenquellen (Kontakte > Einrichtungen) oder manuell.

Metadaten – Eingaben

Verortung: Struktur

Wählen Sie eine Auftrittsfarbe für den Webauftritt aus – Auswahl über den Bereich Struktur auf oberster Ebene www.xx.tu-darmstadt.de > Metadaten > nur Responsive Design > Theme.

Metadaten – Eingaben
Farbpalette des Responsive Designs

Verortung: Medien

Ist die Auflösung der Bilder, die Sie in Ihrem Webauftritt verwenden, für das responsive Design ausreichend? Falls nicht, tauschen Sie die entsprechenden Bilder bitte aus.
Medium mit neuer Version austauschen
Hinweise zur Größe beachten: Medien in FirstSpirit hochladen

Sind die Copyright-Informationen (Name des Fotografen/in, Bildrechte) bei den einzelnen Bildern, die Sie in Ihrem Webauftritt verwenden, eingetragen?
Eintragen der Informationen über das Bild (Bereich Medien) > Metadaten > Bildrechte/Copyright. Hierfür ist es ggf. erforderlich Metadaten zuerst neu zu setzen.
Metadaten – Überblick und Verwendung
Metadaten – Eingaben

Verortung: Medien

Sollten Sie in Ihrem Webauftritt ein Sublogo verwenden, so prüfen Sie bitte, ob das Sublogo, das im Bereich Medien hierfür hochgeladen wurde, die erforderliche Auflösung und das Seitenverhältnis für Sublogos im responsiven Design erfüllt. Falls nicht, so passen Sie das Sublogo den entsprechenden Voraussetzungen bitte an.

Sublogo

Verortung: Inhalte/Struktur

Soll Ihr Webauftritt nur einsprachig (Deutsch oder Englisch) oder zweisprachig (Deutsch und Englisch) angeboten werden?

Einsprachiger Auftritt: Bitte sorgen Sie dafür, dass die Inhalte auf Seiten (Bereich Inhalte) sich in dem entsprechenden Sprachreiter befinden (also deutsche Inhalte im deutschen und nicht im englischen Sprachreiter) und der oberste Sprachreiter der Sprache, die Sie nicht verwenden, auf der jeweiligen Inhaltsseite deaktiviert ist. Einzelne Absätze brauchen Sie hierbei nicht zu beachten.
Tipps für einen englischsprachigen Webauftritt

Zweisprachiger Auftritt: Bitte sorgen Sie dafür, dass bei übersetzten Seiten beide Sprachreiter (Deutsch und Englisch) auf jeder Inhaltsseite aktiviert sind. Achten Sie auch bitte darauf, dass die Menünamen in der Struktur übersetzt vorliegen.
Tipps: Übersetzen des Webauftritts

Bitte teilen Sie uns bei ihrem Auftrag zur Abnahme und Onlineschaltung mit, ob der Auftritt einsprachig oder zweisprachig online gehen soll.

Verortung: Inhalte

Bitte füllen Sie das Impressum über die bereits vorliegende Inhaltsseite Impressum aus.
Absatzvorlage: Impressum

Hinweis: Dieses ist bereits in die Struktur und mit dem Link im Footer der Webseite verknüpft. Sie müssen hier nichts weiter einstellen.

Verortung: Struktur

Sollten Sie eigene Social-Media-Kanäle betreiben und diese im Footer des Webauftritts anzeigen lassen wollen, so lassen sich diese über den Bereich Struktur auf oberster Ebene www.xx.tu-darmstadt.de > Metadaten > nur Responsive Design > Footer eintragen.

Metadaten – Eingaben

Da die Referenznamen der Menüebenen (Ordner) sich unmittelbar auf die URL (Adresse) einer Webseite auswirken, ist es wichtig, dass diese bereits beim Anlegen zweckdienlich gewählt werden, d.h. verwenden Sie bitte klare Begriffe und vermeiden Sie Referenznamen mit Indexnummern (z.B. studium_5). Statt Indexnummern empfehlen wir Kürzel, z.B. des Fachgebiets, zu verwenden (z.B. studium_naw).
Hinweis: Diese Indexnummern können auch automatisch durch sogenannte Hochzählung entstehen. Wenn ein Name bei Anlage bereits vergeben ist, zählt FirstSpirit automatisch hoch, um dennoch den gewünschten Namen zu realisieren.

Referenznamen von Menüordnern können noch vor der Onlineschaltung geändert werden, spätere Änderungen sind problematisch und sollten daher vermieden werden.

Hinweise bei Nutzung einer parallelen Struktur für den Umzug in das responsive Design:
Bei bereits vorliegenden Auftritten ist es in Abstimmung mit dem Webteam möglich, bei den Umzugsarbeiten und vor der Onlineschaltung vorliegende, „alte“ Referenznamen für die „neuen“, responsiven Menüordner wiederzuverwenden.

Neue Menüebene anlegen
Referenznamen
Referenznamen ändern

Verwenden Sie klare, prägnante und kurze Namen zur Benennung von Menüs: Die nutzende Person soll direkt verstehen, welche Inhalte auf der Seite zu finden sind. Vermeiden Sie bitte zudem lange Menünamen, die sich in der Menüdarstellung über mehrere Zeilen erstrecken. Bei Bedarf haben Sie immer die Möglichkeit, die Seitenüberschrift in der Bühne umfangreicher als den Menünamen zu gestalten.

Hinweise zu Namen: Neue Menüebene anlegen

Die Anzahl der dargestellten Hauptmenüpunkte ist im responsiven Design auf vier begrenzt – sollten in ihrem bisherigen Auftritt mehr als vier Hauptmenüpunkte eingesetzt haben, so ist die Anzahl dieser zu beschränken.

Weitere Informationen und Hinweise zu einer zweckdienlichen Menüstruktur und Menünavigation finden Sie in den Folien der Aufbauschulung (wird in neuem Tab geöffnet) (Teil 2, Kapitel 1).

Navigation auf den Webseiten

Eine schlanke Menüführung begünstigt bei responsiven Webauftritten eine gute Benutzbarkeit. Prüfen Sie kritisch, ob das Menü und die damit verknüpfte Seite wirklich für den Auftritt notwendig sind – lassen sich zwei oder mehrere Menüs/Seiten eventuell in ein Menü zusammenführen?

Best Practice Beispiele

Vermeiden Sie für jede Seite (zum Beispiel bei Forschungsprojekten oder Lehrveranstaltungen) ein eigenes Untermenü. Es kann hier sinnvoller sein, die einzelnen Seiten nur als jeweilige Seitenreferenz in dem übergeordneten Menü unterzubringen und über eine Übersichtsseite in dem Menü diese aufzuführen und zu verlinken.

Vermeiden Sie für sämtliche Mitarbeitenden ein eigenes Untermenü mit eigener (Detail)Seite anzulegen. Eine zentrale Mitarbeiterlistenseite, über die die Detailseiten der einzelnen Personen direkt aufrufbar sind, ist häufig der bessere Weg. Hier empfiehlt es sich zudem, automatisch generierte Detailseiten zu verwenden, die über den Kontaktdatensatz der Person inhaltlich bereitgestellt werden (vgl. D. Kontaktangaben).

Das Design-Konzept sieht die Verortung der Startseite als Seitenreferenz direkt in der www-Ebene (also unter www.xx.tu-darmstadt.de) innerhalb der Struktur Ihres Auftritts vor.
Hierfür gibt es mehrere automatisch greifende Funktionen, die eine Navigation zur Startseite erlauben:

• Desktop-Variante: Link unterhalb der Athene mit Ihrem Einrichtungsnamen und beim Scrollen der Seite oben rechts über das Home-Symbol.
• In der mobilen Ansicht direkt das Home-Symbol im Hamburger-Menü.
• Außerdem über den Brotkrumenpfad auf Verteiler- und Standardseiten.

Das Design erfordert daher keine Anlage der Startseite des Auftritts in einer Menüebene.

Sollte es dennoch Ihr ausdrücklicher Wunsch sein, die Startseite über das Menü erreichbar zu machen, empfehlen wir dies als Startseite („Übersicht“) direkt in der ersten Menüebene (bspw. „Fachgebiet XY“) zu platzieren.

Prüfen Sie, ob die Übersichtsseite (Startseite innerhalb einer Haupt- oder Untermenüstruktur) einen inhaltlichen Mehrwert für die nutzende Person hat (vgl. C. Seitengestaltung). Falls dies nicht der Fall ist, so verzichten Sie lieber auf diese Übersichtsseite.

Vermeiden Sie unbedingt, dass eine einzelne Seite mehrfach in der Menünavigation verknüpft ist. Eine Seite hat immer nur eine Menüheimat, kann aber beliebig oft innerhalb der Webauftritts von Seiten aus verlinkt werden (Stichwort „Content-Navigation“).

Vermeiden Sie zudem, dass Menüs auf externe Seiten verlinken und die nutzende Person somit aus ihrem Webauftritt in einen anderen Webauftritt hinausführen.
Ein Link zu einer externen Seite gehört immer auf eine Webseite – als Link oder als Teaser – aber nicht in einen Menüpunkt.

Im Hinblick auf das heutige mobile Surfverhalten (verstärktes Scrollen auf mobilen Geräten) prüfen Sie, ob die einzelne Seite inhaltlich wirklich notwendig ist. Lässt sich die Seite eventuell zweckdienlich in eine andere Seite integrieren, lassen sich mehrere kurze Seiten vielleicht in einer Seite zusammenführen? Durch neue Absatzfunktionen wie Akkordeon (eingeklappter Absatz) und Absatzelemente, wie Absatzgruppen, lassen sich Inhalte gut auf einer einzelnen Webseite verdichten.

Absatzgruppe

Prüfen Sie, ob Sie den passenden Seitentyp im Hinblick auf die inhaltliche Funktion der Seite in ihrem Webauftritt verwenden. Im responsiven Design stehen Ihnen für die Erstellung von Webseiten die drei Seitenvorlagen Startseite, Verteilerseite und Standardseite zu Verfügung (vgl. Elementekatalog (wird in neuem Tab geöffnet), 7A-C). Bitte verwenden Sie den Seitentyp Startseite nur einmal in Ihrem Auftritt.

Standardseitentypen:
Standardseite
Startseite
Verteilerseite

Jede Webseite weist folgende Bühnenelemente auf (vgl. Elementekatalog (wird in neuem Tab geöffnet), 9A bzw. Erläuterungen zu den einzelnen Seitentypen), die bitte korrekt auszufüllen sind.
Beachten Sie bitte, dass manche der Elemente, abhängig vom gewählten Seitentyp, ein Pflichtfeld sind und somit zu befüllen sind, bevor die Freigabe möglich ist.

• Bühnenbild
  Sofern möglich, sollten Sie für jede Seite ein optisch passendes und ansprechendes Bühnenbild verwenden. Bitte vermeiden Sie es, ein identisches Bühnenbild für alle Seiten ihres Auftritts zu nutzen. Sollten Sie kein Bühnenbild verwenden wollen, so wird stattdessen eine graue Fläche dargestellt (nur bei Standardseite möglich).
• Seitenüberschrift
  Die Seitenüberschrift ist die Hauptüberschrift einer Seite. Sie ist sowohl für Nutzende als auch für Suchmaschinen ein wichtiges Element und ist daher unbedingt auszufüllen. Die verwendete Überschrift sollte nur einmal auf einer Webseite vorkommen. Verwenden Sie den Seitentyp Startseite mit einem oder mehreren Bildern (Slider), so achten Sie bitte darauf, dass auf den Bildern die Seitenüberschriften eingetragen sind.
• Leadtext
  Der Leadtext wird am Anfang einer Seite platziert und hebt sich optisch leicht von den restlichen Texten auf der Webseite ab. Hier wird kurz und prägnant der Inhalt einer Seite zusammengefasst oder eine kurze Ansprache oder Einleitung aufgeführt. Der Leadtext erleichtert Nutzenden die Einordnung der Seite und ist daher auszufüllen. Optional können eine zusätzliche Überschrift sowie ein Link am Ende des Leadtextes gesetzt werden. Bitte achten Sie darauf, dass die Überschrift des Leadtextes und die Seitenüberschrift nicht identisch sind.
• Hinweisbox
  Die Nutzung der Hinweisbox ist optional – mit diesem Element können einzelne Informationen prominent im Bühnenbereich einer Seite hervorgehoben werden. Das können ausgewählte Veranstaltungen oder allgemeine Hinweise (optional unter Angabe eines Zeitfensters) sein. Ein Link zu einer Unterseite kann optional gesetzt werden. Es empfiehlt sich, die Hinweis-Box aktuell zu halten und regelmäßig mit neuen Informationen zu bespielen.
• Seiteninformationen
  Das Feld Seiteninformationen ist nicht zwingend auszufüllen. Bitte prüfen Sie aber, ob der vorangehende Text im Browser-Tab sinnvoll und gewünscht ist. Falls nicht, können Sie diesen über das Feld Seiteninformationen korrigieren.

Weitere Informationen finden Sie bei den Erläuterungen der einzelnen Standardseitentypen:
Standardseite
Startseite
Verteilerseite

Prüfen Sie allgemein, ob die auf der Webseite dargestellten Informationen für Nutzende bzw. die angedachte Zielgruppe gut strukturiert und erschließbar und optisch ansprechend gestaltet sind – verlieren Sie dabei nie aus den Augen, dass eine Webseite von den Inhalten und ihrer Gestaltung die Bedürfnisse der Nutzenden widerspiegeln soll und nicht die organisatorische Struktur einer Institution; vgl. Folien der Aufbauschulung (wird in neuem Tab geöffnet) (Teil 2, Kapitel 3). Je nach Seitentyp sollten folgende Punkte hierbei mitberücksichtigt werden:

1. Startseite
   Erfüllt die Startseite die Voraussetzungen für eine gelungene Startseite, werden die zu Verfügung stehenden Absatzelemente zweckdienlich eingesetzt?
   • Seite optisch ansprechend (Bühnenbild/Slider und andere Bildelemente).
   • Neben ersten Informationen (Selbstdarstellung der Institution) ist auch Verteilerfunktion und Navigation zu wichtigen Angebotsseiten des Webauftritts über Teaser gewährleistet.
   • Dynamischer, aktueller Inhalt (News, Veranstaltungen, Hinweisbox) wird angeboten, damit Lesende regelmäßig die Startseite besuchen.
2.  
3. Verteilerseite
   Erfüllt die Verteiler-/Überblicksseite die Voraussetzungen für gelungene Verteilerseiten, werden die zu Verfügung stehenden Absatzelemente zweckdienlich eingesetzt?
   • Verteilerfunktion und Navigation zu wichtigen Angebotsseiten über Teaser unter Berücksichtigung der relevanten Zielgruppe(n), die über die Seite angesprochen werden soll, ist gewährleistet.
4.  
5. Standardseite
   Standardseite können für unterschiedliche Zwecke eingesetzt werden (Kontaktliste, Newsliste, Anfahrtsbeschreibung, Informationen zu einem Projekt, Online-Formular usw.; auch eine Mischung ist hier möglich). Prüfen Sie, ob die Standardseite den angedachten Einsatzzweck erfüllt und die zu Verfügung stehenden Absatzelemente hierzu zweckdienlich eingesetzt worden sind.
   Sind auch die Marginalienspalte und der Service-Bereich sinnvoll eingesetzt worden?

Weitere Informationen zu den verwendbaren Elementen (bzw. Absatzvorlagen) finden Sie auch im Elementekatalog (wird in neuem Tab geöffnet).

Prüfen Sie ob die gesetzten Links, sowohl innerhalb des Auftritts als auch auf externe Seiten, funktionieren. Bitte halten Sie beim Setzen von Links folgende Konventionen ein:

• Vermeiden Sie ausgeschriebene Hyperlinks und Links auf „hier“, sondern schreiben Sie aus Gründen der Benutzbarkeit und für die Suchmaschinen-Optimierung immer aus, auf was Sie verlinken.
  Beispiel: Nicht www.chemie.tu-darmstadt.de, sondern „Fachbereich Chemie“.
• Füllen Sie bei Links für die Gewährleistung der Barrierefreiheit bitte das Kommentarfeld aus.

Links im Texteditor

Nutzen Sie die Funktionen des Texteditors und Darstellungsoptionen um Inhalte strukturiert und mit Verlinkungen darzustellen.

• Überschriftenhierarchie
  Die Größe der Überschrift eines Absatzes lässt sich in den meisten Fällen in den Darstellungsoptionen anpassen.
• Absatzformatierung
  Hiermit haben Sie weitere Möglichkeiten bspw. Überschriften innerhalb eines Absatzes zu nutzen.
• Textformatierung
  Neben einfachen Formatierungen wie fett oder kursiv, lassen sich auch Formatierungen wählen, welche die gewählten Textteile automatisch mit einer Verlinkung ausstatten. Nutzen Sie z.B.:
  • E-Mail-Adresse
  • Telefonnummer
  • FAX-Nummer
• Links
  Diverse Möglichkeiten der Einbettung von Verlinkungen.

Texteditor verwenden

Prüfen Sie, ob die Kontaktangaben der Mitarbeitenden ihrer Institution im Bereich Datenquellen in den jeweiligen Datensätzen richtig eingetragen sind. Insbesondere wenn Sie automatisierte Mitarbeiterlisten einsetzen, ist es wichtig, dass bei einzelnen Personen die entsprechende Einrichtung und gewünschten Gruppen/Untergruppen eingetragen sind.

Sollten Sie manuell angelegte Detailseiten verwenden, so ist es wichtig, dass Sie im jeweiligen Datensatz unter dem Reiter Links > Eigene Detailseite den Datensatz mit der entsprechenden Seitenreferenz aus der Struktur verknüpfen.

Sollten Sie automatisch generierte Detailseiten verwenden, was das Webteam empfiehlt, so können Sie im Reiter Zusätzliche Informationen die weiteren Inhalte eintragen, die auf der Detailseite der jeweiligen Person angezeigt werden sollen.

Die Einrichtung der notwendigen Vorlagenseite bei automatisch generierten Detailseiten erfolgt durch das Webteam.

Kontakt erstellen (Eingaben wie bspw. Links detailliert erläutert)
Kontaktliste
Kontakt-Detailseite (automatisch generiert)

Verortung: Struktur

Auf Verteiler- und Standardseiten kann ein Kontakt-Button rechts über der Marginalienspalte angezeigt werden. Mit Klick darauf öffnet sich ein Modal mit den hinterlegten Kontaktdaten.

Die Zuweisung von Kontakten zu diesem Button erfolgt über den Bereich Struktur unter Metadaten > Globale Eigenschaften > Kontakt.

Hinweis: Beachten Sie bitte insbesondere in diesem Zusammenhang die Vererbung von Metadaten.

Metadaten – Überblick und Verwendung
Metadaten – Eingaben

Sollten Ihre automatisch generierten Kontakt-Detailseiten eine Dopplung der Marginalienspalte oder sonstige Fehler im Design aufweisen, wird hier sehr wahrscheinlich noch die klassische Vorlage verwendet.
Bitte melden Sie sich in diesem Fall über das Kontaktformular mit FirstSpirit Link zur ursprünglichen Detailseite im Strukturbereich an uns und wir passen dies gerne für Sie an.

Zum Teaser gab es mehrere Veränderungen, die nun auch für die Erstellung neuer News berücksichtigt werden sollten.

• Links werden nicht mehr als solche im Teaser abgebildet, sondern als normaler Text.
• Der in einer Liste angezeigte Inhalt hat sich reduziert, so dass lange Teaser nicht komplett abgebildet werden.
  • In diesem Fall empfehlen wir die Aktivierung der Option „Teaser auf Detailseite als Leadtext ausgeben?“

Sollten Ihre automatisch generierten News-Detailseiten eine Dopplung der Marginalienspalte oder sonstige Fehler im Design aufweisen, wird hier sehr wahrscheinlich noch die klassische Vorlage verwendet.
Bitte melden Sie sich in diesem Fall über das Kontaktformular mit FirstSpirit Link zur ursprünglichen Detailseite im Strukturbereich an uns und wir passen dies gerne für Sie an.

Beachten Sie bitte, dass nur dann eine News-Detailseite erzeugt wird, wenn entweder die unter E.1. genannte Option aktiviert wurde, oder aber im Feld „Text“ oder den „weiteren Absätzen“ Inhalte vorliegen.