Navigation

Inhalt Hotkeys
Universitäts­rechen­zentrum
Responsives Design

Responsives Design

Smartphone und Laptop mit aufgerufener TU-Seite

Die Inhalte der Webseiten der TU Chemnitz sollen auf möglichst allen Anzeigegeräten gut lesbar sein – auf Smartphones, Tablets, Desktop-, TV- u. a. hochauflösenden Bildschirmen, für sehbehinderte Menschen und ausgedruckt auf Papier. Um dies zu erreichen, müssen Webautoren Aspekte des Responsive Webdesign beachten, so dass sich der Inhalt an die zur Verfügung stehende Auflösung des Endgerätes anpasst.

Das verwendete Layoutsystem TUCAL passt den Rahmen der Webseiten schon entsprechend an ‒ wenn Sie Ihr Browserfenster verkleinern, sehen Sie den Effekt. Als Webautor müssen Sie für den Inhalt einige Hinweise beachten, damit Ihre Webseiten überall gut aussehen.

Der Platz ist in der Breite beschränkt: Auf Desktops sind es für den Inhalt maximal 827 Pixel, auf Smartphones minimal 320 Pixel. (Titelbilder sind maximal 855 Pixel breit, da sie keinen seitlichen Abstand haben.) Daraus leiten sich einige Tipps ab:

  • Bilder: Verkleinern Sie die Bild-Dateien, so dass diese maximal 827 Pixel breit sind (oder kleiner, falls es nicht die gesamte Breite einnehmen soll). Geben Sie jedem Bild die Klasse img-responsive: <img src="bilddatei.jpg" class="img-responsive" />
    So wird das Bild die maximal verfügbare Fläche einnehmen, bis es eine Skalierung von 100% erreicht hat.
  • HTML-Tabellen: <table>-Elemente sind möglichst zu vermeiden, insbesondere solche mit vielen breiten Spalten. Die Spalten werden immer nebeneinander dargestellt, auch auf Smartphones ‒ dort muss man dann seitlich scrollen.
    Weitere Informationen zu Tabellen und wie Sie trotzdem Inhalte ausgerichtet in Spalten gestalten können, lesen Sie im Abschnitt Grid-System.
  • Selbst definierte Breiten sollten nicht absolut in Pixeln, sondern relativ zum übergeordneten Elemente prozentual definiert sein. Mindest- oder Maximalbreiten können mit min-width/max-width deklariert werden.
    Beispiel: <div style="width:30%;max-width:300px"></div>
    Empfehlung: Das Bootstrap-Grid-System verwenden.
  • Lange Wörter können auf kleineren Bildschirmen nicht vollständig dargestellt werden und führen zu Anzeigefehlern. Mit dem Sonderzeichen &shy; kann eine Umbruchstelle eingefügt werden. Wenn nötig wird das Wort an dieser Stelle mit einem Trennstrich getrennt, sonst ist von dem Zeichen nichts zu sehen. Ab ca. 20 Zeichen pro Wort sollte dieses Zeichen gesetzt werden, besonders im Menü. Ein Umbruch ohne Trennstrich wird durch dieses Zeichen ermöglicht: &#x200B;
    Grundstücks­verkehrs­genehmigungs­zuständigkeits­übertragungs­verordnung
    Grundstücks&shy;verkehrs&shy;genehmigungs&shy;zuständigkeits&shy;übertragungs&shy;verordnung

Grid

Das Grid-System von Bootstrap ermöglicht eine einfach zu handhabende Darstellung, die der von Tabellen ähnlich und zudem deutlich flexibler ist, um sich dem Responsive Webdesign anzupassen.
Die Änderung der Darstellung geschieht dabei schrittweise. (Für die Universitätswebseite wurden diese Schritte gegenüber Bootstrap angepasst und eine zusätzliche Stufe hinzugefügt.)

Eine Übersicht dieser Schritte

Bezeichnung
Bereich
xs
ab 320px (0px)
xm
ab 550px
sm
ab 801px
md
ab 992px
lg
ab 1200px

Funktionsweise

<div class="col-xm-6 col-md-4">Inhalt</div>
  • Zuweisung der Breite des Elements über Klassen
    • Die Breite ist relativ zum übergeordneten Element.
    • Mehrere Klassen können unterschiedliche Breiten für unterschiedlich große Displays angeben.
  • Grid aus 12 Spalten bestehend
    • Suffix der Klasse gibt die Breite in Anzahl der Spalten an.
    • "col-xm-6" ergibt eine Breite von: 6/12 = 50%
  • Unterschreitet die Displaybreite die durch die Klassen definierten Bereiche, wird das Element mit automatischer Breite dargestellt.
    • Bei Blockelementen (z. B. <div />) ist die automatische Breite 100%.
    • Bei Inline-Elementen (z. B. <span />) wird die Breite durch den Inhalt bestimmt.
    • Die weiteren Formatierungen durch "col-xm-6" bleiben auch unter 550px weiter aktiv.

