Responsive Webdesign: Passende Inhalte zur Bildschirmgröße laden

Alexander Fischer

18. August 2015

Tipps für Webmaster

Mit Responsive Webdesign ermöglichen wir die passende Ausgabe von Webseiten auf Bildschirmen aller Größen. Auf Grund der verschiedenen Bildschirmgrößen müssen die Inhalte der Seite natürlich unterschiedlich dargestellt werden oder auch ganz entfernt werden. Dieser Artikel beschreibt einen Lösungsweg mittels Javascript, einem Cookie und PHP.

Seit einiger Zeit ist die Optimierung von Webseiten für Handys nicht nur eine Frage der Besucherfreundlichkeit sondern auch ein echter Rankingfaktor in Google und Co. Auch die Ladegeschwindigkeiten spielen heute eine wichtige Rolle für das Ranking und sind besonders beim Besuch einer Webseite über mobiles Internet ein wichtiger Punkt.

Die meisten Methoden des Responsive Webdesign blenden Inhalte auf Handys und Co leider nur optisch aus was zu erhöhten Ladezeiten führen kann. Mit der hier beschriebenen Methoden lässt sich das Laden von Inhalten aber so steuern das je nach Bildschirmgröße Inhalte geladen werden oder eben nicht geladen werden. Gerade durch das "Nichtladen" von unpassenden Inhalten, tauchen diese natürlich auch nicht im Quelltext der Seite auf.

Variante 1 für PHP Seiten

Diese Variante ist für PHP Seiten geeignet funktioniert dafür aber nicht in JavaScripten.

Inhalte "responsiv” nachladen

Im ersten Schritt müssen wir natürlich die aktuelle Bildschirmgröße ermitteln, da das mit PHP nicht funktioniert müssen wir dazu JavaScript nehmen. Mit einem Media-Query und der Funktion matchMedia() die Bildschirmgröße auszulesen und in ein Cookie zu schreiben.

<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>

Das Beispiel schreibt ein Cookie namens "mobile" und setzt bei einem Bildschirm mit der Breite 768px oder mehr in den Wert 0 in das Cookie. Bei einer Bildschirmbreite von weniger als 768px wird in das Cookie eine 1 geschrieben.

Das Script muss im "Head" der Webseite eingefügt werden.

Den Cookie mit PHP auswerten

Um das Cookie mit PHP auszulesen muss die Systemvariable $_COOKIE verwendet werden. Natürlich ist es wichtig das man das Cookie "mobile" ausliest, wer also den Code oben anpasst muss hier den Cookienamen beachten.

<?php
$checkmobile = $_COOKIE["mobile"];
if ($checkmobile == "1")
{
echo ("Inhalte für mobile Ansicht.");
}
else
{
echo ("Inhalte für große Bildschirme");
};
?>

In diesem Beispiel wird einfach bei einer Bildschirmgröße von 768px oder weniger der Text "Inhalt für mobile Ansicht" ausgegeben. Bei größeren Bildschirmen wird "Inhalt für große Bildschirme" angezeigt. Zum Testen kann man seine Testseite einfach mit entsprechend großen Browserfenstern laden. Mit dieser Methode können Sie also einfach den Code draußen lassen welchen Sie für die entsprechenden Darstellungen (Handy / Desktop) nicht benötigen.

Variante 2 für JavaScripte

Innerhalb von Javascripten kann der folgende Code verwendet werden. Diese Variante kommt dabei vollkommen ohne Cookies aus.

Auslesen der Bildschirmgrößen

Im ersten Schritt müssen wir natürlich wieder die aktuelle Bildschirmgröße ermitteln. Dazu werden wir mit einem Media-Query und der Funktion matchMedia() die Bildschirmgröße auszulesen und eine passende Variable dazu schreiben.

function screenMatches() {
 var s = {};
 if (window.matchMedia) {
 /* Großer Desktop */
 s.largeDesk = window.matchMedia("(min-width: 1200px)").matches;
 /* Normaler Desktop */
 s.usualDesk = window.matchMedia("(min-width: 980px) and (max-width: 1199px)").matches;
 /* Tablet im Landscape Format und kleine Desktops */
 s.tabAndDesk = window.matchMedia("(min-width: 768px) and (max-width: 979px)").matches;
 /* Handy im Landscape Format (quer) oder Tablets */
 s.uptoPortTab = window.matchMedia("(max-width: 767px)").matches;
 /* Handys im Portrait Format */
 s.uptolandPh = window.matchMedia("(max-width: 480px)").matches;
 }
 return s;
}

Das Beispiel setzt bei einem Bildschirm mit der Breite von 768px bis 979px die Variable "tabAndDesk". Bei einer Bildschirmbreite von weniger als 768px dann die Variable "uptoPortTab" gesetzt.

Verwendung zum Anzeigen der Inhalte

if ( screenMatches().tabAndDesk ) {
 // Inhalt für kleine Desktops und Tablets
} else {
 // anderer Inhalt
}

In diesem Beispiel wird einfach bei einer Bildschirmgröße von 768px bis 979px der erste Bereich des JavaScriptes und dessen Inhalte verwendet und bei jeder anderen Bildschirmgröße der zweite Teil. Das das Script die Fenstergröße des Browsers ausliest kann zum Testen das eigenen Browserfester in der Breite angepasst werden. Beim Neuladen der Seite wird dann der entsprechende Inhalt verwendet.