Mobile Webseiten erstellen

Webseiten für Smartphones und Tablets zu optimieren ist seit dem „Mobile-Friendly-Update von Google“ wichtiger denn je geworden. Lesen Sie in diesem Artikel, welche Möglichkeiten der Erstellung mobiler Webseiten es gibt. Gerne unterstützen wir Sie auch bei der Umsetzung.

Mobile Webseite erstellen lassen

Die mobile Optimierung von Webseiten wird für gute Rankings in der mobilen Suche von Google unabdingbar.

Das Surfverhalten im Internet hat sich grundsätzlich geändert. Das Smartphone ist aus dem modernen Alltag nicht mehr wegzudenken. Wo auch immer man sich bewegt, so begleiten einen die mobilen Alleskönner. Seit dem „Mobile-Friendly-Update“ von Google - das große Suchalgorithmus-Update vom 21. April 2015 - ist für viele Webseitenbetreiber das „Mobilegeddon“ eingetreten. Eine für mobile Geräte optimierte Webseite ist ein absolutes Muss geworden.

Erfahren Sie in diesem Artikel, welche technischen Möglichkeiten es gibt und wie Sie diese umsetzen können. Gerne stehen wir Ihnen als Experten zur Seite.

Die wichtigsten Anforderungen an eine mobile Webseite auf einen Blick:

  • angepasste Darstellung für unterschiedliche Bildschirmgrößen
  • gut lesbare Texte mit großem Zeilenabstand
  • barrierefreie Seitennavigation ohne Dropdownmenüs
  • schneller Webseitenaufbau
  • optimierte Bilder und Grafiken

Responsive Webdesign - Dynamische Bereitstellung durch Browsererkennung - Weiterleitung auf mobile URLs

Es gibt insgesamt drei Methoden zur Umsetzung einer mobilen Webseite, die allesamt den Anforderungen von Google gerecht werden. Dabei handelt es sich dabei um:

  1. Responsive Webdesign
  2. Dynamische Bereitstellung
  3. Weiterleitung auf mobile URLs (bspw. m.domain.tld)

Die erste Methode reagiert dabei auf die Bildschirmgröße des Gerätes, die beiden letztgenannten Methoden werden durch Browsererkennung (Erkennung des User-Agents) umgesetzt.

Responsive Webdesign

Bei der Umsetzung einer Webseite im Responsive Webdesign werden für alle Geräte dieselben Inhalte bereitgestellt, jedoch je nach Bildschirmgröße unterschiedlich dargestellt. Das Viewport-Meta-Tag-Element bestimmt den Darstellungsbereich der Webseite. Die Darstellung selbst variiert dabei in Abhängigkeit von der Bildschirmbreite mittels sogenannter Media Queries (Screen) und jeweils verschiedener CCS-Anweisungen für ein Element.

Umsetzung des Responsive Webdesign

Zuallererst muss der Darstellungsbereich der Webseite bestimmt werden. Diese Angabe wird direkt im <header> der Webseite vorgenommen. Fügen Sie dafür folgenden Quellcode in Ihren Dokumenten-Header ein:

<meta name="viewport" content="width=device-width, initial-scale=1">

Um benutzerseitige Darstellungsfehler zu vermeiden, empfehlen wir darüber hinaus das herein- und herauszoomen auf der Webseite zu unterbinden. Dazu müssen Sie den zuvor gezeigten Quellcode wie folgt erweitern:

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

Mit den bereits erwähnten CSS Media Queries können nun in Abhängigkeit der Bildschirmgröße verschiedene Anweisungen für ein Objekt vergeben werden. Dies könnte wie folgt aussehen:

HTML-Code

<div class="wrapper">
  <div class="inner">&nbsp;</div>
</div>

Es wird an dieser Stelle ein einfaches, umschließendes DIV-Element sowie ein darin befindliches DIV-Element erzeugt. Diese können nun in Abhängigkeit der Bildschirmbreite verschiedene Anweisungen der Darstellung erhalten.

CSS-Code

.wrapper {
  margin: 0 auto;
  width: 960px;
}
.wrapper > .inner {
	margin-left: 25px;
	margin-right: 25px;
}

