Grundsätzlich setzt das Webdesign der TUHH - im Gegensatz zum alten, bis 2022 gültigen Design - stark auf Einheitlichkeit, bietet mehr vorgefertigte Funktionen, aber dadurch auch weniger Möglichkeiten, Ihren Webauftritt individuell zu gestalten. Farben und Schriften sind nicht veränderbar, ebenso der Header und Footerbereich. Auch Bilder werden in festen Größen dargestellt. Es gibt mehr Inhaltselemente als früher; Stylings wie Buttons, Akkordeons, und Infoboxen werden nicht mehr im Rich Text Editor erstellt, sondern mit eigenen Inhaltselementen. Das Layout sieht keine Randspalte mehr vor.
Wenn Sie bereits das alte TUHH-Design nutzen und nun auf das neue Design umstellen möchten, melden Sie sich per E-Mail an webmaster[at]tuhh(dot)de. Es sollte mindestens der Chefredakteur/die Chefredakteurin des Webauftritts in cc dieser Mail sein, idealerweise auch der/die DVB und die Institutsleitung.
Wir vereinbaren dann mit Ihnen einen Termin zu Designsumstellung. Bitte teilen Sie uns Ihren Wunschtermin mit. Für die Umstellung sollten Sie einen Zeitpunkt wählen, zu dem Sie ausreichend Ressourcen haben, den Relaunch Ihres Webauftritts durchzuführen. Dieser geschieht im Live-System und ist mit einigem redaktionellen Aufwand von Ihrer Seite verbunden. Was genau die To Dos sind, beschreiben wir weiter unten auf dieser Seite. Andere Institute geben den Zeitaufwand mit ca. zwei Arbeitstagen an.
Sie haben zwei Möglichkeiten für den Termin: Entweder aktivieren wir das neue Webdesign auf Ihrem Webauftritt und Sie führend anschließend alle weiteren Arbeiten selbstständig durch. Den Termin dafür können Sie flexibel selbst wählen, die Umstellung dauert nur ca. 15 Minuten.
Die zweite Möglichkeit ist, dass wir das Design zusammen in einem Zoom-Termin umstellen, ca. 1,5-2 Stunden Dauer, und die ersten Nacharbeiten zusammen machen. Wenn Sie diesen Weg gehen wollen, schlagen Sie gern ebenfalls einen Termin vor, wir brauchen dafür aber ein bisschen mehr Vorlauf, um einen längeren Termin bei uns einzuplanen.
Zur Vorbereitung empfehlen wir Ihnen, das neue Design für Ihren Webauftritt auf unserem Testserver auszuprobieren. Bitte melden Sie sich per Mail an webmaster[at]tuhh(dot)de wenn Sie den Testserver nutzen wollen. Bitte beachten Sie: Es können keine Inhalte oder Seiten vom Testserver ystem in das Livesystem übertragen werden. Das Testsystem ist eine reine "Spielwiese"
Generell empfehlen wir Ihnen zudem, vor dem Designswechsel gründlich in Ihrem Webauftritt aufzuräumen. Löschen Sie nicht mehr benötigte Seiten und Inhalte. Machen Sie sich Gedanken über die Struktur, soll diese so bleiben? Suchen Sie die Original-Dateien sehr kleiner Bilder, die Sie behalten wollen, heraus. Binden Sie Bilder korrekt ein und stellen Sie evtl. noch benutzte Text+Media Elemente auf Text+Bild um. Zudem sollten Sie individuelle HTML-Lösungen abbauen.
Im Folgenden erläutern wir, wie Sie Ihren Instituts-Webauftritt im neuen Design einrichten. Dabei weisen wir mehrfach auf die Constants-Dateien (auch genannt Konfigurationsdateien) hin. Diese Dateien finden Sie in der
Die Header-Navigation lehnt sich an die der zentralen TU-Website an, ist jedoch zweizeilig aufgebaut, um in der oberen Zeile Platz für Ihr Logo und Ihren Website- bzw. Institutstitel zu schaffen.
1) Ihr Institutslogo sollte bereits in der Filelist im Ordner layout2021 übernommen worden sein. Wenn nicht hinterlegen Sie das Logo bitte als svg-Datei unter dem Titel inst_logo.svg in ebendiesem Ordner. Die Größe des Logos können Sie beeinflussen, indem Sie das Zeichen "#" vor dem Wert "# header.logo.size" in der constants.txt-Datei entfernen und den Wert zu "medium" oder "large" ändern.
2) Den Instituts-/Website-Titel geben Sie in der constants.txt unter "header.title" ein. Bei unterschiedlichen Titeln auf Deutsch und Englisch kopieren Sie den Absatz bitte in die constants.de.txt bzw. constants.en.txt Dateien und hinterlegen dort die jeweiligen Titel.
3) Die Hauptmenü-Punkte (Menü-Ebene 1) werden in Zeile 2 des Headers angezeigt. Dies geschieht in Typo3 automatisch aus der Struktur des Seitenbaums heraus. Sie haben Platz für ca. acht Hauptnavigationspunkte, je nach Wortlänge. Versuchen Sie, die Formulierungen möglichst kurz und prägnant zu halten, sodass die Hauptnavigationsleiste idealerweise einzeilig dargestellt wird. Nach dem Designwechsel werden auch frühere Footer-Links in der Hauptmenü-Leiste angezeigt. Diese müssen Sie dann in den Footer verschieben - s.u.
4) On-Klick öffnet sich die Navigation, auch Mega-Menü genannt. Sie schließt sich wieder bei Klick auf den Menüpunkt oder auch, wen Sie irgendwo hin klicken.
5) Die Menü-Ebenen 2 und 3 erscheinen automatisch aus dem Seitenbaum heraus im Mega-Menü. Mit dem Menu Seperator legen Sie fest, an welcher Stelle die Spalten getrennt werden - siehe unten. Tiefere Menü-Ebenen (4-6) erscheinen unten rechts am Bildschirmrand im aufklappbaren Mehr-Menü.
6) Mit der Menü-Teaserbox können Sie besondere Inhalte highlighten. Sie erstellen diese in der List View der Seite des entsprechenden Hauptnavigations-Punkts - siehe unten.
7) Der Sprachumschalter ist automatisch aktiviert, sobald Inhalte zweisprachig vorliegen.
8) Die Menü-Icons erscheinen, sobald Sie in der constants.txt Datei im Absatz " Header Action Buttons" die Page IDs der Webseiten hinterlegen, zu denen diese Icons führen sollen. Sie können alle Icons nutzen oder nur einzelne. Die Icons symbolisieren einen Kalender (header.action.calendar), einen Standort (header.action.place) sowie einen Login-Bereich (header.action.login).
9) Die Suche basiert wie zuvor auch auf dem Google Custom Search Engine und durchsucht nur Ihren jeweiligen Webauftritt. Bei neuen Webauftritten dauert es etwas, bis Google diese indexiert hat - erst danach liefert die Suche Ergebnisse.
Mit dem Menu Seperator legen Sie fest, an welcher Stelle die Spalten innerhalb des ausklappbaren Bereichs der Headernavigation getrennt werden. Ziehen Sie diesen einfach an die gewünschte Stelle im Seitenbaum. Die Trennung erfolgt innerhalb der Menüebene 2.
Die Menü-Teaserbox fügen Sie hinzu, indem Sie auf der Seite des entsprechenden Hauptnavigationspunktes - im Beispiel "Über uns" die Listenansicht auswählen und über das Plus-Symbol eine Menü-Teaserbox hinzufügen.
1) Sie können eine blaue Illustration (illu) auswählen oder ein eigenes Foto hinterlegen (image).
2) Hinterlegen Sie den Link zu dem die Box führen soll.
3)/4) Geben Sie Titel und optional Text der Box an.
5) Hier können Sie das unter 1) angesprochene Foto hochladen.
6) Hier wählen Sie die Position innerhalb des Hauptmenü-Bereich. Sie können auch mehrere Boxen hinterlegen und wählen dann hier, welche rechts und welche links angezeigt werden soll.
7) Hier wählen Sie ob die Box im deutschen oder englischen Menü angezeigt werden soll.
1)/2) Das TUHH-Logo sowie die Überschrift TU Hamburg erscheinen automatisch und können nicht angepasst werden.
3) Den Titel sowie die Adresse und Kontaktdaten pflegen Sie in den Constants-Dateien. Alles was sich auf DE und EN nicht unterscheidet in constants.txt, der Titel in constants.de.txt bzw constants.en.txt. Sie können die entsprechenden Abschnitte auch in die jeweils anderen Dateien kopieren.
4) Die Links im Footer richten Sie ein, indem Sie die Seiten, zu den verlinkt werden soll, in die Systemordner "Footer links" und "Footer rechts" schieben. Links und rechts geben die zwei Spalten an. Hier müssen mindestens die Seiten Impressum und Datenschutz erscheinen - letztere darf eine Weiterleitung auf www.tuhh.de/tuhh/datenschutz sein, wenn Sie sich auf unser TYPO3-Standard-Angebot beschränken. Für individuelle Lösungen müssen Sie die Datenschutzerklärung selbst verfassen.
5) Wenn Sie Social Media Accounts pflegen, setzen Sie in der constants.txt Datei den Wert "footer.social" auf 1. Geben Sie dann die Links zu den jeweiligen Social-Media-Kanälen unter dem Abschnitt "Social Media Buttons in Footer" an. Bleibt ein Link leer, erscheint das entsprechende Symbol nicht. Möglich sind aktuell Facebook, Twitter/X, Instagram, Youtube und LinkedIn.
6) Um Partner-Logos zu hinterlegen, fügen Sie auf der Wurzelseite des Auftritts in der List-View über das Plus-Symbol "Partner" hinzu. Fügen Sie die Logos hinzu und verlinken Sie diese.
In den Constant-Dateien aktivieren Sie auch den Cookie-Banner, falls notwendig. Weitere Informationen dazu finden Sie im Bereich Datenschutz.
Folgende Bereiche sollten Sie nach der Umstellung Ihres Webauftritts auf das neue Design bearbeiten oder überprüfen: