Zum Navigationspfad Unterseiten von „Arbeiten mit TYPO3“ Zur Navigation Zum Schnellzugriff Zum Fuß der Seite mit weiteren Services
Zum Inhalt
TYPO3 Doku Auftritt
IT & Medien Centrum der TU Dortmund
ITMC Gebäude © Saskia Molewicz ​/​ TU Dortmund

Responsive Design

Je nachdem, auf welchem Endgerät Sie die Website der TU Dortmund öffnen, sehen die einzelnen Seiten unterschiedlich aus. Dafür sorgt das sogenannte „Responsive Design“, auf das bei der Gestaltung der Website geachtet wurde.

Was bedeutet Responsive Design?

Das gesamte Layout der Website passt sich an die Bildschirmgröße Ihres Geräts an. Dabei wird grob unterschieden zwischen Desktop-PCs, Tablets/Laptops sowie Smartphones.

Beispiel: Textkacheln, die auf dem Desktop-PC noch nebeneinander standen, werden auf dem Smartphone untereinander angezeigt.

Wie sich die Inhalte auf unterschiedlichen Bildschirmgrößen anordnen, können Sie nicht beeinflussen. Dies ist fest im Layout der Website verankert. 

Skizzenhafte Darstellung einer Website auf einem Desktop-Monitor und auf einem Smartphone. © Tobias Bialdyga​/​Google Flow

Welche Auswirkungen hat dies auf meine redaktionelle Arbeit?

  • Sämtliche Texte brechen automatisch um. Vermeiden Sie unbedingt manuelle Zeilenumbrüche.
  • Worttrennungen werden ebenfalls automatisch vom jeweiligen Browser vorgenommen. Vermeiden Sie unbedingt manuelle Worttrennungen.
  • Da sämtliche Elemente ihre Breite dynamisch je nach Bildschirmgröße ändern, verändert sich die Zeilenanzahl von Texten ebenso dynamisch. Das Anpassen von Textlängen, damit diese bündig mit nebenstehenden Elementen abschließen, wird somit obsolet.  
  • Bilder werden automatisch so skaliert, dass sie den jeweiligen Bildbereich komplett ausfüllen.
  • Das System erzeugt automatisch Bildausschnitte für die oben genannten Bildschirmgrößen (Desktop, Tablet/Laptop, Smartphone). Bildausschnitte können Sie per Bildeditor anpassen.

Fazit: Konzentrieren Sie sich bei der Einbindung von Texten auf die korrekte Formatierung von Überschriften (z. B. als Überschrift H1, H2, H3 usw.) und verständlichen Inhalt. Bei Bildern können Sie auf Wunsch die Bildausschnitte anpassen. Den Rest übernimmt das Layout der Website automatisch.
 

Wie kann ich meine Website bei unterschiedlichen Bildschirmgrößen testen?

Im Browser selbst: Ziehen Sie einfach das Browserfenster so schmal wie möglich und laden Sie die Seite anschließend einmal neu. Damit simulieren Sie die Anzeige auf einem Smartphone. Eine mittlere Browserbreite simuliert die Anzeige auf einem Tablet.

Im TYPO3-Backend: Sie können das Modul „Anzeige“ nutzen, um verschiedene Bildschirmgrößen zu simulieren.

Per Gerät: Sie können die Website natürlich auch mit einem jeweils passenden Gerät direkt aufrufen und überprüfen.