X-Cart:Ideal Responsive Skin

Overview

X-Cart's Ideal Responsive skin allows you to provide your visitors with a version of your website that is best suited for their monitor or display.

Monitors come in a variety of shapes and sizes, with different resolutions. From smartphones to tablets to widescreen desktops, the skin will adapt to fit each. Furthermore, it provides a solid base for your own responsive design.

X-Cart's Ideal Responsive skin is based on the Responsive Template initially developed for X-Cart by Mike White aka totaltec. We somewhat adapted/improved the original template before including it in X-Cart, so we believe it got even better. Starting with X-Cart version 4.6, the Ideal Responsive skin is available out of the box in all X-Cart editions (GOLD, GOLD PLUS and PLATINUM).

X-Cart versions prior to 4.6.0 may work with Responsive Template but have not been tested at this time.

The skin is adaptive/responsive from 1280 pixels down to 350 pixels. For even smaller screens, you can consider X-Cart Mobile.

How it works

The Ideal Responsive template includes JavaScript that detects the width of the browser window or screen that is displaying it. After this detection occurs, the appropriate style sheet is selected and displayed to the browser. Additionally, a cookie is set to remember that browser's width for the remainder of the session. When the browser is resized, such as turning a tablet on its side, or clicking and dragging the browser window on a desktop, the style sheet and cookie are updated. The result is that the correct dimensions are displayed to your visitor at all times, and the text and objects are always legible. Scaling and horizontal scrolling are no longer necessary for most devices and screens.

The Ideal Responsive template comes bundled with style sheets that control four preset widths: 350px, 700px, 960px, and 1280px. You can tailor the experience for each of the preset widths, alter the code to change them, or even define your own.

Enabling the Ideal Responsive skin in your store

To enable the Ideal Responsive skin:

1. In your store's Admin area, go to General Settings->Appearance.
2. Select the skin Ideal Responsive from the drop down list at the top.
3. Click Apply Changes.

If the skin does not appear on the list, ensure that the directory ideal_responsive exists in your xcart/skin directory and try clearing the X-Cart cache.

Responsive Design

As you customize your responsive template to fit your brand, make sure to not accidentally break the responsive features. Images should usually not exceed 350 px, or their width and height need to be set as percentage values to allow resizing. Keeping product and category images consistent and reasonably sized is a good idea as well.

Test your layout changes at various widths. Make note of the style sheets located in <xcart_dir>/skin/ideal_responsive/css/, mobile.css controls widths from 350px to 699px, and the rest of the sheets are named according to their size. You can mimic certain features to customize the experience for mobile or tablet users: take a look at how the Tabs of the top menu become the Quick Menu dropdown in the mobile version. Another important snippet of code can be found in <xcart_dir>/skin/ideal_responsive/customer/service_js.tpl, where it defines what style sheet to display for particular widths.

Adding a 3rd Column to Ideal Responsive

In this X-Cart Tutorial from http://babymonkeystudios.com we add a 3rd column to the ideal_responsive skin, step by step.

Mike comments on this video: "I think this is one of my best tutorials to date. I show you how to accomplish the goal assuming that you know nothing about it. I even left in my mistakes and thought process so you could learn how I would approach the problem from beginning to end. Anyone new to responsive design or working with this skin is going to find this reference invaluable."