Einfache Anwendung

Grundlegend reicht es, mit der Größe "m" zu arbeiten. So bleibt die Darstellung auf Desktops und Tablets wie gewohnt, nur auf Smartphones werden alle Inhalte untereinander angezeigt. Auf diese Weise sind sie auch dort gut zu betrachten.

Ab einer Breite von 800px wird das Seitenmenü neben dem Inhalt angezeigt, somit ist die zur Verfügung stehende Breite nahezu identisch der Mobilansicht ab 550px.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum mollis purus, et placerat orci lobortis vestibulum. Nam porttitor convallis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum mollis purus, et placerat orci lobortis vestibulum. Nam porttitor convallis.
<div class="row">
  <div class="col-xm-6">Lorem ipsum …</div>
  <div class="col-xm-6">Lorem ipsum …</div>
</div>

Hinweise

  • "row" erweitert das überliegende Element rechts und links um jeweils 14px.
  • "col-xm-6" hat links und rechts ein padding von 14px.
  • Damit sind Spalten mit 28px voneinander getrennt, was optisch ansprechend ist.
  • Mehr Beispiele

Media Queries

CSS-Stile können durch Media Queries auf bestimmte Medientypen, Displaygrößen und Ausrichtungen beschränkt werden. Media Queries liegen auch dem Bootstrap-Framework zu Grunde. Eine Beschreibung der Spezifikation findet sich auf w3schools.com. Der Media-Typ all ist der Standardwert und kann auch weggelassen werden. Der hierfür nötige CSS-Code muss entweder über eine CSS-Datei geladen oder der Rahmenvariable $css_in hinzugefügt werden.

$css_in '@media (min-width: 550px) {
  .page-content table { background-color: #e6e6e6; }
}';

Tabellen

Sollten Sie doch nicht auf Tabellen verzichten können, gibt es zwei Möglichkeiten sich trotzdem an das responsive Webdesign zu halten.

  1. Für den Fall, dass der Inhalt eine Darstellung in der Tabelle erfordert, um übersichtlich zu bleiben oder zusammengefasste Zellen benötigt werden, ist eine normale Tabelle weiterhin die beste Wahl. Diese muss dann aber in ein div-Element eingefasst werden, welches die Klasse class="table-responsive" hat. Somit muss man nur in der Tabelle scrollen, wenn die Breite nicht ausreicht.

    02.07.2015 15:30 Reichenhainer Str. 70, Rühlmann-Bau, 2/70/B202 Big Data: Mathematical methods and applied problems
    The aim of the workshop is to bring together mathematicians and scientists working in fields where mathematical expertise can bring significant profit to applications. Mehr …
    09.07.2015 16:30 Reichenhainer Str. 35/37, Studentenwohnheim, Wiese vorm Studentenclub Grillfest der Fakultät für Mathematik
    Mehr …
    16.07.2015 11:30 Reichenhainer Str. 39, 638 E-Learning Lunch
    Franziska Nestler, Daniel Potts
    Für die Studenten des Maschinenbaus wird unsere Fakultät im kommenden Semester zusätzlich zu den Vorlesungen und Übungen ein Praktikum anbieten. Hier wollen wir das Konzept vorstellen und diskutieren.
    <div class="table-responsive">
      <table class="zeile"></table>
    </div>
  2. Wird die dynamische Anpassung der Zellengröße an deren Inhalt für bestimmte Displaygrößenlayouts benötigt, gibt es wieder zwei Möglichkeiten zur Umsetzung.
    1. div-Elemente mit CSS-Eigenschaft display:table in eine Tabelle umwandeln: Diese Eigenschaft kann über Media Queries auch nur für bestimmte Displaygrößen definiert werden.
      Eine ausführliche Beschreibung mit Beispielen finden sie auf selfhtml.org.
    2. Andersherum können auch Tabellenzellen mit Hilfe von CSS in Blockelemente wie div umgewandelt werden. Mit der Klasse "zeile-xs" geschieht das für eine Breite unter 550px. Dabei werden die Spalten von links nach rechts untereinander angeordnet.
      02.07.2015 15:30 Reichenhainer Str. 70, Rühlmann-Bau, 2/70/B202 Big Data: Mathematical methods and applied problems
      The aim of the workshop is to bring together mathematicians and scientists working in fields where mathematical expertise can bring significant profit to applications. Mehr …
      09.07.2015 16:30 Reichenhainer Str. 35/37, Studentenwohnheim, Wiese vorm Studentenclub Grillfest der Fakultät für Mathematik
      Mehr …
      16.07.2015 11:30 Reichenhainer Str. 39, 638 E-Learning Lunch
      Franziska Nestler, Daniel Potts
      Für die Studenten des Maschinenbaus wird unsere Fakultät im kommenden Semester zusätzlich zu den Vorlesungen und Übungen ein Praktikum anbieten. Hier wollen wir das Konzept vorstellen und diskutieren.
      <table class="zeile zeile-xs"></table>

Presseartikel