Tipps zur Orientierung

Und hier findest Du noch einige Hinweise für Menschen, die sich in erster Linie optisch orientieren und auch als Sehbehinderte noch gut einen Monitor nutzen können. Da meine Seite erst seit Ende August 2018 responsive ist, also auch für mobile Endgeräte wie Smartphones oder Tablet-PCs optimiert ist, habe ich mir jetzt die Mühe gemacht, Euch zu beschreiben, wie sich die verschiedenen Elemente auf meiner Seite bei unterschiedlichen Monitorgrößen verhalten. Ich fange hier oben bei einem Full-HD-Monitor im 16-zu-9-Format mit 1920 Bildpunkten (Pixeln) in der Breite an und ende dann unten mit einem Smartphone mit 320 Bildpunkten (Pixeln) Breite:

Die Seite scrollt übrigens von oben nach unten. Das scheint zwar für die meisten Menschen selbstverständlich zu sein, ist es aber nicht. Ich erwähne das deshalb, weil ich auch Seiten kenne, die von links nach rechts scrollen.

Bei 1920 Pixeln Breite:

Meine Homepage ist in 5 Bereiche aufgegliedert: Einen Kopfbereich (s. Grafik 01, Punkt 1; auch Header genannt), der oben quer verläuft, einen Fußbereich (s. Punkt 5; auch Footer genannt), der unten quer verläuft und drei senkrechte Spalten, die dazwischen liegen: eine linke (s. Punkt 2), eine mittlere (s. Punkt 3; auch Hauptbereich genannt) und eine rechte Spalte (s. Punkt 4). Meine Homepage hat im oberen linken Bereich einen hellen Sonnenuntergang als Hintergrundbild und wird dann nach rechts und nach unten hin schwarz. Dabei hat der Header wegen des großen Sonnenbildes im Hintergrund keine eigene Hintergrundfarbe, wie ihr in der Grafik 01 sehen könnt. Die linke und rechte Spalte sind im Vergleich zur mittleren Spalte relativ schmal und beide gleich breit.

Bildschirmfoto: Der Header (mit dem Sonnenbild), der Footer und die 3 Spalten dazwischen.

Grafik 01: 1920 Pixel Breite

 

Im Kopfbereich der Seite befinden sich mein Schreibmaus-Schriftzug oben in der Mitte (s. Grafik 02) sowie mein Schreibmaus-Logo, das mich als Maus-Mensch zeigt, etwas weiter rechts auf dem Bildschirm direkt über der rechten Spalte (s. Grafik 03). Diese beiden Elemente verschieben sich später innerhalb des Headers, wenn der Bildschirm kleiner wird.

Bildschirmfoto: Mein Schreibmaus-Schriftzug.

Grafik 02

 

Bildschirmfoto: Mein Schreibmaus-Logo.

Grafik 03

 

Von 1920 bis zu 1722 Pixeln Breite:

Meine Seite wird von einem hellgelben doppelwandigen Rahmen umschlossen (s. Grafik 04, blaue Pfeile), der noch bis zu einer Breite von 1722 Pixeln dargestellt wird (s. Grafik 05, blaue Pfeile). Bei 1920 Pixeln Breite befinden sich sowohl zwischen der linken Spalte und dem Außenrahmen, als auch zwischen der rechten Spalte und dem Außenrahmen noch größere Abstände (s. Grafik 04, grüne Pfeile). Allerdings verschmälern sich diese beiden Außenabstände links und rechts bei 1722 Pixeln (s. Grafik 05, grüne Pfeile).

Am unteren Rand des Kopfbereiches und knapp oberhalb der linken Spalte befindet sich noch das sogenannte Brotkrumen-Menü (s. Grafik 04, roter Pfeil), in dem Ihr immer den aktuellen Menüpfad bis zur angezeigten Seite im Hauptbereich findet. Das letzte Element des Pfades in weißer Schrift, also die jeweils aktuell aufgerufene Seite, lässt sich nicht noch einmal anklicken. Mehr Infos zum Brotkrumen-Menü findest Du unter dem Link "breadcrumps".

Bildschirmfoto: Meine Seite bei 1920 Pixeln Breite.

