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
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
From 640px to 1280px
640px or smaller
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.
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 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.
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 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?
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.