Sprungmarken

Servicenavigation

Hauptnavigation

Sie sind hier:

Hauptinhalt

Dies ist im Hinblick auf die Erstellung von Seiten in Fiona zu beachten

Zunächst ist wichtig zu wissen, dass bei einem responsiven Design lediglich die Darstellungen von Inhalten variiert werden, nicht die Inhalte selbst. Somit ist es auch nicht notwendig, mehrere Seiten mit gleichen Inhalten parallel zu pflegen. Dennoch sollten einige wichtigen Punkte beachtet werden.

Aufgrund der Vielzahl von internetfähigen Geräten wie Handys, PCs oder Tablets muss beim Erstellen von Seiten an die Bedienbarkeit auf diesen verschiedenen Endgeräten gedacht werden.

Kann man beispielsweise auf einem Desktoprechner aufgrund des großen Bildschirms eine breite Tabelle mit vielen Spalten gut überblicken, ist das auf einem Handy sicherlich nicht der Fall.

Um sicherzustellen, dass eine Webseite auf möglichst vielen Endgeräten zufriedenstellend angezeigt werden kann, sollten einige Regeln beachtet werden.
Hier finden Sie eine Übersicht, in der Komplikationen bei der Darstellung speziell auf mobilen Geräten thematisiert werden:

Allgemeines: Größenangaben

Generell können Inhalte, die der Browser untereinander darstellen kann, auch gut auf mobilen Geräten dargestellt werden. Normaler Text kann beispielsweise bei Bedarf mehrzeilig angezeigt werden, ohne dass der Benutzer des mobilen Gerätes eine Seite präsentiert bekommt, die zu breit für den Bildschirm ist. Für Elemente mit festen Breiten gilt das nicht, daher sollten für diese nach Möglichkeit prozentuale Breiten angegeben werden.

Dies betrifft speziell Bilder, Tabellen und Container. Möchten Sie beispielsweise eine Tabelle mit 4 gleichbreiten Spalten erstellen, weisen Sie jeder Spalte eine Breite von 25% zu, anstatt feste Pixelangaben zu machen.

Große Infografiken

Verwenden Sie keine großen Infografiken, auf denen kleiner Text zu sehen ist (z.B. tabellarische Übersichtspläne, die als Bild eingebunden sind).
Auf einem Handy ist es aufgrund der beschränkten Bildschirmgröße dann nicht mehr möglich, den Inhalt des Bildes zu erkennen.

Stattdessen sollten die darzustellenden Inhalte nach Möglichkeit mit HTML-Elementen modelliert werden (z.B. Tabellen, Listen, Container). Bilder, auf denen ausschließlich Tabellen zu sehen sind, sollten als HTML-Tabelle modelliert werden. Je nachdem, was dargestellt werden soll, empfehlen sich Darstellungsformen, die es zulassen, Informationen untereinander darzustellen.

Große Tabellen

Verwenden Sie nach Möglichkeit keine Tabellen mit vielen Spalten. Auf einem Handy kann nur eine sehr begrenzte Anzahl von Spalten korrekt dargestellt werden. Verwenden Sie viele Spalten, so wird die Tabelle zu breit sein, um vollständig auf dem Bildschirm eines mobilen Gerätes dargestellt werden zu können. Der Benutzer muss dann häufig horizontal scrollen, um die Tabelle zu lesen.
Außerdem sollten keine absoluten Spaltenbreiten eingetragen werden (px), sondern prozentuale Angaben verwendet werden (%), damit die Tabelle nicht eine starre, vorgeschriebe Größe hat, sondern skaliert, d.h. sich der Bildschirmbreite anpasst.

Verwenden Sie keine Tabellen, um Inhalte oder Bilder auf der Seite zu positionieren. Dies gilt seit Jahren nicht mehr als barrierefrei. Nun kann es auch bei Nutzung mobiler Geräte Probleme bereiten.

Es kann sich je nach darzustellenden Inhalten anbieten, gänzlich auf eine Tabelle zu verzichten und stattdessen eine Darstellungsform zu wählen, die es zulässt, die Informationen untereinander darzustellen.