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.
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.
The new responsive theme code is contained in the following directories (relative to your Magento installation directory)
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.
–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.js – Used 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
— The gift registry (EE only)
— Multiple wishlists (EE only)
— Place order by SKU (EE only)