New Tool For Magento Responsive Design

We madea great new tool for  developers, an extension that verifies if the user visits the site from a desktop or from a mobile(or tablet) device. We incorporated the mobiledetect.net library in our extension and we added the possibility to separate the CSS and JS files for mobile/desktop. Also the module will add a link on the footer with "desktop version", if you are a mobile user, and if you click on the "desktop version" link it will add "mobile version" link.

mobile-detect

It is really simple and effective, you must download our extension, install it and make the settings from the admin panel, in system configuration. You also need to create some folder for later use.

After you activate the extension, you have to choose the folders from where the CSS and JS files will be loaded, depending on the user's device. Finally, in your "skin" folder, just create the folders specified in the system configuration and add or copy the files that need changes for the mobile design. This really comes in handy because now your files are more organized and it's very clearly where you should make your changes. Also the css/hml loaded will be smaller for every type of device. We also use the same folders for loading the combined JS and CSS.

You don't even have to include your new mobile CSS and JS files in your page.xml. For example, if you have a styles.css file included in page.xml with the path css/styles.css, on a mobile device, the mobile_css/styles will be loaded.

This extension can also be used for in the template. The helper isMobile method will return true or false depending on the device type ("Mage::helper('ifmobile/detect')->isMobile()"). So, for example, if you need the change the structure of a zone or an entire page on mobile device, this really helps.

mobile-detect3                                        

For some areas you will need to modify also the cache tags. You will need diffrent tags based on the device.

Comments