Wie kann ich meine Drupal-Webseite für Mobilgeräte optimieren?

Bei der Suche auf Mobilgeräten möchten Suchende die relevantesten Ergebnisse erhalten. Da immer mehr Nutzer mit Mobilgeräten ins Internet gehen, muss Google seine Algorithmen anpassen, um bei dem neuen Nutzungsverhalten noch sinnvolle Ergebnisse zu liefern. In der Praxis wird das bedeuten, dass mobilfähige Seiten im Ranking bevorzugt werden, wenn eine Suchanfrage über ein Smartphone gemacht wurde.

Ab dem 21. April 2015 rollt Google das Update aus, mit dem die mobilfreundliche Ausgabe als Ranking-Faktor gehandelt wird. Die Änderung gilt global für alle Sprachen und wird laut Google eine große Auswirkung auf die Suchergebnisse haben.

Um zu testen, ob Ihre Webseite für Mobilgeräte optimiert ist, stellt Google die folgende Seite bereit: https://www.google.com/webmasters/tools/mobile-friendly.

Mobiloptimiert, aber wie?

In den letzten Jahren haben sich verschiedene Methoden zur Mobiloptimierung entwickelt. Eine Übersicht der drei Möglichkeiten gibt es bei Google.

Responsive Design

Mit dieser Methode wird die Ausgabe des Designs auf die vorhandene Bildschirmgröße angepasst. Es ist die von Google empfohlene Methode, da sowohl URL als auch HTML-Code des Inhalts gleich bleiben.

Details und Tipps von Google zu responsive Design

Separate Domain

Anfänglich besonders beliebt waren separate Domains. Die verwendete Technologie versucht, das Gerät der Nutzer zu erkennen und leitet sie auf eine andere Domain weiter. Ein Beispiel dafür ist m.spiegel.de. Diese Methode kann genutzt werden, erfordert aber zusätzliche Konfiguration.

Details und Tipps von Google zu separaten Domains

Dynamische Bereitungstellung / Dynamic Serving

Bei der dynamischen Bereitstellung übermittelt der Server unter derselben URL unterschiedlichen HTML- und CSS-Code, je nachdem, welcher User-Agent die Seite angefordert hat. Diese Methode ist fehleranfällig, kann aber mit zusätzlicher Konfiguration für den Googlebot genutzt werden.

Details und Tipps von Google zu Dynamic Serving

Wie mache ich meine bestehende Drupal-Seite schnell responsive?

Es soll alles bleiben wie es ist, es soll bloß einfach nur responsive werden? So einfach wie das klingt, ist es leider nicht. Der Aufwand hängt stark davon ab, wie komplex das bestehende Design ist und wie komplex es für Mobilgeräte werden soll. Für diesen Blogbeitrag gehen wir davon aus, dass lediglich ein paar Anpassungen gemacht werden sollen, um den Google-Test zu bestehen und in künftigen Google-Rankings keine Nachteile zu haben. Es ist jedoch zu empfehlen, eine gründliche Responsive-Optimierung für die nächsten Monate einzuplanen.

Viewport Metatag

Dieser Metatag sorgt für eine korrekte Skalierung der Website beim ersten Aufruf auf dem mobilen Gerät.

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

Die Angabe device-width zieht sich dann automatisch die Breite des aktuellen Geräts, denn es gibt nicht nur eine große Anzahl unterschiedlicher Bildschirmgrößen auf mobilen Geräten, sondern auch Hoch- und Querformat auf nur einem Gerät.

Durch Hinzufügen des Attributs initial-scale=1.0 wird der Browser angewiesen, eine 1:1-Beziehung zwischen CSS-Pixeln und geräteunabhängigen Pixeln herzustellen, unabhängig von der Ausrichtung des Geräts. So kann die Seite die gesamte Breite des Querformats nutzen.

Das Attribut user-scalable (in unserem Code-Beispiel nicht gezeigt) legt fest, ob der Nutzer auf der Webseite zoomen kann (yes) oder nicht (no). Standardmäßig, d.h. wenn das Attribut nicht angegeben wird, steht es auf yes, Nutzer können also zoomen. Es ist außerdem möglich, einen minimalen und einen maximalen Zoom festzulegen oder das Zoomen durch den Nutzer auch komplett zu deaktivieren. Diese Optionen beeinträchtigen jedoch die Zugänglichkeit und sollten im Allgemeinen vermieden werden.

Viewport Metatag in das Drupal-Theme einfügen

Die folgenden Erklärungen beziehen sich auf Drupal in der Version 7.x.

Man kann das Metatag entweder über einen Theme-Hook oder eine Template-Datei in das Theme einfügen.

