Responsive design for Magento: why it is so important and how to do it right?

Why responsive and mobile web design is so important nowadays?

The first reason: it is very important that your website should be accessible through all modern mobile platforms with different screen sizes. The number of visitors viewing websites through mobile devices is growing and the latest data shows that mobile digital media time in is now significantly higher at 51% compared to desktop (which is 42%).

Quick fact:

Mobile responsive internet trends

The second reason is Google 'Mobilegeddon' (somebody call it 'Mobilepocalyse' :). The idea behind this term is simple: Google will not rank your website high for mobile devices, if it is not mobile friendly. As a result the businesses lost Google search traffic (or get more traffic, if the website is mobile friendly).

So, if your competitor is responsive, and you are not, don't loose the time and start to plan your mobile strategy immediately! Otherwise your competitor will gather the mobile traffic and clients in your business niche.

Mobile strategies: the ways to achieve mobile devices compatibility.

Here I will describe all mobile solutions available for Magento, so you can choose the best solution for your business:

Responsive design

Solution 1. Separate mobile theme.

It is the fastest way to be Google 'Mobilegeddon' compatible.

Positive sides of the separate mobile theme solution are:

  • Short time-frames for solution implementation.
  • Not expensive solution.
  • The solution do not touch your website desktop version anyhow. Your website will work as is without any interruptions (needed for new design publication, etc).

Conclusion: The separate mobile theme is the best choice if you have fresh desktop design, you need mobile compatibility in short terms or you don't have budget for more complex solutions, like responsive design.

Examples of the similar projects, implemented by our team: fabstrands.com, indulged.com, uboxes.com.

Mobile theme for Magento Mobile theme for Magento

Responsive design

Solution 2. Unique responsive theme.

This solution is good if you want to implement the completely unique design and user interface for your store. Be ready that this solution will be time-consuming and quite expensive.

The price depend on amount of design and development work, involved into new responsive theme development.

Conclusion: this solution is good for big projects which will step away from the crowd and implement completely unique brand identity, unique features designed by professional UI/UX designers.

Examples of the similar projects, implemented by our team: personalisedgiftsshop.co.uk, backcountrygear.com

Responsive theme for Magento Responsive theme for Magento

Responsive design

Solution 3. Responsive theme based on ready-made responsive template.

It is good and balanced solution, something between unique design and template solution. We highly recommend to include professional design work to such kind of projects to achieve the best result. The choosed template will be adjusted for your brand and improved with unique features.

Positive sides of the template solution are:

  • Short time-frames for solution implementation (in compare with unique solution).
  • Not expensive solution (again, in compare with unique solution).
  • The solution includes professional design work, so the final website will match your brand.

Conclusion: this solution is good and balanced, if you looking for good responsive design in short terms. The solution will be adjusted for your brand by our designers and developers for better result.

Examples of the similar projects, implemented by our team: morkeschocolates.com, autostyle.co.za

Responsive theme for Magento Responsive theme for Magento

Real client story: how responsive design increased traffic & conversions.

In the end I want to share a real client story, just an illustration of real life effect of the mobile solution and its impact on the business.

We developed a responsive website for Autostyle Motorsport company. The Autostyle Motorsport Autostyle Motorsport is a leader in sales for the automotive parts and accessories in South Africa.

Responsive design for Magento

Our client decided to make his website responsive and chooses strategy number 3 (responsive theme based on ready-made responsive template with custom design implementation) to decrease the time-to-market for responsive front-end redesign.

We offered a turnkey responsive solution, including new design creation, professional design integration and custom Magento development. After project publication on the live server, we and our client measured the traffic and overall performance.

The traffic and conversions increased after responsive design publication by 30%. And for the first time mobile traffic has taken over desktop traffic:

Here is a feedback of the Autostyle Motorsport company owner:

"After moving to a responsive design and applying some SEO best practices, we've seen a nice constant growth in traffic. Before we used to average about 190 to 200k visitors a month, last month we hit 258k visitors! and every month it keeps growing.

Also last month was the first time mobile visitors surpassed desktop visitors (46% of total visits are now mobile! and 45% desktop and the balance is tablets)".

– Naeem Mayet, Autostyle Motorsport

We are happy to see that our quality responsive development services help our client to successfully overcome the Google 'Mobilegeddon', increase traffic and conversion. I hope you enjoyed this story.

Feel free to check our Magento responsive portfolio for other responsive design projects we created:

Pinup Girl Clothing
Responsive design Open project details
Personalised Gifts Shop
Responsive design Open project details
St. Bernard Sports
Responsive design Open project details
Personalised Wedding Gifts
Responsive design Open project details
First Boutique
Responsive design Open project details
Back Country Gears
Responsive design Open project details
Morkes Chocolates
Responsive design Open project details
Autoexpert
Responsive design Open project details