This is our second template for Joomla that's powered by jQuery Mobile and Masonry JS. The main advantage of the responsive design approach is dynamically adjusted elements, depending of the users screen space and platform (desktop or mobile). Nowadays, when the percent of the "mobile" users is higher than ever (and still increasing), the necessity of the maintained user experience on the mobile devices is very important. Actually, in some occasions, it might be crucial for the usability and profitability of the site we are making.
There are two perfectly legitimate ways of handling the mobile users:
- Maintaining two versions of the same site, for mobile and desktop users.
- Making one responsive site that "respond" according to the user's hardware.
Responsive Portfolio template for Joomla obviously uses the second method. The main advantage of this method is that webmaster maintains only one site. So, there's less work in site maintenance. There are the downsides though. Working on the responsive layouts requires a specific design process and the results are usually cleaner designs without too much "bells and whistles". Even if such things exist in a design, they're usually disabled on the mobile platform.
In this template, we tried not to disable anything. Template will show all the elements, no matter if site visitor is on a Cinema Display or on an iPhone.
The upper part of the design is reserved for Hot Full Carousel module which displays slides of your choice (with or without text). The slides occupy the full screen width, no matter what the screen size is. The bottom part is created by Masonry JS which creates an order of Joomla (or K2) articles, depending of the available screen space. Try to resize your browser on the template demo and watch the template's reaction. The maximum width of the bottom area is set to 1485 pixels and it's decreasing on the smaller screens. In the footer area, you can see the 3 modules which are displayed in an horizontal row on larger screens or one above the other on the smaller screens.
We have tested this template with many core Joomla components and created specific layouts for K2 component. You can test all this in template demo, and you will probably wish to disable some of these features that you don't need. This will make your responsive portfolio cleaner.
Template Screen Shots
Template Key Features
- Responsive layout powered by jQuery Mobile for all devices and screen resolutions.
- 5 pre-defined styles with different main colors that's easily customizable in parameters. Endless color combination.
- HotStart (SQL dump) installer is available. It copies template with demo data and all modules used.
- Module positions on are available on the left and right (they are not shown on demo). They can change their places according to the screen size.
- Valid and optimized HTML, CSS and JavaScript code.
- Hot Full Carousel module included. Support for core Joomla components (such as RSS feed) and K2 component.
- Drop-down which is also useful mobile devices. It changes its layout on mobile devices for better user experience.
- Google Mobile-Friendly Test PASSED.
- This template has been tested with IE7+, Firefox, Chrome, Safari, Opera, as well as on mobile browsers (iPhone, iPad and Android).