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
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.
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 "www.meine-domain.de/?tp=1".
|Position Protostar||Position Master Bootswatch|
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 Chip.de. 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:
Even if you see the Apple touch icon here, the icons are of course also displayed on all Android devices.