Chat with us, powered by LiveChat

This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

How to Easily Make your Magento Site Mobile Friendly to Boost Conversions

December 12, 2013

5 Min Read
Reading Time: 5 minutes

So, you thought your website did well during the past shopping events of Thanksgiving Day, Black Friday, and Cyber Monday. But, you may have lost a good chunk of money if you did not optimize your store for mobile.

Magento Mobile Site

Techcrunch reports that only on Thanksgiving mobile sales numbers were up by 258% when compared with those of the last year, whereas Black Friday saw an increase of 187% and Cyber Monday saw 150% rise.

Simply put, mobile commerce has arrived. Soon, the ‘e’ of e-commerce will be replaced by an ‘m’. However, there is another ‘m’ which dominates the e-commerce industry. I am talking about Magento.

In many of our previous posts, we have sang praises about Magento and its market-wide acceptance. However, for the uninformed, Magento powers 9,063 out of 34,864 online stores present inside the Alexa Top 1 Million. This gives Magento a 26% share (and it keeps growing since the statistics here are of February 2013).

But here a question lies, is Magento friendly enough for mobile commerce? And, do you have the right Magento hosting provider for hosting your store?

Well, yes it is mobile friendly. However, there is a right way of doing it.

Cloudways Magento Hosting For Non-Technicals

A Look at Google’s Guidelines

While developing your site’s Magento mobile theme, it is important to keep certain guidelines referred by Google under consideration. This helps you in ranking your website better.

Under the given guidelines, it is best to serve the same HTML for both desktop and mobile sites with only the CSS files changing for the various display options. This means you have to get a responsive web design. Google considers this as the best way of formulating a mobile site.

However, there are other methods of doing it too.

You can present different kinds of websites on the same URL, but they are required to be differentiate by using user-agents. If this does not seems suitable, you can have separate URLs for desktop and mobile websites. More can be learned here.

Google’s Guideline on HTML Code Similarity

Responsive Magento Store: How to Make Websites Mobile friendly

Well, now you know Google’s take on mobile web practices, you can, therefore, decide which path to take. In the following paragraphs, we will plainly discuss the different options you have when you are making your Magento website mobile friendly. A word of caution before you do anything adventurous: Back your data up!

Using Magento Extensions

The good thing about Magento is its open-source ways, and this is why you more or less find your solutions in Magento extensions. You may want to try the following extensions to convert your desktop site into a mobile optimized one.

  • CouchCommerce 

This extension converts your desktop website into an optimized one. Once you have installed the extension, it builds the related web inventory for an online store. The whole process takes a few minutes and everything is automatic.

Furthermore, the mobile optimized Magento site uses the same URL structure as the desktop one; hence making it suitable for SEO practices. It seems they do not provide a free trial of their services, but their pricing plans seem very reasonable. See how it work.

  • Tenfoot – Easy Mobile Ecommerce 

Like the previous extension, this Magento extension provides you with the ease of converting your existing website into a mobile one. The extension requires no technical know-how and it is pretty much automated.

Best Magento Extensions For Your Ecommerce Store In 2018
Furthermore, the resultant Magento site for mobile is SEO friendly. The extension comes with a 30-day free trial and then continues with a range of pricing plans.

Create Mobile-Friendly Websites With Responsive Magento Themes

The most preferable way of creating a Magento mobile site is through responsive themes. Responsive themes usually use similar HTML files along with different CSS files. Google prefers responsive designs as it streamlines experience over a number of screens without using a lot of resources.

While implementing a responsive theme on your website, make sure you do have a web designer and a Magento developer handy. And, run back-up before you proceed. Once you are ready, check the following themes out for your website.

  • HTML5 Magento mobile theme

This theme comes officially out of Magento. It gives you all of the functions that a mobile Magento site requires. You can embed audio and video files. It also has a user-friendly search mechanism. However, to get this theme going, you need to have a little bit of Magento know-how. Although it is free, we recommend that you work on it if you know what you are doing or hire a Magento expert who can do it for you. See this link for more information.

  • Argento Magento mobile theme

This is perhaps your best bet when it comes to Magento responsive themes. It comes with 14 popular modules and it is based on CSS3. When you buy the theme, the developers will install it for you and you will be entitled to free support for a month. You can further apply for monthly support and updates. Learn more on their website.

  • Neddev Magento Mobile Theme

One more theme which should be mentioned here is the Neddev Magento Mobile Theme. It provides clear instruction for easy installation. Furthermore it comes with a 3-day trial along with installation and customization services. Click here to check out the details for this theme.

If you search around, you will find many responsive themes but be careful as an erroneous install can break your store.


Industry Experts on Making Magento Website Mobile-Friendly

Our community managers generated conversations on different social media websites about this issue. Matt Dilley, a web developer with a solid 6 years of diverse experience, gave us this great tip:

I’ve used a slightly different approach.

 

I started off my client’s site with a theme which is “semi-responsive”, as a mobile theme was not in the works at the time.

 

But, the main site was [a] bit too [bloated] for mobile, so I had to quickly find a lightweight mobile solution, and decided to customise the standard mobile theme, which actually works very well. My advice, though, is if your mobile and desktop themes use substantially different layouts (.xml for instance), do not try and automate the mobile switching with the theme “exceptions” from the Magento admin. That route can cause complications, because it’s technically trying to skin the mobile front-end on top of a full-site layout structure (potential nightmare situation).

 

What I did to get the auto-switch to mobile front-end is to add some php mobile-detection code into the head.phtml template of the main site templates, and if it’s detected as a mobile, do a javascript redirect to the mobile front-end.

 

With some added session variable manipulation, you can also get it to switch freely from full-site theme, back to mobile-theme easily. I’ll be happy to provide my theme-switching code if needed. Because it was a quick-fix for me, it may look a bit “hackie” but it works.

Quite an adventurous take on Magento mobile site optimization!


Optimization Is The Key

Either optimization is for mobile devices or performance, it places an important part in user experience. At Cloudways, we help businesses with Magento performance optimization everyday. Click on the button below to get free consultation.

Share your opinion in the comment section. COMMENT NOW

Share This Article

Boost Your Magento Store Performance by 5x Times & Maximize Your Sales

Our fastest Magento hosting can help you in growing your business revenue by 500%

Saad Durrani

Saad is the Senior Editor at Cloudways - A Managed Cloud Hosting Platform. He is a technology enthusiast who loves to blog about emerging technologies and trends. When he is not blogging, he goes to the beach to find inspiration for his fictional stories.

Get Our Newsletter
Be the first to get the latest updates and tutorials.

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

BFCM 2019