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:
|
1 2 3 4 5 6 7 |
<script> if (window.matchMedia("(min-width:768px)").matches) { document.cookie = 'mobile=0'; //Bildschirm ist mind. 768px breit } else { document.cookie = 'mobile=1'; //Bildschirm ist kleiner als 768px } </script> |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?php $checkmobile = $_COOKIE["mobile"]; if ($checkmobile == "1") { echo ("Inhalte für mobile Ansicht."); } else { echo ("Inhalte für große Bildschirme"); }; ?> |
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 Auflösungen über 768 Pixel
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.