@media (min-width:768px) and (max-width:979px) {
  .wrapper {
	width: 744px;
  }
  .wrapper > .inner {
    margin-left: 15px;
    margin-right: 15px;
  }
}

@media (max-width:767px) {
  .wrapper {
	width: 99%;
  }
  .wrapper > .inner {
    margin-left: 0;
    margin-right: 0;
  }
}

Für den Zugriff von einem Desktop-PC, also mit einer größeren Bildschirmbreite als 979 Pixel wird der umschließende DIV zentriert mit einer Breite von 960 Pixel dargestellt. Das innere DIV weist jeweils einen Abstand von 25 Pixel links und rechts auf.

Erfolgt nun der Zugriff mit einem Tablet, also einer gängigen Bildschirmbreite im Bereich von 768 Pixeln bis 979 Pixeln, so wird der umschließende DIV passenderweise auch nur mit einer Breite von 744 Pixeln dargestellt. Der Abstand des inneren DIV reduziert sich auf 15 Pixel.

Schlussendlich, wenn der Zugriff mit einem Smartphone erfolgt, also eine Bildschirm mit geringer Breite als 767 Pixel den Inhalt darstellen soll, wird die Breite des umschließenden DIV auf dynamische 99% gesetzt und der Abstand des inneren DIVs wird auf null gesetzt.

Dynamische Bereitstellung

Bei der dynamischen Bereitstellung von Inhalten muss serverseitig eine Abfrage erfolgen, um dabei herauszufinden, um was für einen User-Agent es sich bei dem Zugriff handelt. Diese Browsererkennung wird für die dynamische Bereitstellung, als auch für die Weiterleitung auf eine separate URL benötigt. Nachfolgend beschreiben wir die Umsetzung und Einbindung der Browsererkennung und gehen im Anschluss auf die Besonderheiten der Weiterleitung auf eine mobile URL ein.

Die serverseitige Browsererkennung

Bei serverseitigen Funktionen handelt es sich zumeist um PHP-Skripte. Diese führen bestimmte Abfragen oder sonstige Aufgaben auf dem Server durch. Das nachfolgend gezeigte PHP-Skript wird dabei beim Zugriff auf die Webseite versuchen herauszufinden, ob es sich um einen mobilen User-Agent handelt. Erstellen Sie eine PHP-Datei mit dem Namen mobile_browser_funktion.php und binden Sie diese sodann über den PHP-Befehl include() in Ihre index.php ein.

PHP-Code

<?php
function find_mobile_browser()
{
  if(preg_match('/(alcatel|android|blackberry|benq|cell|elaine|htc|iemobile|iphone|ipad|ipaq|ipod|j2me|java|midp|mini|mobi|motorola|nokia|palm|panasonic|philips|phone|sagem|sharp|smartphone|sony|symbian|t-mobile|up\.browser|up\.link|vodafone|wap|wireless|xda|zte)/i', $_SERVER['HTTP_USER_AGENT']))
  {
    return true;
  }
  else
  {
  return false;
  }
}
?>

Bei der erwähnten index.php handelt es sich um eine sogenannte Template-Datei, die das Grundgerüst Ihrer Webseite darstellt. Diese sollte folgende Angaben beinhalten:

  • <!DOCTYPE...>
  • <html...>
  • <head>
  • <body>

In dem <body>-Bereich werden dann die eigentlichen Inhalte der Webseite ausgegeben. In diesem Artikel zeigen wir Ihnen zusätzlich eine Möglichkeit auf, mit Hilfe derer der Besucher Ihrer Webseite selbst entscheiden kann, ob er beim Zugriff mit einem mobilen Gerät tatsächlich die optimierte mobile Version der Webseite oder doch lieber die Desktop-Version der Webseite besuchen möchte.

Dazu können Sie dem Besucher einen Button bereitstellen, der zur Desktop-Version der Webseite führt, bzw. die Standardausgabe der Inhalte durch Setzen von Cookies ermöglicht. Diese speichern im Browser des Besuchers die Information, dass dieser trotz mobilem User-Agent lieber die Desktop-Variante der Webseite betrachten möchte.

Die Umsetzung der dynamischen Bereitstellung von Inhalten gestalten wir in diesem Beispiel so, dass je nach User-Agent entweder das mobile Stylesheet oder eben das Standardstylesheet eingebunden wird. Diese nennen wir:

  • mobile.css
  • desktop.css

