Mobile SEO – Implementing a Simple Responsive Design in Joomla!

Up to this point, responsive design has only been associated with websites looking good on mobile devices. Everyone who did not have any visitors with mobile devices, did not have to worry about it. The new Google guidelines taking effect on April 21, 2015 will make it necessary for everyone to thoroughly think about switching to a responsive design.

How Google changes the Internet (again)

The search engine provider has already set new rules defining how well a website is found with the Webmaster Guidelines. Back then, Google mainly focused on the robots.txt and the CSS and JavaScript files loaded with it. On April, 21 a new version of the guidelines focusing on the topic “mobile-friendly” will be released. According to these guidelines, websites that are fully optimized for mobile will be rewarded in the ranking.

Joomla! 3.x and Responsive Design

One of the biggest new features of Joomla! 3.0 has been the integration of the version 2 Bootstrap framework which made it really easy for template developers to create a responsive design themselves. As an example, the new Protostar template which is based completely on the framework was set as the default template. However, using Joomla! 3.x does not automatically mean that your website looks good on mobile devices. Many template developers did not use the new elements and functions, but rather stayed with things tried and trusted. For this reason, we would like to introduce a neat and stylish template today which even works with the latest Bootstrap framework version.


The Template with Many Faces: Master Bootswatch

In the case of many templates, the design is not consistent. Morevover, they only provide limited options. The Master Bootswatch template offers 17 different styles from which you can choose your favorite one. The styles differ from each other in many ways and are often based on popular models. For example, the style “paper” is oriented towards the Android version 5.0 and the “material” design used along with it. More Apple-affine people might consider looking at “Spacelab” when choosing a style.

In contrast to templates such as Protostar, it uses descriptive names for the module positions. In order to facilitate the switch to a new template, the following table contains a mapping of the module positions. If a position is not available in one of the templates, it is not listed here.

 Tip: If the preview option is enabled in the Template Manager options, you can see the module position via the URL “”

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

In contrast to Protostar, the new template offers some additional features to better plan your website. The template can be downloaded directly from Github. The Joomla! User Group Karlsruhe also bets on this template.

Turning a Website into an App

We are sure you have noticed this already: Some websites can be saved on mobile devices more or less like an app. If you bookmark such a website on a smartphone’s home screen, an app logo is automatically created there. Master Bootswatch also provides a feature like this and even supports different device resolutions. To use this feature, you have to store the icon which is supposed to be displayed as the app icon in the “Image” folder of the template. In order to be well-displayed on all devices, you need to save three different sizes of the image in this folder. 57×57 pixels, 72×72 pixels and 144×144 pixels. These files then have to be named according to their size:

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

Even though it says apple-touch-icon here, the icons will of course be displayed on all Android devices as well.

You might also like

Please rate this post :

Leave a Reply

Your email address will not be published. Required fields are marked *