Responsives Design

Responsives Design bezeichnet eine Technik im Webdesign, bei der sich das Layout und die Inhalte einer Webseite flexibel an verschiedene Bildschirmgrößen und -auflösungen anpassen. Ziel ist es, eine optimale Nutzererfahrung auf Desktop-Computern, Tablets und Smartphones zu gewährleisten, ohne dass für jede Geräteart eine separate Version der Webseite erstellt werden muss. Anstelle fester Pixelangaben werden prozentuale Breiten und flexible Raster verwendet, damit sich Inhalte dynamisch an die verfügbare Bildschirmfläche anpassen.

Was bedeutet dies für Sie als Redakteur*in einer Webseite?

Von technischer Seite aus müssen Sie nichts tun. Das Webdesign der TU und alle in TYPO3 verwendeten Inhaltselemente sind automatisch responsiv. Dies bedeutet aber, dass sich einige Inhaltselemente anders anordnen, wenn die Bildschirmgröße kleiner oder größer wird. Auch der angezeigte Bildausschnitt kann sich dadurch verändern - im Screenshot unten sehen Sie zum Beispiel dasselbe Element Newsslider auf einem Laptopbildschirm und einem Smartphone im Vergleich.

Optimieren Sie Ihre Webseiten daher nicht nur für Ihren eigenen Bildschirm, sondern prüfen Sie immer auch, wie die Darstellung auf größeren/kleineren/mobilen Geräten aussieht. Dazu können Sie ganz einfach das Browserfenster mit der Frontend-Ansicht Ihrer Website kleiner und größer ziehen oder sich über die Entwicklertools verschiedene Bildschirmgrößen emulieren lassen. In der Regel kann man die Übersicht dieser Werkzeuge aus dem Browser heraus mittels der Tastenkombination Umschalt + Strg + i öffnen.