Back to Blog
Published:

Mobile Responsive Designs for Magento

No modern site should be designed and coded without mobile viewing in mind. Without a mobile responsive design on your site, many viewers will be unable to easily view your content. If you are selling products that could been lower revenues by excluded those potential customers who shop online from mobile devices.

It is always easier to design and code that is mobile friendly from the start rather than updating your site. That doesn’t mean there isn’t a benefit to upgrading your site, it is just time consuming. It is good to note that CSS knowledge is a must when coding the mobile design. By using a CSS stylesheet, you also ensure that all browsers utilize the same code the same way.

You will need to pay careful attention to how you make your mobile skin responsive. Parts of the Magento site to consider are the header, footer, category pages, product pages and search results, which will need to be organized in a clear and concise way in order to display correctly on all browsers and devices. Elements will need to be moved or resized, and in some cases eliminated, for viewing on mobile devices. There are, however, numerous tutorials available for free online instructing how to do this.

The checkout page in particular is very important and often times the most difficult page to add a mobile responsive skin to. There are various tables and description lists that can be troublesome and oftentimes better to remove entirely. The most important thing to remember is user experience at checkout. This could be the difference between gaining a sale and losing a sale. Most successful sites opt for ease of use when utilizing mobile checkouts.

Once your mobile responsive design for your Magento site is finished, there are numerous enhancements that can be made to it. You can include custom fonts, making sure your form inputs are HTML5 and adding JavaScript through layout XML. You also may want to check for backwards compatibility.

IMG_0610

All in all, no modern site should be lacking in a mobile responsive design, especially an ecommerce site such as Magento. You only benefit from having a mobile design on your site by gaining sales and visitors. There are also a number of web design companies that can design and code the mobile responsive design for your site.