Unsere Website wird auf unterschiedlichen Endgeräten genutzt (Desktop, Tablet, Smartphone). Das Layout passt sich automatisch an die jeweilige Bildschirmgröße an. Man spricht dabei von responsivem Design. Damit Inhalte überall gut lesbar bleiben, ist bei der Pflege auf eine mobile-optimierte Darstellung zu achten.
Worauf Sie als Redakteur*in achten sollten:
- Kurze Absätze und klare Zwischenüberschriften nutzen
- Aufzählungen statt langer Textblöcke
- Bilder nur in sinnvoller Größe einbinden
- Links mit Klartext statt "hier klicken"
Best Practices:
✅ Gut: „Zur Studienberatung“ (aussagekräftiger Link) ❌ Schlecht: „Hier klicken“
✅ Gut: Kurze Absätze mit Zwischenüberschriften ❌ Schlecht: langer Fließtext ohne Struktur
✅ Gut: Bild mit beschreibendem Alt-Text ❌ Schlecht: Bild ohne Kontext oder zu große Datei
Tipp: Nutzen Sie vor dem
Veröffentlichen die Vorschau; über das Modul "Seiten ansehen" haben Sie die Möglichkeit, die Ansicht der Seite in verschiedenen Screengrößen zu simulieren.
Häufige Fragen und typische Darstellungsprobleme
„Meine Seite ist zu voll / zu leer“
Je nach Gerät und Auflösung werden Inhalte unterschiedlich dargestellt. Was auf einem großen Monitor ausgewogen wirkt, kann auf einem Smartphone plötzlich gedrückt oder überladen erscheinen – oder umgekehrt „leer“. Das ist ein normales Verhalten responsiver Webseiten.
Wichtig ist: Responsives Design sorgt nicht dafür, dass eine Seite auf jedem Gerät gleich schön aussieht – sondern dafür, dass sie auf allen Geräten bedienbar und verständlich bleibt.
Tipp: Ziehen Sie Ihr Browserfenster testweise größer oder kleiner, um die Darstellung zu simulieren. Prüfen Sie zusätzlich mobil über die Vorschaufunktion oder auf dem Smartphone.
„Meine Seite gefällt mir nicht“
Es kann passieren, dass Inhalte zwar vollständig sind, aber in keiner Auflösung „rund“ wirken. Oft hilft es, die Struktur zu überdenken:
- Müssen wirklich alle Inhalte auf einer einzigen Seite stehen?
- Lassen sich Inhalte gliedern oder in mehrere Unterseiten auslagern?
- Gibt es ein geeignetes Inhaltselement (z. B. Akkordeon/FAQ) für bessere Übersicht?
Zur Inspiration lohnt auch ein Blick auf andere Seiten innerhalb des Webauftritts. Bei Bedarf unterstützt die Webredaktion gerne persönlich.
„Wörter werden ungünstig getrennt“
Bei langen Begriffen oder kleineren Displays greift das TYPO3-System auf eine automatische Silbentrennung zurück. In der Regel funktioniert diese korrekt. Dennoch kann es vorkommen, dass z.B. in der Desktop-Ansicht oder in einem Card-Element ein langer Begriff zwar grammatikalisch richtig getrennt wird, dies aber unschön aussieht. Hier besteht in TYPO3 die Möglichkeit, einen sog. "bedingten Trennstrich" einzufügen, der dafür sorgt, dass an dieser Stelle eine bevorzugte Silbentrennung erfolgt. Ist die Silbentrennung aber nicht nötig, weil die Zeilenbreite ausreicht, wird der Trennstrich nicht mit angezeigt. Bitte vermeiden Sie in jedem Fall, Trennstriche händisch hinzuzufügen!
Sobald Sie ein Inhaltselement geöffnet haben, finden Sie die Funktion "bedingter Trennstrich". Um diesen zu setzen, navigieren Sie mit dem Cursor in dem Wort an die gewünschte Trennstelle und klicken dann auf "bedingter Trennstrich".
Diese Funktion können Sie in allen Contentelementen mit Textzeilen nutzen.