Converting 4.4.x template to responsive

vasilis · #1 03-09-2015, 12:56 AM

I was wondering what would be the best approach for converting a 4.4.x site template to responsive. Starting with one of the commercial responsive templates that exist for 4.4.x version and tweaking the styles to fit the existing site, or adjusting the existing site for responsive functionality?

The 1st method incurs the cost of purchase of the responsive commercial template, plus the work cost for the adjustment to fit the look of the current site. The advantage of this method is that the developer doesn't care about working on converting the template for responsive functionality.

The 2nd method seems to be the 'clearest' option, given that the developer applies responsive functionality well.

After some web search, I found this article, regarding converting a Joomla template to responsive, based on the Bootstrap framework and I guess, some similar methodology would apply to X-Cart as well.

I would welcome any comments on the above.

chamberinternet · #2 03-09-2015, 01:14 AM

Going with the 2nd Option - Then yes. Use a responsive framework such as Bootstrap or Foundation would be the way to go.

Have you seen Phil's - ReBoot Template - It's based on Bootstrap and works pretty well.
www.xcartmods.co.uk/reboot/

vasilis · #3 03-09-2015, 02:04 AM

I have worked before, both with Bootstrap and the Reboot template and I am aware of them.

Do you think that the article referred in my previous post, could be a good approach, regarding the technique for converting the template of the existing site for responsive functionality ?

totaltec · #4 03-09-2015, 04:45 AM

This is just my opinion, but I would probably work on making the template responsive without Bootstrap. For me it would add another layer of complexity. I like Bootstrap, I think it is a great starting point, but I would not need it for this type of project and I would be afraid of it slowing me down.

vasilis · #5 03-09-2015, 10:54 AM

Quote:

I would probably work on making the template responsive without Bootstrap

Mike, would you use another framework, or would you tweak the css styles so the layout becomes responsive, with some javascript and media queries added?

cflsystems · #6 03-09-2015, 11:00 AM

It will depend very much what you are looking for. Bootstrap is great but you can achieve similar results with just simple css instead.
All you need is simple grid system which you can even set yourself and use media queries.
Use HTML5/CSS3 too - XC is way behind this and still uses HTML4/CSS2...

totaltec · #7 03-09-2015, 01:57 PM

Quote:

Originally Posted by vasilis

Mike, would you use another framework, or would you tweak the css styles so the layout becomes responsive, with some JavaScript and media queries added?

Yes. I would remove any tables, replace with divs. Then I would just use media queries for everything. Determine your break points, I like to use 768px 960px 1280px and sometimes as large as 1440 or 1600px.

Everything under 768px is what I consider "mobile". I might design the main site to be 1280px. Knowing where you are going to "break" and go to the next size is very important to decide up front before you begin.

Really, there isn;t even much need for JavaScript, everything can be done with media queries. Setup two classes, mobile and desktop. Then append those classes to everything that you want to be unique to either of those two environments.

vasilis · #8 03-09-2015, 11:49 PM

I guess, an alternative approach would be to use something similar to the Responsive Grid System and use styles for the site columns, depending on the number of columns of the existing site. Wouldn't that be a simpler solution, than using Bootstrap?

totaltec · #9 03-10-2015, 03:52 AM

I guess it could be easier. The hard part about converting an existing template to any kind of framework is all the new divs and classes. To me it would be mush simpler to just write new CSS that makes the existing structure and classes responsive. But that is how I have always done it, perhaps this idea is a better way. The question is, do you want to reformat dozens of html templates, or just work on CSS?

cflsystems · #10 03-10-2015, 05:06 AM

If you want to do it right you have to re-write all XC templates. Take out the hundreds of nested tables, convert to html5/css3, optimize css (you can have 50%+ less css, the default one with XC is very bloated), optimize js (you don't need a lot of it if site uses html5/css3), make sure though you keep some of the css classes/ids as a lot of modules and XC jquery uses is...
It is a lot of work but at the end you will have nicer, cleaner and faster code