Variante über Template-Datei: Die Theme-Datei html.tpl.php enthält die Angaben für den <head>, weshalb man das Snippet<meta name=viewport content="width=device-width, initial-scale=1">dort einfach einfügen kann. Möglicherweise existiert diese Datei aber nicht im Theme. In diesem Fall muss die Datei lediglich aus dem Drupal-Core in das Theme kopiert werden. Die Datei liegt im Ordner modules > system. Die Datei wird in das eigene verwendete Theme kopiert und anschließend bearbeitet. Das Metatag wird innerhalb des <head> eingefügt, sodass der Bereich dann so aussieht:

<head profile="<?php print $grddl_profile; ?>">
  <?php print $head; ?>
  <meta name=viewport content="width=device-width, initial-scale=1">
  <title><?php print $head_title; ?></title>
  <?php print $styles; ?>
  <?php print $scripts; ?>
</head>

Anschließend den Cache leeren und dann den Quelltext prüfen, es sollte nun das Metatag ausgegeben werden

Variante über Theme-Hook: Im verwendeten Drupal-Theme sollte eine Datei namens template.php existieren. Dort kann der folgende Code eingefügt werden, THEMENAME muss dabei mit dem Machine-Name des Themes ersetzt werden:

<?php
/**
 * Implements hook_page_alter().
 */
function THEMENAME_page_alter($page) {
  // Add meta tag for viewport.
  $viewport = array(
    '#type' => 'html_tag',
    '#tag' => 'meta',
    '#attributes' => array(
      'name' => 'viewport',
      'content' => 'width=device-width, initial-scale=1',
    ),
  );
  drupal_add_html_head($viewport, ‘viewport’);
}
?>

Inhalte an den Darstellungsbereich anpassen

Hinweis: Es gibt heutzutage viele verschiedene Möglichkeiten, dieses Ziel zu erreichen. Der Einfachheit halber nennen wir hier einen möglichst einfachen Weg.

Die Bildschirm-Abmessungen von Geräten können also stark variieren, nicht nur zwischen Smartphones und Tablets, sondern auch zwischen den diversen erhältlichen Smartphones am Markt. Der Darstellungsbereich muss deshalb so konfiguriert sein, dass die Seiten auf den vielen unterschiedlichen Geräten richtig ausgegeben werden. Da die Breite des Darstellungsbereichs in CSS-Pixeln variieren kann, sollte eine gute Ausgabe des Seiteninhalts keine bestimmte Breite (z. B.width: 360px;) des Darstellungsbereichs erfordern. Stattdessen sollten relative Breitenwerte wiewidth: 100%; angewandt werden. Wenn nun das bestehende Theme für Desktop-Geräte optimiert wurde, hat es vermutlich einige feste Breitenangaben. Um nur für Mobilgeräte einzelne Styles zu überschreiben, können wir Media-Queries verwenden. Am besten erstellt man ein eigenes Stylesheet und fügt es über die .info-Datei des Themes hinzu:

; Add a style sheet with media query
stylesheets[screen and (max-width: 680px)][] = css/style.mobile.680.css

Nach Änderungen an der .info-Datei muss der Drupal-Cache geleert werden. Die Angabe sorgt dafür, dass Drupal ein neues Stylesheet im<head>-Bereich ausgibt, und zwar mit einemmedia="(max-width: 680px)"in unserem Fall. Das Stylesheet mit Namen style.mobile.680.css muss außerdem im Theme vorhanden sein, und zwar im Unterordner css, weil wir das in der .info-Datei so angegeben haben.

Wir entscheiden uns für den Breakpoint 680px, ab dem die Seite keine festen Breiten mehr haben soll. Die Datei style.mobile.680.css muss Styles aus dem bisherigen Stylesheet überschreiben. Zum Beispiel könnte eine Angabe wie folgende definiert sein:

#page-wrapper {
width: 980px;
}

In unserer style.mobile.680.css würden wir das überschreiben:

#page-wrapper {
width: 95%;
}

Und schon ist dieser div-Container bei Bildschirmgrößen unter 680px nicht mehr 980px breit, sondern 95% der Bildschirmgröße.

Schriftgrößen, Margins und Paddings sollten relativ (em oder %) angegeben werden, für Bilder sollte eine Maximalgröße festgelegt werden, z. B. so:

img {
  max-width: 100%;
  height: auto;
}

Mit ausreichenden CSS-Kenntnissen kann man jetzt die bestehenden Styles seines Drupal-Themes Stück für Stück überschreiben.

Wir unterstützen Sie gern bei der Umsetzung, melden Sie sich einfach bei uns.