Grafik 04: 1920 Pixel

 

Bildschirmfoto: Meine Seite bei 1722 Pixeln Breite.

Grafik 05: 1722 Pixel

 

Von 1720 bis zu 1282 Pixeln Breite:

Bei 1720 Pixeln Breite und weniger fällt der gelbe Außenrahmen weg (s. Grafik 06, blaue Pfeile). Außerdem schrumpfen jetzt die beiden Abstandstreifen zwischen der linken und mittleren, bzw. zwischen der mittleren und rechten Spalte bis auf 15 Pixel zusammen (s. Grafik 06, grüne Pfeile). Aber auch die mittlere Spalte selbst schrumpft nun zusammen (s. Grafik 07, orange Pfeile), wenn man den Sichtbereich im Browser verkleinert oder einen Monitor mit kleinerer Breite benutzt. Die rechte Spalte bleibt bis zu einer Breite von 1282 Pixeln rechts neben der mittleren Spalte stehen (s. Grafik 07).

Bildschirmfoto: Meine Seite bei 1720 Pixeln Breite.

Grafik 06: 1720 Pixel

 

Bildschirmfoto: Meine Seite bei 1282 Pixeln Breite.

Grafik 07: 1282 Pixel

 

Von 1280 bis zu 1102 Pixeln Breite:

Bei einer Monitorbreite von 1280 Pixeln oder kleiner ändert sich die Anzeige grundlegend, und die rechte Spalte rutscht unter die linke und mittlere Spalte (s. Grafik 08, lila Pfeil) und erstreckt sich dort über die gesamte Breite (s. Grafik 08, orange Pfeile). Dadurch wird die mittlere Spalte vorübergehend wieder etwas breiter. Bis zu einer Breite von 1102 Pixeln wird die linke Spalte noch links vom Hauptbereich angezeigt(s. Grafik 09). Erst bei einer Breite von 1100 Pixeln oder weniger springt sie unter die mittlere Spalte (s. Grafik 09, lila Pfeil), und die rechte Spalte rutscht dann ganz nach unten (was man hier nicht sehen kann).

Bildschirmfoto: Meine Seite bei 1280 Pixeln Breite.

Grafik 08: 1280 Pixel

 

Bildschirmfoto: Meine Seite bei 1102 Pixeln Breite.

Grafik 09: 1102 Pixel

 

Von 1100 bis zu 320 Pixeln Breite:

Bei einer Monitorbreite von 1100 Pixeln oder weniger verschwindet das Brotkrumen-Menü, und es erscheint in der oberen rechten Ecke des Bildschirms eine kleine "Hamburger"-Grafik, mit der man von nun an das Menü aufrufen kann (s. Grafiken 10, 11 und 12, roter Pfeil). Die linke Spalte springt jetzt - wie gesagt - unter die mittlere Spalte (s. Grafik 11 unten, lila Pfeil) und setzt sich damit quasi zwischen den Hauptbereich und die rechte Spalte (s. Grafik 11). Der Schreibmaus-Schriftzug rutscht ab 1100 Pixeln Breite von oben an den unteren Rand des Kopfbereiches, bzw. unmittelbar über die mittlere Spalte (s. Grafik 10), und je mehr man sich den Pixelmaßen eines Smartphones nähert, umso mehr rutscht das Schreibmaus-Logo in die Mitte des Bildschirms (s. Grafik 12).

Bildschirmfoto: Meine Seite oben bei 1100 Pixeln Breite.

Grafik 10: 1100 Pixel oben

 

Bildschirmfoto: Meine Seite bei einer klassischen Smartphone-Ansicht mit 320 Pixeln Breite.

Grafik 12: 320 Pixel

 

Bildschirmfoto: Meine Seite unten bei 1100 Pixeln Breite.

Grafik 11: 1100 Pixel unten

 

 

Unter diesem Menüpunkt "Tipps zur Orientierung" findest Du sowohl links in der Navigation als auch hier unten im Text die Möglichkeit, weitere Unterpunkte anzuwählen. Diese beinhalten Erläuterungen zu den Schriften, den Überschriften sowie zu meinen Links und deren Farbgebung.