Magento (CE 1.9/EE 1.14) comes with default Responsive Design

WOW!!!!!! It is a great news, Magento coommunity edition(CE) 1.9 and Enterprise edition(EE) 1.14 default support with RESPONSIVE DESIGN.

Magento CE 1.9 and Magento EE 1.14 come with a new theme named rwd that implements Responsive Web Design (RWD) practices.

Magento CE’s and EE’s responsive theme uses mainly 3 new technologies of Magento, in that jQuery is already used, but now new version 1.10 is used.

1. Sass/Compass

Syntactically Awesome StyleSheets(Sass) is an extension of CSS3 which adds nested rules, variables, mixins, selector inheritance, and more. Sass generates well formatted CSS and makes your stylesheets easier to organize and maintain.

Compass is a Sass framework, designed to make the work of styling the web smooth and efficient. Compass helps Sass authors write smarter stylesheets and empowers a community of designers and developers to create and share powerful frameworks. Compass is a collection of helpful tools and battle-tested best practices for Sass.

2. jQuery

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

In Magento Responsive design edition, jQuery used for all custom JavaScript in the responsive theme. jQuery operates in noConflict() mode so it doesn’t conflict with Magento’s existing JavaScript library.

3. Additional JavaScript Libraries

All custom JavaScript is based on jQuery (v1.10.2)

Folder Structure

The new responsive theme code is contained in the following directories (relative to your Magento installation directory)

app/design/frontend/rwd
skin/frontend/rwd

All of the custom JavaScript in the responsive theme is contained in

skin/frontend/rwd/default/js/app.js.

To customize the responsive theme’s JavaScript, copy app.js to

skin/frontend/custompackage/customtheme/js

You have two choices to write your custom CSS styles

1. Write CSS in the Sass stylesheets using the same structure that the Magento responsive theme uses. This approach requires setting up a Compass compiler, but is strongly recommended.

2. Directly modify the CSS files that ship with the responsive theme and ignore the Sass files. While this approach might be simpler in the short run, the CSS files in the responsive theme were output by the Sass compiler and are therefore not conducive to being customized directly. This approach is not recommended.

In addition to jQuery, the following JavaScript libraries are included in the responsive theme,

enquire.js - Used to run JavaScript conditionally, based on viewport size.

imagesloaded.js - Used to determine whether images are fully loaded on the product detail page before activating zoom.

jquery.cycle2.min.js - Powers the rotating banners on the homepage (requires Magento’s sample data). This library can be removed if you aren’t using the sample data. If you want to implement slideshows, Owl Carousel is recommended over Cycle2, as it has true swipe support and has more options.

jquery.cycle2.swipe.min.js - Adds pseudo-swipe support to Cycle2.

matchMedia.js & matchMedia.addListener.jsUsed by enquire.js to provide support for Internet Explorer 9.

modernizr.custom.min.js - Adds classes to the tag to indicate whether browser supports certain CSS3 features and whether device is touch-enabled. The .touch and .no-touch classes are used in the Sass partials. They provide a Modernizr.mq function to test a media query in a cross-browser manner.

selectivizr.js - Adds support for CSS3 selectors in IE 6–8

elevatezoom/jquery.elevateZoom-3.0.8.min.js - Powers image zoom on product detail pages.

Exceptions to Responsive Web Design

Responsive design was not implemented for the following,
— Multiple address checkout
— Popular search terms page
— Popular search terms cloud
— Site map
— My Account—Billing Agreements
— My Account—Recurring Profiles
— E-mail templates
— Tags
— Polls
— Captcha
— The gift registry (EE only)
— Multiple wishlists (EE only)
— Place order by SKU (EE only)

Leave a Comment