Für die Bereitstellung der verschiedenen Inhalte binden wir in dem Skript-Beispiel zwei unterschiedliche PHP-Inhalts-Dateien ein. Es empfiehlt sich, für die mobile Version ein einspaltiges Layout und für die Desktop-Version ein mehrspaltiges Layout umzusetzen. Die beiden Inhalts-Dateien bezeichnen wir als:

  • mobile_inhalt.php
  • desktop_inhalt.php

Quellcode der gesamten index.php

<?php
// Damit die Funktion header-Location funktioniert
ob_start();
// Browsererkennungsfunktion einbinden
include('mobile_browser_funktion.php');
// Browsererkennungsfunktion abrufen
$mobile_browser = find_mobile_browser();
// Cookies setzen (Benutzer möchte zur Desktop-Ansicht wechseln, hier wird der Cookie für eine Stunde gespeichert)
if(isset($_REQUEST['sessionview_desktop']))
{
  setcookie('sessionview', 'desktop', time() + 3600);
  header('Location: http://ihre-domain.tld/');
}
// Cookies zerstören (Benutzer möchte doch wieder zur Mobile-Ansicht wechseln)
elseif(isset($_REQUEST['sessionview_mobile']))
{
  setcookie('sessionview', 'mobile', time() - 3600);
  header('Location: http://ihre-domain.tld/');
}
?>
<!DOCTYPE...> <!-- gekürzte Fassung -->
<html...> <!-- gekürzte Fassung -->
<head>
<title>...</title>
<!-- Ihre META-Angaben -->
<!-- Stylesheets (Layout) für die Mobile-Version und Desktop-Version Ihrer Internetseite -->
<?php
// Mobile-Ansicht
if($mobile_browser && $_COOKIE['sessionview'] != 'desktop')
{
  // Mitteilung an den Browser (speziell Opera Mobile), dass es sich um eine für Smartphone optimierte Seite handelt
  echo '<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />';
  // CSS für Mobile-Ansicht
  echo '<link rel="stylesheet" href="mobile.css" type="text/css" media="screen" />';
}
else
{
  // CSS für Desktop-Ansicht
  echo '<link rel="stylesheet" href="desktop.css" type="text/css" media="screen" />';
}
?>
</head>
<body>
<?php
// Content Mobile-Ansicht
if($mobile_browser && $_COOKIE['sessionview'] != 'desktop')
{
  include('mobile_inhalt.php');
  // Button für das Wechseln der Ansicht durch den Benutzer
  if($mobile_browser)
  {
    echo '<a href="'. $_GET['url'] .'?sessionview_desktop=1">Zur Desktop-Ansicht wechseln</a>';
  }
}
// Content Desktop-Ansicht
else
{
  include('desktop_inhalt.php');
  // Button für das Wechseln der Ansicht durch den Benutzer
  if($mobile_browser && $_COOKIE['sessionview'] == 'desktop')
  {
    echo '<a href="'. $_GET['url'] .'?sessionview_mobile=1">Zur Mobile-Ansicht wechseln</a>';
  }
}
?>
</body>
</html>
<!-- Ebenfalls für die Sicherstellung der header-Location-Funktionalität -->
<?php ob_end_flush(); ?>

In den ersten Zeilen des Quellcodes sollten Sie den PHP-Befehl ob_start(); und in den letzten Zeilen den Befehl ob_end_flush(); einbauen. Damit stellen wir sicher, dass die PHP-Funktion header('Location: http://ihre-domain.tld/'); korrekt ausgeführt wird. Diese darf normalerweise nämlich nur direkt am Anfang des Quellcodes stehen; das bedeutet, es darf nichts davor ausgegeben werden.

Mit den Befehlszeilen, die mit den Code-Teilen

  • if(isset($_REQUEST['sessionview_desktop']))
  • elseif(isset($_REQUEST['sessionview_mobile']))

