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)
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 “www.my-domain.com/?tp=1”
|Position Protostar||Position Master Bootswatch|
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:
Even though it says apple-touch-icon here, the icons will of course be displayed on all Android devices as well.