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

A. 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

Car Desktop

The Robots in the most powerful shape vs JA Elastica in standard desktop view

From 640px to 1280px

Car iPad

The Robots in a off-road mode vs JA Elastica for touch readers

640px or smaller

Car iPhone

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.

Responsive Grids, Layout

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.

Media Query

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.

Media Query

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.

Media Query

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?

p>JA Elastica for Joomla 1.7 is available for JA Club Member everyone to download, however the support and discussion will be available to our club members.

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.

Related Posts

BLOG COMMENTS POWERED BY DISQUS