beginnen, wird geprüft, ob ein Benutzer mit mobilem Endgerät - denn nur dieser sieht den Link-Button „Zur Desktop-Ansicht wechseln“ - den besagten Ansichtswechselbutton geklickt hat. Dabei wird in der Browser-Url ihre-domain.tld/?sessionview_desktop=1 aufgerufen. Sobald dies geschieht, wird ein Cookie mit einer Haltwertzeit von einer Stunde (3.600 Sekunden) gesetzt. Klickt der Besucher, der nun die normale Standardansicht Ihrer Seite betrachtet, auf den, wieder nur für Ihn als mobiler Surfer sichtbaren Link-Button „Zur Mobile-Ansicht wechseln“, so wird der Cookie, durch aufrufen der Browser-URL ihre-domain.tld/?sessionview_mobile=1 wieder „zerstört“ und die Haltwertzeit dessen um 3.600 Sekunden reduziert.

Weiter werden in Abhängigkeit des User-Agent und dem ggf. gesetzten Cookie die unterschiedlichen Inhalte mit den PHP-Befehlen

  • include('mobile_inhalt.php');
  • include('desktop_inhalt.php');

„inkludiert“.

Weiterleitung auf mobile URL

Zu guter Letzt besteht die Möglichkeit - wiederum in Abhängigkeit des User-Agents, der mittels serverseitiger Browsererkennung ermittelt wird - den Besucher beim Zugriff über mobile Geräte auf eine mobile URL weiterzuleiten. Diese können dabei wie folgt aufgebaut sein:

  • mobile.ihre-domain.tld
  • m.ihre-domain.tld

Dabei handelt es sich schlicht und ergreifend um eine Subdomain zu Ihrer Hauptdomain, die dann wiederum für Smartphones optimiert wird.

Umsetzung der Weiterleitung

Erstellen Sie wie bereits im Kapitel zur dynamischen Bereitstellung beschrieben die mobile_browser_funktion.php und binden Sie diese anschließend über den PHP-Befehl include() in Ihre index.php ein. Der Quellcode dafür sollte wie folgt aufgebaut werden.

Quellcode der index.php

<?php
// Wieder ganz am Anfang Ihrer index.php
include('mobile_browser_funktion.php');
$mobile_browser = find_mobile_browser();
if($mobile_browser &&$_SERVER['HTTP_HOST'] != 'm.ihre-domain.tld')
{
  header('Location: http://m.ihre-domain.tld/');
}
else
{} // Aufbau des Desktop-PC Seiten-Templates
?>

Die Wahl der besten Methode zur Umsetzung einer mobilen Webseite.

Bei der Wahl der passenden Methode zur Erstellung einer mobilen Webseite kommt es primär natürlich auf die persönlichen Anforderungen an die Webseite an. Möchten Sie tatsächlich zwei ganz unterschiedliche Webseiten erstellen, empfiehlt sich die Weiterleitung auf eine mobile URL. Wenn Sie hingegen gerne auf einer Webseite unterschiedliche Inhalte oder Templates einbinden wollen, ist die dynamische Bereitstellung von Inhalten sinnvoll. Am gängigsten und vor allem einfachsten zu pflegen und umzusetzen dürfte das Responsive Webdesign sein.

Responsive Webdesign

Responsive Webdesign

  • gleiche URL für jeden User-Agent
  • reduzierter Wartungsaufwand
  • positives Crawling der Webseite
Responsive Webdesign
Dynamische Bereitstellung von Inhalten

Dynamische Bereitstellung von Inhalten

  • gleiche URL für jeden User-Agent
  • unterschiedliche HTML-Inhalte
  • User-Agent-Erkennung fehlerbehaftet
  • höherer Wartungsaufwand
Dynamische Bereitstellung von Inhalten
Weiterleitung auf mobile URL

Weiterleitung auf mobile URL

  • zwei unterschiedliche Webseiten
  • User-Agent-Erkennung fehlerbehaftet
  • sehr hoher Wartungsaufwand
  • mögliche Fehler in der Verlinkung
Weiterleitung auf mobile URL

So setzen auch wir als Agentur für Medienproduktion und Gestaltung auf die Technologie des Responsive Design. Gerne beraten wir Sie für die Umsetzung Ihrer Projekte oder setzen diese in Gänze für Sie um. Haben Sie weitere Fragen zu diesem Artikel, so beantworten wir diese in den Kommentaren.

22 Kommentare Artikel vom von Marco Dittmer