Jetzt stellen wir mal eben fix die Werte in der css-Datei ein, bei welchen Bildschirm-Auflösungen verschiedene Designs zum Einsatz kommen. Sinn des Ganzen ist, dass die Website sowohl auf einem großen Monitor gut ausschaut und gleichzeitig mit einem Mobilgerät bedienbar bleibt. Schauen wir mal was im Internet so üblich an Displayauflösungen unterwegs ist.

Beim kurzen Stöbern bin ich u.a. auf folgende Internetseiten gestoßen:

• Browser-Displays auf w3school.com
• Statistiken auf be-responsive.de
• Display Statistik bei proteus-solutions.de
• Seitenbreite auf mywebcheck.de

Das ist bei weitem nicht allumfassend, gibt aber einen ersten Einblick.

Weiterhin: ich daheim arbeite mit einem 24'' Monitor und 1920x1080 Pixel. Mein Smartphone hat auch 1920x1080 Pixel.....äh, stop. Meist wohl eher 1080x1920pixel, da ich es meist hochkant halte. Aber selbst wenn ich quer halte, möchte ich auf dem Smartfon nicht die Darstellung wie auf meinem Monitor..... Das lässt sich aber ein wenig mit den Breite-Auflösungen 1080 und 1920 anpassen, aber nicht ideal.

Weitergesponnen: Ich kann auf einem Monitor mit z.B. 1024px Breite aber trotzdem weiterhin mehr Elemente unterbringen als auf meinem Smartfon mit 1080px. Immerhin reden wir hier von Diagonalen-Unterscheide von z.B. 15'' zu 5''....

Ok, könnte spannend werden. Aber irgendwo muß ich mal anfangen. Optimieren kommt danach. Somit starte ich mit folgenden Einstellungen:

(Ich geh mal davon aus, dass kaum noch Geräte mit Auflösungen in Breite kleiner 480px im Internet unterwegs sind. Das ist somit die minimal Displaybreite, auf die ich meine Site einstelle.)

• min Breite 480px - darunter ist die Seite nicht optimiert...muß später mal überprüft werden
• Bereich 2: 480 px - 769 px
• Bereich 3: 770 px - 989 px
• Bereich 3: 990 px - 1099 px
• Bereich 4: 1100 px - 1500 px
• Über 1500 px - ab hier ist die Seite mit einem breiter werdenden Rand versehen

Überlegung ist noch, ob ich bei z.B. 1100 px einen Wechsel bzgl der Bildgröße vornehme und somit des zu transferierenden Datenvolumen reduzieren kann. Mal checken wie groß das Hintergurndbild und die Bilder der Slideshow werden..... Das wird eines der nächsten Themen.