Die Bildschirm-Breite

Die wichtigste Größe für das Responsive Webdesign ist die Bildschirmbreite.

Der Begriff Responsive Webdesign bedeutet auf deutsch "reagierendes Webdesign". Darunter versteht man, dass sich das Design der Webseite automatisch an den Bildschirm des genutzten Gerätes anpasst.

Einzelne Elemente der Seite werden entweder verschoben, verkleinert dargestellt oder ganz ausgeblendet, wenn sich die Größe des Bildschirms ändert.

So kann gewährleistet werden, dass die Webseite unabhängig vom jeweils genutzten Endgerät, also Desktop- Computer, Tablet oder Smartphone, optimal genutzt werden kann.

Ermittlung der Bildschirmbreiten

Grundsätzlich gibt es zwei Möglichkeiten, auf die Bildschirmbreite zu reagieren. Die naheliegende Möglichkeit ist, mittels Javascript die Breite zu ermitteln und durch bestimmte Funktionen auf die Elemente der Webseite einzuwirken. Die Nutzung von Javascript für DesignÄnderungen der Seite hat aber einige sehr entscheidende Nachteile:

• es existieren mehrere Angaben für Bildschirmbreiten, abhängig davon, ob Browser-Elemente mitgerechnet werden oder nicht
• Anpassungen der Webseite können erst nach dem Laden erfolgen
• die Reaktion auf Änderungen erfolgen zeitverzögert
• schaltet der Nutzer Javascript aus oder nutzt einen Browser ohne Javascript, bleibt die Webseite im ursprünglichen Design
• es muss immer im Hintergrund eine permanente Abfrage der Bildschirmmaße erfolgen, um reagieren zu köpnnen

Die zweite und absolut elegantere Möglichkeit ist, alle Anpassungen bereits in den CSS-Anweisungen festzulegen, also für unterschiedliche Breiten unterschiedliche Designs festzulegen. Das hat entscheidende Vorteile:

• alle von der Breite abhängigen Darstellungen werden bereits vor der Anzeige durch den Browser im Browserspeicher hinterlegt
• die Umschaltung erfolgt ohne Verzögerung, wenn sich die Breite des Browser-Fensters ändert
• bei sauber programmiertem CSS erscheint die Webseite immer optimal im jeweiligen Gerät und passt sich auch Bildschirmänderungen (Drehung des Smartphones oder ähnliches) unvermittelt an
• Javascript ist für das Layout/Design nicht erforderlich

Aktuelle Bildschirmbreiten

Hier mal ein Vergleich der verschiedenen Bildschirmbreiten.

Fazit:
auftretende Abweichungen resultieren unter anderem von den Bildlaufleisten. Die CSS-Variante ist aber für ein funktionierendes Responsive Webdesign gegenüber der Javascript-Variante eindeutig im Vorteil.

neues Layout mit CSS

Im September 2020 wurde für fakoo.de ein völlig neues Layout mit übersichtlichem Menü erstellt ("mobil first"). Je nach Bildschirmbreite (Viewport) erscheint die Seite drei- bis einspaltig. Die Umschaltung abhängig von den Media Queries (Geräte-Abfragen) wurde ausschließlich durch die Gestaltungssprache CSS realisiert.

Layout 3-spaltig (über 1380 Pixel Breite)


Layout 2-spaltig (über 1100 Pixel Breite)


Layout 1-spaltig (Menü eingeklappt)