To path indicator Subpages of “Working with TYPO3“ To navigation To quick access To footer with other services
To content
TYPO3 Documentation
IT & Media Centre of TU Dort­mund University
ITMC Building © Saskia Molewicz ​/​ TU Dortmund

Responsive Design

Depending on the device you use to access the TU Dortmund University website, the individual pages will look different. This is made possible by “responsive design,” which was taken into account when the website was designed.

What does "responsive design" mean?

The entire layout of the website adapts to the screen size of your device. A general distinction is made between desktop PCs, tablets/laptops, and smartphones.

Example: Text tiles that were displayed side by side on a desktop PC are displayed one below the other on a smartphone.

You cannot control how the content is arranged on different screen sizes. This is hard-coded into the website’s layout.

Sketchy representation of a website on a desktop monitor and on a smartphone. © Tobias Bialdyga​/​Google Flow

How does this affect my editorial work?

  • All text wraps automatically. Be sure to avoid manual line breaks.
  • Hyphenation is also handled automatically by the respective browser. Be sure to avoid manual hyphenation.
  • Since all elements dynamically adjust their width based on screen size, the number of lines in the text also changes dynamically. This eliminates the need to adjust text lengths so that they align flush with adjacent elements.
  • Images are automatically scaled to completely fill their respective image areas.
  • The system automatically generates image croppings for the screen sizes mentioned above (desktop, tablet/laptop, smartphone). You can adjust these croppings using an image editor.

Conclusion: When incorporating text, focus on correctly formatting headings (e.g., as H1, H2, H3, etc.) and ensuring the content is clear and understandable. For images, you can adjust the image cropping as desired. The website’s layout handles the rest automatically.

How can I test my website on different screen sizes?

In the browser itself: Simplyresize the browser window to be as narrow as possible, then refresh the page once. This simulates how the page will appear on a smartphone. A medium browser width simulates how the page will appear on a tablet.

In the TYPO3 backend: You can use the “Display” module to simulate different screen sizes.

By device: Of course,you can also visit the website directly on the appropriate device to check how it looks.