Magento Responsive Theme – How does it look on your Mobile?

In the mobile world, Smart phones and tablets are now become handy tool to browser internet, connect with friends on social media and buying a product with few taps on mobile. Use of mobile phone in eCommerce industries are increasing in such rapid speed that all major eCommerce players are making their website responsive.

Responsive website is a new way of designing a website in which website adjusts its look and feel based on device, platforms and browsers. It’s follow simple approach

“One website for all device, platform and browsers”

Magento responsive theme is a word to describe responsive design to sell your product using magento commerce platform. Responsive theme in magento allows user an easy access to browse catalog of products, product details, easy checkout, order history etc which help webmasters to increase their online sales and raise the return user ratio. Here are some basic points to know how magento theme looks on various platforms and which are the best alternative approaches used to show menu, sliders, layout etc.

1)  Header

In major website, top portion of the website covers website logo, useful links and category menu with call out buttons to go to checkout or cart page. When we think about mobile phone and tablet, we need to take care that header part does not occupy major portion of the screen. One of the trickiest parts of the header is main navigation menu of the website. With the help of CSS3 and jQuery, we can nicely handle menu part. Ideal solutions are to change your main menu into select box or make a single link which expands the sub menus like shown in below image.

responsive-menu

2) Slider

One of the import features of the website is banner sliding. Store owner normally uses this to highlights some promotional activities, special offers and easy access of most selling products.  In responsive terms, it’s advisable to use image based sliders so it can be easily adapted in smart phones. Again with the help of CSS and jQuery, we can convert normal slider into touch based slider for smart phone. Such slider offers in built photo gallery apps type navigation so user can back and forth image by sliding the banners.

responsive-slider

3) 2 Columns and 3 columns layout

In magento, majority of the pages are either 2 columns or 3 columns layout. Best approach to handle 2 column layouts is bringing the sidebar below content. Whether your design uses left-column or right-column, write CSS in such a way that content part always remain first when such page are visited on mobile devices.

responsive-2column

In 3 column layout, content should display first followed by secondary sidebar and primary sidebar.

responsive-3column

4) Layered Navigation

Layer navigation is the most important feature of magento which helps user to filter products very easily. In desktop browser, layer navigation shows all filterable attributes and its options in sidebar. In responsive design, it looks ugly if you display all attributes and its option below content as it will increase too much height of the page. To resolve this, just display attribute title and tapping on this, show its option. This way we can save the height of the page in mobile device.

layer-navigation

Jimit Bagadiya

Jimit Bagadiya

Jimit Bagadiay is a CEO of Creative Glance Technologies and Co-Founder of SocialPilot.co. He enjoys exploring new tools, writing on social media marketing practise and technology trends.
Jimit Bagadiya

Published by

Jimit Bagadiya

Jimit Bagadiay is a CEO of Creative Glance Technologies and Co-Founder of SocialPilot.co. He enjoys exploring new tools, writing on social media marketing practise and technology trends.