About 2 weeks ago, we released a trailer of JA Elastica. The trailer introduces how the Elastica template "transforms" dynamically into different design states in order to shine on desktops, touch devices (iPad, kindle fire..), iPhones or other mobile devices.
I. JA Elastica vs Transformer 3
Transformer 3 vs JA Elastica
Web Design that transforms
Like Bumblebee, one of the Transformers 3, is able to switch to a car to run faster, into a machine gun to fight for the good and spread his wings and take off to a flying rocket, our Elastica template adapts its shapes to your screen size. It has the potential to become a world-changing template for the Joomla community. Always ready for the user's (screen) needs.
Let's see how it transforms itself in different browser resolution widths.
1280px or larger
The Robots in the most powerful shape vs JA Elastica in standard desktop view
From 640px to 1280px
The Robots in a off-road mode vs JA Elastica for touch readers
640px or smaller
The Robots in small crowded street vs JA Elastica's " & convinient" view for mobile lovers
II. In the making: How Elastica "transforms" ?
JA Elastica listens to the user's browser and its viewport, always ready and query when adaptation is required. This is how "responsive" design should be, your template listens and responses with a web design according to the client's request.
1. Adapting to the Screen Resolution with Media Queries
With media queries we are able to deliver different CSS files to the browser, depending on the screen resolution. A lot of testings on different devices and CSS code lines needed to be done.
css/layout-mobile.css css/layout-mobile-port.css css/layout-tablet.css css/layout-normal.css css/layout-wide.css
2. Responsive Website Elements
2.1. Responsive Grids, Layout
Switch between 5 columns to 1 column with a responsive grid. Take care where to place your content as when the template responses, the content in the columns moves to another position.
2.2 Responsive Images
Websites need proper image presentation to support the copy and the auther's story. With responsive images the template displays the image in the right way as your text floats.
2.3 Responsive Forms, Menus
The menu and forms are interactive elements. Higher resolution screens offer more space for navigation choices and form input fields. Lower resolution screens require simplified navigation & interaction in order to give the user the key content quickly.
2.4 Responsive Font-size
The same story here. Big displays offer space for attractive headlines which is balanced with the design and content. On smaller displays you want the design and balance to be kept consistent. The right typography at the right time.
3. Under the hook
3.1 jQuery Masonry
We have integrated the jQuery Masonry developed by David DeSandro to provide a smooth grid-layout transformation from 5 columns to 1 column. Which lets the Joomla modules flow with the screen resolution.
3.2 Content "Response" and Performance matters
Beside moving content module from left to right or top to bottom, there is a common practice for Responsive Design that some "extra" or "optional" contents like ads, reference information that can be hidden in small resolution. In Elastica, for example:
The ad content of the website can be loaded in the 5th column which only "ajax" loads if the screen is wider than 1280px. The code works in a way that such ad banner won't be "requested" if the media query finds that screen resolution is smaller than 1280px.
4. Awesome, download & release information?
We don't have a plan to release JA Elastica for 1.5 however the upgraded version for Joomla 2.5 has already now in the SVN.
Share your feedback...
You have seen several featured Joomla templates for the past few years such as magazine/news portal series: Teline I, Teline II,Teline III,Teline IV, social/event/community spotlight: JA Social, JA Sulfur, JA Community Plus, first & #1 onepage design JA Cloris and now this outstanding Joomla responsive template. Our templates have been built with years of experience, inspiration and lesson-learned from YOU, the Joomla community. The best way to learn is to listen and adapt from feedback. We hope you share with us your opinion so we can collect all of them and release a better version of this featured template in the near future.