Responsive Webdesign: Passende Inhalte zur Bildschirmgröße laden




Responsive Webdesign ermöglicht die Ausgabe von Webseiten auf Bildschirmen aller Größen. Durch gezieltes Ausblenden von Inhalten, können Smartphone- und Desktopnutzer die Webseite optimal nutzen. Doch wie wäre es, wenn die auszublendenden Inhalte gar nicht erst geladen werden müssten?

Die Ladegeschwindigkeit einer Webseite ist seit einiger Zeit ein Rankingfaktor für die Suchmaschine Google. Jedes eingesparte Byte an Ladezeit kann hier für eine bessere Bewertung sorgen.
Mit Responsive Webdesign können Inhalte für die unpassende Bildschirmgröße ausgeblendet werden, geladen werden diese aber in der Regel trotzdem.

Gerade bei Navigationen, die auf dem Desktop-Rechner einfach völlig anders aussehen und funktionieren soll als die Desktop-Variante, ist eine „Browserweiche“ für die Inhalte eine prima Idee. Mit ein wenig JavaScript, Cookies und PHP lässt sich das realisieren.
Durch das Nichtladen von unpassenden Inhalten, tauchen diese natürlich auch nicht im Quelltext der Seite auf.

Inhalte „responsiv“ nachladen

Bei den meisten meiner Projekte verzichte ich auf WordPress und Co. Das Weblayout wird erstellt und in einzelne Dateien aufgesplittet, die einfach per PHP-Include geladen werden. Das vereinfacht die Pflege von Headern, Footern, Navigationen, Sidebars und so weiter.

Um die Navigation gleichzeitig an mobile Geräte und Desktops anzupassen und dabei auch noch schön zu halten, sind manchmal einige CSS-Verrenkungen nötig. Sinnvoll ist es also für die jeweilige Auflösung die passende Datei zu inkludieren.

Dazu ist es erstmal nötig, die aktuelle Bildschirmauflösung zu ermitteln. Dazu kann mit JavaScript einfach der aktuelle Media-Query ausgelesen werden. Die Funktion matchMedia() macht’s möglich:

MatchMedia() liest die Bildschirmgröße aus dem Media-Query aus und setzt einen Cookie mit dem Namen mobile. Ist der Bildschirm kleiner als 768 Pixel, enthält der Cookie den Wert 1, ansonsten den Wert 0.
Dieses kleine Script muss natürlich im Quellcode der Webseite vor den PHP-Includes ausgeführt werden, die hiervon beeinflusst werden sollen.

Den Cookie mit PHP auswerten

Das Auslesen des von JavaScript eben gesetzten Cookies kann später ganz einfach mit PHP und der Systemvariablen $_COOKIE ausgelesen werden. Man muss natürlich den Namen des Cookies kennen:

Testen lässt sich das Ganze dann ganz einfach im Firefox unter Entwicklertools – Bildschirmgrößen testen oder indem einfach das Browserfenster zusammengeschoben wird. Die Seite muss natürlich zum Testen verschiedener Auflösungen immer neu geladen bzw. aufgerufen werden.

Inhalte für große Bildschirme

Inhalte für Auflösungen über 768 Pixel

 

Inhalte für mobile Ansicht

Inhalte für Auflösungen unter 768 Pixel

Dieses Vorgehen ist ganz praktisch um nicht benötigten Code einfach draußen zu lassen und deutlich weniger aufwändig als eine separate mobile Version der Webseite zu bauen, nur um bestimmte Elemente nicht laden zu müssen.

 




Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.