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.
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.
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.
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.
In 3 column layout, content should display first followed by secondary sidebar and primary sidebar.
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.
Latest posts by Jimit Bagadiya (see all)
- Get More From Your Ecommerce Website For This 2015 Holiday Season - October 30, 2015
- Must Have OpenCart Extensions That Give Your eCommerce Store An Edge - September 16, 2015
- 9 Consumer Review Platform Where You Can’t Afford Low Rating - September 7, 2015