Responsive Webdesign

Dokumentation Template 3.0

Barrierefreie Darstellung auf allen Endgeräten: Die Webseiten der Universität Stuttgart passen sich jeweils der Bildschirmgröße an.

Responsive Webdesign der Uni Stuttgart
Responsive Webdesign der Uni Stuttgart

Die Webseiten der Uni Stuttgart sind so konzipiert, dass sie auf allen gängigen Geräten von Desktop bis Smartphone optimal nutzbar sind. Das Layout der Webseiten ist „responsive“. Das heißt, dass sich das Layout und damit der Inhalt an die verschiedenen Gerätebildschirm- und Browser-Größen automatisch anpassen.

Auch die Inhalte sind flexibel und passen sich an die Spaltenbreite an. Text bricht automatisch früher oder später um und Bilder werden automatisch skaliert. Beim Eingeben von Inhalten ist zu beachten, dass die Spalten flexibel sind. Wir handhaben Layoutzeilen mit Ausreißern grundsätzlich so, dass sich der linke und auch der rechte Ausreißer bei der Darstellung auf kleinen Geräten über den daneben stehenden Inhalt im Hauptblock stellt.

Hinweis: Möchten Sie die Desktop-Reihenfolge für den rechten Ausreißer auch auf dem Smartphone beibehalten, dass also der Ausreißer nach dem Hauptblock kommt, stellen Sie die Layoutzeile entsprechend ein.

Da es relativ kleine Laptops und relativ große Tablets gibt und die Eingabeart (Mouse oder Finger) bei gleicher Screen-Breite unterschiedlich ausfallen kann, sind alle Elemente so angepasst, dass sie durchgängig bequem mit dem Finger bedient werden können. Menüpunkte und Buttons sind relativ groß, Accordions haben eine optimale Höhe, Link-Listen haben entsprechende Zeilenabstände, Telefonnummern und E-Mail-Adressen werden mit Icons dargestellt. Telefonnummern können die Nutzer direkt anklicken, dadurch wird auf telefonfähigen Geräten die entsprechende Nummer direkt gewählt.

Zum Seitenanfang