VISIT AND LIKE OUR PAGE ON FACEBOOK
TAKE A LOOK AT OUR TWEETS ON TWITTER
SUBSCRIBE TO THE JOOMFREAK RSS FEED
CHECK OUT OUR PAGE ON GOOGLE +
VISIT OUR CHANNEL ON YOUTUBE

Account Details

Change your name, email, password or permanently delete your account. Change settings

We offer several ways you can get support from our experts: Support ForumKnowledgebaseNewsletter

Your Forum Posts

No posts to display.

Responsive templates for creating a website with Joomla

Written by joomfreak // Thursday, 09 January 2014 15:30
Responsive templates for creating a website with Joomla

There are various ways to build a website; one of the cheapest and most effective is to use an open-source system like Joomla and work from a template, i.e. a model for the various pages.

When choosing a template, ensure that it makes the site as readable and accessible as possible to ever-growing numbers of users. To that end, as there are now myriad ways for browsing the web, including on the move and via devices of different sizes and resolutions, it is vital that the pages are genuinely usable even on smartphones and tablets.


To see why, a brief glance at the latest figures on Italy’s mobile-internet market should suffice. Even though there is still a long way to go, in the 2 years 2012–2013, web use on mobile devices grew exponentially, stimulating new business and cementing the success of traditional e-commerce sites, too.
The range of formats and resolutions to grapple with is swelling day by day, forcing website builders to adapt continually.

The need for templates that display properly on mobile devices, too, is clear: remember the last time you tried to access a site on your smartphone and it was so hard to see that you had to pinch to zoom – you probably gave up and headed for a competing website that was easier to use. A great many potential leads are lost like this.

In practical terms, then, we have an opportunity to abandon the traditional web architecture, whose methods and dimensions tend to be predefined for viewing on a desktop PC.

Efforts to address these problems have led to responsive designs: web designs that can adapt to the browser dimensions, automatically resizing to keep the content optimally readable and usable.
It is a real revolution in the web arena, because it has also brought a radical change in the underlying approaches to website architectures.

The innovative germ at the heart of these templates is the fluid grids, which we can think of as a progression from the liquid layouts, which had already become the latest big thing.
In this case, rather than designing a layout based on a fixed number of pixels or on adjustable percentage values, we work in terms of proportions: when a layout is displayed in a small space (as on a mobile device) or is enlarged on a smart TV, all its component elements are resized and repositioned.

A good free responsive template doing the rounds is Oxygen, which is compatible with Joomla versions 2.5 and above and is fully tailorable.
Joomla supports customisation of multiple parameters; with responsive templates, many of them can be set up to suit your specific needs.

oxygen-template

This template is supremely versatile, making it ideal for developing a wide variety of sites: the modules can assume as many as 48 different positions, and there are 100 fonts and 3 colour variants, so the combinations are practically endless.

After downloading the template from the developer (www.joomla51.com/free-templates), go to the template’s control panel; from the top menu bar, select Extensions --> Template Manager --> Your Template Style.

Note that, when you install a template for Joomla, the system attributes the defined style as the default for that template.

You can get around this limitation simply by using the "Save as" function. That way, you can define several styles to assign to different pages of the site via the Assignment tab in the menu.

All the main parameters are editable directly from the Template Manager page, starting with the style, which you can set up by choosing from the options in the drop-down menu.
These include the fonts – 14 WebSafe fonts and over 100 Google fonts – allowing you to fully personalise every element of the page, from the body to the title of the article or module. Of course, you can also choose their colours.

01-Responsive-template-mockup-guide-joomfreak

In the Template Manager’s Logo section, you can set the parameters for the website logo and title, to exercise total control over arguably the most vital element of any webpage. To load your image, just click on the Select Image field and then position the logo within the page.

If you prefer a text-based logo, the template also lets you deactivate the image option: in this case, the logo will be replaced by the text that you enter (along with the brand slogan, if any), which you can then amend by choosing the font and colour via the dedicated selectors.

02-Responsive-template-mockup-guide-joomfreak

As for the Layout Options, there is no need to set the sizes of the elements manually: the default values will be adjusted automatically according to how many modules have been defined and positioned on the same line. The default regime can be disabled, if you wish to define the width of each individual page element yourself.

03-Responsive-template-mockup-guide-joomfreak

Finally, you can position the side columns in the layout on both sides or just one, to the right and/or left of the area dedicated to the content, choosing their respective widths.
Naturally, multimedia content and social pages can also be added (simply enter the relevant URL).

04-Responsive-template-mockup-guide-joomfreak

For specific purposes – e.g. for Google Analytics – it can be handy to add text bands both at Head level and in the template body, using the dedicated fields provided.

05-Responsive-template-mockup-guide-joomfreak

Since this is a responsive template, as we have mentioned, it is also mobile friendly and adjusts automatically to different devices.
Img courtesy of Oxygen.

Additional Info

  • Maira Ellerbe
    Maira Ellerbe - Thursday, 06 March 2014 13:32

    Joomla is one of the leading CMS in the world and also amongst the top notch ones for creating a website. It is quite user friendly that even a novice can use it with ease, the templates you have shared here are just stunning and surely help those who are planning to create a website on the same. Well, I do know a place called http://nulledwp.com/category/joomla-templates/ which hosts these stuffs, give it a try as well. 

Login to post comments
www.joomfreak.com Blog Responsive templates for creating a website with Joomla

joomfreak is not affiliated with or endorsed by the Joomla Project or Open Source Matters.
The Joomla logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.