I have to redesign an existing Magento website (with a custom theme) to be responsive. I would like to get some ideas and advice from those who have experience in similar projects.

What is your advice on the workflow, planning, tools, responsive frameworks and anything else?

I will be working alone on this project. I have to convert the existing custom theme to a responsive theme.

  • can you use the template exceptions for different device, like iphone ipad ecc? – Antonio Pedicini Dec 29 '14 at 23:11
  • I never worked with template exceptions. Is it a recommended solution? Wouldn't this require more time to write a new theme? – Faridoon Dec 29 '14 at 23:55
  • for me it will be easier to get a responsive template that looks alike, and just redesign it. themeforest.net/category/ecommerce/magento – user2857 Dec 30 '14 at 0:28

You can add a different theme for mobiles using theme exception or the same theme and work on that to make responsive. In this way, your main theme would not need any changes and also you can do the work for mobile theme without thinking of desktop view. It will make your work a lot easier.

This way, you can add a mobile only theme : "http://kb.siteground.com/how_to_enable_a_theme_for_my_magento_mobile_web_site/"

  • Thank you for your suggestion. I wonder if this would affect SEO of my site? Especially for Google? – Faridoon Dec 30 '14 at 17:36
  • No it wont affect your seo, because your meta datas will remain same in mobile theme – Prashanta Dec 31 '14 at 6:08
  • Thank you Prashanta. Maintaining two separate themes might need some extra work in the future. – Faridoon Dec 31 '14 at 6:12

I agree, converting a non responsive theme could be a mess. That is because I suggested to use the mobile exceptions as hybrid solution. Many company think that a responsive theme is used just to enable mobile navigation and mobile purchasing is increasing dramatically. Using theme exception you'll have the solution without a great effort like converting the existing one to responsive. Then, maybe in a next step, you can start from scratch using a new responsive theme.

  • Thank you Antonio. Most probably I will go with this option. I am still evaluating other options. What worries me about this type of implementation is that it might affect the website's SEO, especially in Google? – Faridoon Dec 30 '14 at 17:42
  • there shouldn't be any problem as that functionality is developed by the Magento core itself. The default template also uses exceptions. – Antonio Pedicini Dec 30 '14 at 18:17

I think you would be fighting a losing battle trying to make a theme that wasn't designed to be responsive behave like it is. You would be better off starting from a responsive base theme and incorporating elements from the existing design back into it.

You have a few options there. You could use the new rwd theme that comes with core, its quite a good place to start. Or there are a few boilerplate options provided by the magento community such as https://github.com/webcomm/magento-boilerplate or https://github.com/zeljkoprsa/waterlee-boilerplate for example. Or you could find a theme from a site such as theme forest and configure it to look more on brand.

  • The company has invested a lot of money on designing the existing theme. Creating a new theme that looks similar to this would also be a hassle. Creating a new theme with exactly the same branding will also be difficult. How about template exceptions as suggested by Antonio (commented on my question)? – Faridoon Dec 29 '14 at 23:57
  • 1
    Using template exceptions you can switch out to another theme for mobile. That is not a responsive website, that is a website with two different themes based on the user agent of the device viewing the page. This would be easier than making an existing theme responsive if it is an option for you. However if this is not an option I honestly think there would be more work involved reverse engineering an existing theme to be responsive than there would be starting from a good responsive base. You would be effectively redesigning anyway to go responsive. – Andrew Kett Dec 30 '14 at 0:09
  • Part of @andrewkett's point is that you will almost always run into massive refactoring of CSS and markup to get the responsive design you want. Sure, you can get hacky by positioning stuff awkwardly that is just going to drive the next guy crazy, but that's just a messy approach. Starting from a theme that has CSS and templates designed to be responsive eliminates all that spaghetti and will make the lives of maintainers much easier in the long run. – pspahn Dec 30 '14 at 0:34
  • @pspahn, yes 100% agree. It really would be a hacky approach and it would more than likely turn into a maintenance nightmare. – Andrew Kett Dec 30 '14 at 1:07
  • Thank you guys. I will evaluate my options and let you know what I chose! – Faridoon Dec 30 '14 at 17:36

You should to use bootstrap...css in your site...This will give cross browser comparability... rather then your own css.. I used bootstrap in my website...this is very good for responsive html...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.