JA Elastica - Free Responsive Web Design template for Joomla is released

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.

Dim lights Embed Embed this video on your site

I. A. 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 it 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 transform 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 testing on different devices and CSS code lines needed to be done.


<file media="only screen and (max-width:719px)">css/layout-mobile.css</file>
<file media="only screen and (max-width:479px)">css/layout-mobile-port.css</file>
<file media="only screen and (min-width:720px) and (max-width: 985px)">css/layout-tablet.css</file>
<file media="only screen and (min-width:986px) and (max-width: 1235px)">css/layout-normal.css</file>
<file media="only screen and (min-width:1236px)">css/layout-wide.css</file>

<link rel="stylesheet" href="http://www.joomlart.com/ja_elastica/templates/ja_elastica/css/layout-mobile.css" type="text/css" media="only screen and (max-width:719px)"  />
<link rel="stylesheet" href="http://www.joomlart.com/ja_elastica/templates/ja_elastica/css/layout-mobile-port.css" type="text/css" media="only screen and (max-width:479px)"  />
<link rel="stylesheet" href="http://www.joomlart.com/ja_elastica/templates/ja_elastica/css/layout-tablet.css" type="text/css" media="only screen and (min-width:720px) and (max-width: 985px)"  />
<link rel="stylesheet" href="http://www.joomlart.com/ja_elastica/templates/ja_elastica/css/layout-normal.css" type="text/css" media="only screen and (min-width:986px) and (max-width: 1235px)"  />
<link rel="stylesheet" href="http://www.joomlart.com/ja_elastica/templates/ja_elastica/css/layout-wide.css" type="text/css" media="only screen and (min-width:1236px)"  />

2. Responsive Website Elements

2.1. Responsive Grids, Layout

Switch between 5 column 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 offers more space for navigation choices and form input fields. Lower resolution screens requires 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 column to 1 column. Which let's 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 content" 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" load 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 find that screen resolution is smaller than 1280px.

4. Awesome, download & release information?

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.

Login to post comments

Custom HTML

This is a custom html module. That means you can enter whatever content you want.

Login

Who's Online

We have 21 guests and no members online