Aufbau und Layout / das Grid
Eine Webseite im UzK2015-Design besteht aus vier Bereichen:
- Header,
- MainContent-Bereich,
- Marginalia-Spalte,
- Footer
Header und Footer sind durch das Design definiert und der Bearbeitung entzogen. Ausnahmen sind, dass Personen mit Administrationsrechten den Namen der Einrichtung setzen und gegebenenfalls das Fakultätssiegel durch ein Site-Logo ersetzen können.
Den MainContent-Bereich und die Marginalia-Spalte können Sie bearbeiten. Alles für Besuchende Ihrer Seite Wichtige sollten Sie im MainContent-Bereich anzeigen. Die Marginalia kann sinnvoll für Zusatzinformationen sein, wird aber auf Mobilgeräten eingeklappt und unterhalb den MainContent-Bereich verschoben. Sie sollten daher in der Marginalspalte niemals wesentliche Informationen speichern, die für das Verständnis der Seite elementar sind.
Verantwortlich dafür ist das Grid, ein unsichtbares Gestaltungsraster für Ihre Webseite. Im Grid wurde für verschiedene Bildschirmauflösungen festgelegt, wo und wie die verschiedenen Elemente einer Seite angezeigt werden. Es ist deshalb die Grundlage für das Responsive Design und hilft die Inhalte Ihrer Seite immer optimal auf dem jeweiligen Endgerät darzustellen.
Wie viele Pixel zur Verfügung stehen ist abhängig vom Bildschirm des genutzten Anzeigegeräts. Es macht deshalb keinen Sinn zu definieren "Textblock x ist 400 Pixel breit.": abhängig vom Bildschirm ist dies sehr viel oder wenig. Stattdessen geben Sie die Breite deines Elements in Prozent der Breite des übergeordneten Elements an. Zur Auswahl stehen Ihnen:
- 33 %
- 50 %
- 67 % und
- 100 %
Wenn Sie also im MainContent-Bereich einen Textblock einfügen und dessen Breite auf 67% setzen, dann nimmt dieser zwei Drittel der Breite des MainContent-Bereich ein. Würden Sie den gleichen Textblock in die Marginalia setzen und die gleiche Breite einstellen, so würde er 67 Prozent der Marginalia einnehmen.
Die Höhe des Elements brauchen und können Sie dabei nicht angeben: die Höhe ergibt sich automatisch aus der eingestellten Breite und dem benötigten Platz das Element automatisch darzustellen.
Sie können für (fast) jedes Inhaltselement die prozentuale Breite einstellen. Das funktioniert also sowohl für Textblöcke, als auch Bilder und viele mehr.
Wenn Sie ein Inhaltselement anlegen, finden Sie fast immer ein mit "Layout" betiteltes Drop-Down-Menü. Bei Text- und Bild-Elementen sowie vielen Plugins finden Sie es im Tab "Appearance". Manche Elemente (wie der Lageplan) verfügen im Backend nicht über diesen Tab, aber hier finden Sie das Layout-Menü in einem anderen Tab. Bei Bildern finden Sie mit "Enlarge on click" zudem noch eine Lightbox-Funktionalität, das heißt Sie können das Bild relativ klein anbinden, aber Besuchende Ihrer Seite können es mit einem Klick vergrößern.
Browser versuchen die verschiedenen Inhaltselemente nebeneinander darzustellen, sofern es der Platz zulässt. Wenn Sie also drei Inhaltselemente mit jeweils 33 Prozent Breite erstellen, dann werden diese drei nebeneinander dargestellt. Neben ein Element von 50 Prozent Breite passt ein zweites, oder eines mit 33 Prozent und so weiter.
Dieses Verhalten kann manchmal unerwünscht sein und manchmal ergeben sich bei variierenden Elementhöhen Probleme. Der Divider ist das Werkzeug um einen Umbruch zu erzwingen.
Das Grid hat noch eine wichtige Funktion: es legt für verschiedene Bildschirmauflösungen fest, wie viele Elemente nebeneinander dargestellt werden können. Beispiele:
- Beim Unterschreiten einer Mindestbreite des Bildschirms wird die Marginalia-Spalte weg geklappt und unter den MainContent-Bereich verschoben.
- Drei Inhaltselemente mit jeweils 33 Prozent Breite können auf einem PC-Bildschirm nebeneinander dargestellt werden. Auf einem sehr kleinen Bildschirm macht das aber keinen Sinn. Deshalb wird in diesem Fall zu Gunsten der Lesbarkeit das dritte Inhaltselement nach unten verschoben und alle Elemente werden auf 50 Prozent vergrößert. Bei einem noch kleineren Bildschirm werden alle drei Elemente untereinander angezeigt, dafür aber in voller Bildschirmbreite.
Im Gestaltungsleitfaden finden Sie die exakten Schwellenwerte. Es macht jedoch mehr Sinn einfach konkret mit einem Mobilgerät zu prüfen wie sich Ihre Seite verändert.
Alle Bilder und Teaser-Bilder die nebeneinander angezeigt werden sollen, sollten die exakt gleiche Größe haben. Am einfachsten erreicht man dies durch genau gleiche Pixel-Maße der Bilder.
Selbst minimale Größenabweichungen können dabei zu ungewünschten optischen Verschiebungen führen.
Bilder und Teaser-Bilder werden bei bei der Anzeige nochmals skaliert, um auf die gleiche Breite angepasst zu werden. Dadurch errechnet sich die Höhe des Teasers / Bildes anhand der Anzeige-Größe und dem Seitenverhältnis des Originals. Die Browser arbeiten hier tatsächlich mit Hundertstel-Pixeln, so dass kleinste Abweichungen hier schon zum Problem führen können.
Generell gibt es kein ideales Seitenverhältnis, hier spielen persönlichen Präverenzen eine Rolle.
Wichtig ist jedoch Einheitlichkeit. Vor allem wenn Bilder und Teaser-Elemente mit Bildern nebeneinander angezeigt werden.
Als Ansatz kann sich an den üblichen Seitenverhältnissen der Monitore orientiert werden. Diese sind meist 16 : 9 oder bei älteren Monitoren 4 : 4. Auch 3 : 2 Seitenverhältnisse können bei selbstgemachten Fotos eine Option sein.
Folgende Pixelmaße kann man exemplarisch empfehlen:
- 928 x 522 für 16 : 9
- 928 x 696 für 4 : 3
- 927 x 618 für 3 : 2
Die normale Spaltenbreite beläuft sich in den TYPO3's auf ca. 925px. Upload von Bildern mit 1000px Breite (z.B. für große Slider) sind also in jedem Fall ausreichend groß. Für kleine Teaser können die Bilde rnatürlich kleiner ausfallen.
Bilder die Größer sind als 1000px Breite verbrauchen nur unnötig Speicherplatz. Diese sollten nur verwendet werden, wenn sie auch zum Download zur Verfügung gestellt werden müssen (z.B. detailreiche Landkarten). Sehr detaillierte Bilder sollten außerdem nicht als verlustbehaftetes JPG gespeichert werden, sondern besser in verlustfreien Formaten wie PNG.
Kontakt
Bei Fragen und für eine individuelle Beratung wenden Sie sich bitte an TYPO3-Master.
Bei Fragen speziell zu unserem Angebot UniTy3, verwenden Sie bitte dieses Kontaktformular: UniTy3-Support.