Magento Commerce, 1.14.x

Responsive Design

Responsive design is an approach to web page creation that flows the page layout to fit the visitor’s screen size and orientation, and changes the layout accordingly. The Magento default responsive theme features style sheets that support flexibility for layouts and images, and helps provide a pleasing experience for site visitors using mobile devices. By comparison, non-responsive sites or sites not optimized for smaller screens or mobile devices are often slow or difficult to read, and offer a clunky mobile eCommerce experience.

Responsive Theme on Tablet and Smartphone
Responsive Theme on Tablet and Smartphone

Benefits of using the Magento default responsive theme include:

  • You can get a tablet and smart phone friendly responsive site in about half the time as before, speeding time to market and freeing up resources for other projects.
  • Your responsive site makes you better able to participate in the fast growing mobile commerce space, and gives you the ability to create a website that is more easily adapted to new opportunities and less expensive to maintain. A responsive site also offers potential search engine optimization (SEO) benefits from using Google’s preferred approach to mobile-optimizing sites.
  • You no longer need to develop separate content per device. The default theme is easy to customize for simple sites, and provides a powerful starting point for developing themes for more complex sites.
Technical Information

Technologies used in Magento’s default responsive theme include Sass/CompassA CSS pre-compiler that provides organizable, reusable CSS. and jQueryA popular JavaScript library that is often used to create dynamic and responsive effects. in noConflict() mode. Additional JavaScript libraries are discussed in more detail in the Responsive Theme Developer’s Guide.

The responsive theme code is located on the server in the following directories, relative to your Magento installation:

  • Code Location
    app/design/frontend/rwd
    skin/frontend/rwd