Understanding Magento(CE 1.9/EE1.14) Responsive Theme Changes

The new responsive theme in CE 1.9/EE 1.14 is based on the existing base/default theme. The new responsive theme has about 130 template files that have been modified to better handle the needs of responsive development. Following are some of the changes that have been made in these template files,

— Rearranged elements to work better with smaller viewports.
— Changed the Doctype to html to enable use of HTML5 elements.
— Refactored attributes of <input> elements to HTML5 standards.
— Refactored product lists to show varying number of products per column.
— Removed all <fieldset> elements because they don’t work well in a responsive context.

Layout Files Changes

A number of the core layout files (catalog.xml, customer.xml) were slightly modified to account for responsive changes. There are only a few notable changes to the layout files,

— Magento Page section is modified to include all of the new responsive assets. i.e) new modified responsive page.xml is

app/design/frontend/rwd/default/layout/page.xml

— Because two and three column layouts collapse to a single column on smaller viewports, all content in the left block are displayed under the main content. This is a problem because blocks like the navigation on all My Account pages must display above the main content on smaller viewports. To address this, a new left_first block was added that looks like the left column on larger viewports, but on smaller viewports, it displays above the main content.

Using the New Theme/Layout Structure(EE only)

If you’ve worked with a previous version of Magento EE, you’re aware that the enterprise/default theme contains copies of many of the layout and template files from base/default some with very minor changes. This is not an optimal approach because as it results in duplicated content.

The Magento EE responsive theme’s rwd/enterprise directory includes only template and layout files that contain Magento EE only features.

Instead of copying layout files as the enterprise/default theme does, rwd/enterprise isolates changes in their own layout files in

app/design/frontend/rwd/enterprise/layout/enterprise

The rwd/enterprise theme replaces the enterprise/default theme and contains far fewer files than its predecessor (156 compared to 280). This new approach makes it easier for you to see what functionality is unique to Magento EE.

Theme Fallback Changes

Magento CE 1.9 and EE 1.14 both introduce a theme configuration file named

theme.xml

This file allows theme developers to specify a parent theme which results in a more predictable and useful fallback than earlier versions.

Leave a Comment