Responsive design with Joomla!


Leave your reply

The IONOS Community will no longer be available starting on 1 January 2021. We invite you to follow us on Twitter or Facebook.

If you have any questions about our products, you can find additional information in the IONOS Help Centre. Alternatively, our support team will be happy to help you on Twitter at @IONOS_help_UK.

The term Responsive Design was previously associated only with the idea that websites should look good on mobile devices. Anyone who has not had visitors with mobile devices so far did not have to worry about this. With Google's new guidelines coming into force on April 21, 2015, the transition to responsive design should be carefully considered.

How Google is changing the Internet again

Already with the publication of the Google Webmaster Guidelines, the search engine provider established new rules that define how well a website is found. At that time Google focused mainly on the Robot.txt and the CSS and JavaScript files loaded with it. On 21 April 2015, a new version of the directive was due to be issued, which had the topic "Mobile Friendly" in mind. This guideline is intended to give preference to websites that offer a mobile view when ranking.

Joomla! 3.x and the responsive design

One of the biggest new features of Joomla! 3.0 was the integration of the Bootstraps framework in version 2, which made it very easy for template developers to create a responsive design using only home resources. As an example, the new Protostar template was set as default, which is completely based on the framework.

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 trusted in the tried and tested. Therefore we would like to present today a nice and chic template, which even works with the latest version of the bootstrap framework.

Joomla! Standard layout

Template with many styles: Master Bootswatch

With most templates the design is not uniform. In addition, these offer only limited possibilities. With the Master-Bootswatch-Template there are 17 different styles to choose from.

The style "Paper" is based on Android version 5.0 and the material design. Those who rather come from the Apple world will surely get stuck for a short time with "Spacelab" as well.

In contrast to templates such as Protostar, the template rather uses meaningful names for the module positions. To make the move to a new template easier, you will find the translation of the module positions in the following table. If an item does not exist in the other template, it was not listed here.

Tip: If the preview option is activated in the Template Manager options, you can view 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

Turn the website into an app

I'm sure you've noticed it before: Some websites can be stored on mobile devices like a kind of app. Examples are the mobile websites of Deutsche Bahn or If you save these as bookmarks on the smartphone's home screen, an app logo is automatically created there.

Master Bootswatch also has such a function and even supports different device resolutions. In order to use this function, you must store the icon, which is to be displayed as an app icon, in the "Image" folder of the template. To ensure that the icon is displayed well on all devices, you must save it in this folder in three different sizes. The sizes are 57×57 pixels, 72×72 pixels and 144×144 pixels respectively. These files must then be named as follows, depending on their size:

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

Even if you see the Apple touch icon here, the icons are of course also displayed on all Android devices.

This article was published on 12 Sep 2018 by sebastian.zientek as part of the topic SEO ###ARTICLEINFO_SENTENCE_END###.