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 getreten sind, 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 2015 stand eine neue Version der Richtlinie an, die das Thema „Mobile Friendly“ im Auge hatte. 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! Standard-Layout

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 Sie sich Ihre Favoriten aussuchen können.

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, finden Sie 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önnen Sie 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

Die Webseite zur App machen

Bestimmt ist es Ihnen 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üssen Sie 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üssen Sie 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üssen dann wie folgt je nach Größe benannt werden:

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

Dieser Artikel wurde am 12 Sep 2018 von sebastian.zientek als Teil des Topics SEO erstellt.

Diskutieren Sie mit!