Mobile SEO – Einfaches responsives Design in Joomla! umsetzen

Mit dem Begriff Responsive Design verband man bisher nur die Vorstellung, dass Webseiten auf mobilen Endgeräten gut aussehen sollen. Wer bisher keine Besucher mit mobilen Endgeräten hatte, der musste sich darum keine Sorgen machen. Mit den neuen Richtlinien von Google, die am 21. April 2015 in Kraft treten werden, sollte man sich die Umstellung auf ein responsives Design gründlich überlegen.

Wie Google wieder das Internet verändert

Bereits mit der Veröffentlichung der Google Webmasterrichtlinien stellte der Suchmaschinenanbieter neue Regeln auf, die definieren, wie gut eine Webseite gefunden wird. Damals fokussierte sich Google vor allem auf die Robot.txt und die damit geladenen CSS- und JavaScript-Dateien. Am 21. April steht nun eine neue Version der Richtlinie an, die das Thema „Mobile Friendly“ im Auge hat. Mit dieser Richtlinie sollen Webseiten beim Ranking bevorzugt behandelt werden, die eine mobile Ansicht anbieten.

Joomla! 3.x und das responsive Design

Eine der größten Neuerungen von Joomla! 3.0 war die Integration des Bootstraps-Frameworks in der Version 2. Mit dieser Neuerung wurde es den Template-Entwicklern sehr leicht gemacht, nur mit Hausmitteln ein responsives Design zu entwerfen. Als Beispiel wurde dann auch das neue Protostar-Template als Standard gesetzt, welches komplett auf dem Framework basiert.

Joomla! 3.x zu benutzen bedeutet jedoch nicht automatisch, dass eure Webseite auch auf mobilen Endgeräten gut aussieht. Viele Template-Entwickler nutzten die neuen Elemente und Funktionen nicht, sondern vertrauten auf das Altbewährte. Deshalb möchten wir heute ein schickes und nettes Template vorstellen, welches sogar mit der neusten Version des Bootstrap-Frameworks arbeitet.

Joomla!3_default_template

Template mit vielen Styles: Master Bootswatch

Bei den meisten Templates ist das Design nicht einheitlich. Darüber hinaus bieten diese nur begrenzte Möglichkeiten. Mit dem Master-Bootswatch-Template kommen ganze 17 verschiedene Styles, aus denen du dir deine Favoriten aussuchen kannst.

Der Style „Paper“ orientiert sich an Android-Version 5.0 und dem Material-Design. Wer eher aus der Apple-Welt kommt, wird bei der Auswahl sicher auch bei „Spacelab“ kurz hängen bleiben.

Im Gegensatz zu Templates wie Protostar nutzt das Template eher sprechende Namen für die Modulpositionen. Damit der Umzug auf ein neues Template besser gelingt, findest du in der nachfolgenden Tabelle die Übersetzung der Modulpositionen. Falls eine Position im jeweils anderen Template nicht vorhanden ist, wurde sie hier auch nicht aufgeführt.

Tipp: Wenn die Option der Vorschau in den Optionen des Template Managers aktiviert wird, könnt ihr die Modulposition über die URL „www.meine-domain.de/?tp=1“ einsehen.

Position Protostar Position Master Bootswatch
position-0 top
position-1 navigation
position-3 content-top
position-7 right
position-8 left
position-2 content-bottom


Im Gegensatz zu Protostar bietet das neue Template noch einige weitere Zusatzpositionen, um die Webseite noch besser planen zu können. Das Template kann direkt von Github heruntergeladen werden. Auch die Joomla! User Group Karlsruhe setzt auf dieses Template.

Die Webseite zur App machen

Bestimmt ist es jedem von euch schon einmal aufgefallen: Manche Webseiten lassen sich auf mobilen Geräten wie eine Art App abspeichern. Beispiele hierfür sind die mobilen Webseiten der deutschen Bahn oder die Seite Chip.de. Speichert man diese als Lesezeichen auf dem Homescreen des Smartphones ab, entsteht dort automatisch ein App-Logo.

Auch Master Bootswatch verfügt über eine solche Funktion und unterstützt dabei sogar verschiedene Geräteauflösungen. Um diese Funktion zu nutzen, müsst ihr das Icon, welches als App-Icon dargestellt werden soll, im „Image“-Ordner des Templates ablegen. Damit das Icon auf allen Geräten gut dargestellt wird, müsst ihr es in diesem Ordner in drei verschiedenen Größen speichern. Die Größen sind jeweils 57×57 Pixel, 72×72 Pixel und 144×144 Pixel. Diese Dateien müsst ihr dann wie folgt je nach Größe benennen:

  • apple-touch-icon-57×57-precomposed.png
  • apple-touch-icon-72×72-precomposed.png
  • apple-touch-icon-114×114-precomposed.png

Auch wenn hier Apple-Touch-Icon steht, werden die Icons natürlich auch auf allen Android-Geräten angezeigt.

 Das könnte dich auch interessieren

Diesen Beitrag bewerten:

Hinterlasse eine Antwort

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