Responsive DIY Template Default for v1.5.x

[rbarbour]

1. Where are the .offset css classes used?

They are not used in my free templates.

2. I see your /common/tpl_main_page.php retains the original table structure for its layout, whereas if the table layout was converted into divs and a fluid design approach adopted (see attached), much of the responsive code could be removed.

In my example,

• column left floats left with width prescribed in %
• column right floats right with width prescribed in %
• centre column does not need a prescribed width as it is determined by % margins equal to the side column % widths.

I understand the admin Column_Width setting refers to cases listed in tpl_main_page.php which in turn draws upon the widths of the side columns prescribed the responsive.css file. However, with my fluid arrangement, as the screen size reduces, the actual px width of the side columns also reduces, until a single critical width is reached when the largest sidebox will no longer fit snugly within its respective side column. Notwithstanding that this critical width can be made to vary by manipulating the screen display using Ctrl - or + on a PC, the implication is that responsive code only has to test for a single critical width. At default Ctrl 0 display, my critical width is 575px for my three column fluid layout (before the horizontal scrollbar appears or overlapping occurs), which means all css @media (min-widths > 600px) could be dispensed with. Meanwhile I have max width set in the body tag at 1200px.

Hope this helps.

The code I provide in /common/tpl_main_page.php doesn't retain the original (table) structure for its layout in responsive mode. It retains the original (table) structure if one chooses to use it instead of the responsive layout (divs).

I added too not removed any CORE CODE for a reason, so the code could be easily adapted (merged) with existing templates (seeing how their are 1000's of them) instead of reinventing.

I haven't looked at your changes for I have been pressed for time, if it work, submit it for community consumption.

[rbarbour]

I am replying now that I have downloaded and tested.

1. Where are the .offset css classes used?

Not used in my free templates.

2. I see your /common/tpl_main_page.php retains the original table structure for its layout,

This template retains the original table structure for its layout ONLY if the admin configuration VALUE is 0 = Use Default Template Settings

whereas if the table layout was converted into divs and a fluid design approach adopted

Did you even look at the code before you removed it?

Changing the admin configuration VALUE to anything other than 0 converts the original table structure to a div structure (responsive NOT fluid)

(see attached), much of the responsive code could be removed.

With the file you attached, all the responsive code can be removed for the template is no longer responsive.

In my example,

• column left floats left with width prescribed in %
• column right floats right with width prescribed in %
• centre column does not need a prescribed width as it is determined by % margins equal to the side column % widths.

I understand the admin Column_Width setting refers to cases listed in tpl_main_page.php which in turn draws upon the widths of the side columns prescribed the responsive.css file. However, with my fluid arrangement, as the screen size reduces, the actual px width of the side columns also reduces, until a single critical width is reached when the largest sidebox will no longer fit snugly within its respective side column. Notwithstanding that this critical width can be made to vary by manipulating the screen display using Ctrl - or + on a PC, the implication is that responsive code only has to test for a single critical width. At default Ctrl 0 display, my critical width is 575px for my three column fluid layout (before the horizontal scrollbar appears or overlapping occurs), which means all css @media (min-widths > 600px) could be dispensed with. Meanwhile I have max width set in the body tag at 1200px.

Hope this helps.

No, it does not help and it is going to confuse the hell out of everyone.

FIRST

The main difference of a Fluid Layout (also called Liquid Layouts) are based on proportionally laying out your website so elements take up the same percent of space on different screen sizes, while Responsive Design uses CSS Media Queries to present different layouts based on screen sizes/type of screen.

I uploaded your file to 6 different dev templates MAINLY FOCUSED ON THIS TEMPLATE PACKAGE but the others (ranging from ZC Classic to my most modified one).

I even gave the body tag a max-width of 1200px (not even sure why that is needed, would make more sense to apply it to the mainWrapper).

RESULT: ONLY 1

1.) Each and every dev template BROKE, I want to say at every level imaginable but NONE got past the upload most likely due to the fact that all the responsive code in your file was GONE.

@dw08gm
The idea of a responsive 3 column layout (included side columns) that retain a specific % of the screens width is very doable and I am confident that you have it working but you most definitely left out the critical parts.

This templates package is for the conversion of one's existing template or a starting point for design a template using ZC stock code (including the HTML tables).


** CONTRIBUTORS NOTE **

Uploading the attached file is done at your own accord.

I will not SUPPORT, TROUBLESHOOT, EXPLAIN or ENGAGE in reasons of why or why not. Please use a different support thread for IMO this file contradicts and is not compatible of the Original Template Package.

[DivaVocals]

No, it does not help and it is going to confuse the hell out of everyone.

FIRST

The main difference of a Fluid Layout (also called Liquid Layouts) are based on proportionally laying out your website so elements take up the same percent of space on different screen sizes, while Responsive Design uses CSS Media Queries to present different layouts based on screen sizes/type of screen.

Excellent succinct explanation..

Before using this package, I had been working on a tableless/imageless Zen Cart template with admin controls to set the column widths, and with the help of the venerable niccol, it even included code to recalculate the column widths if either the left or right template was set to not display on certain pages. It worked great.. Except for one thing.. It's definitely a FLUID template, but it was NOT a RESPONSIVE template.. so on mobile devices it looked like many other fluid layouts do.. (mostly awful)

My point is that when I was working on this tableless/imageless masterpiece I was under the mistaken impression that many others are apparently still under.. Many still assume (incorrectly) that fluid design = responsive design.. Thanks to your EXCELLENT DIY Template Default package, I discovered that NOTHING could be further from the truth.. Fluid design is NOT the same thing as responsive.. Not by a LONG SHOT.. and if you start viewing some of these responsive templates in action, you can totally SEE the difference..

Responsive design is not shrinking the content to the screen size, it's about presenting a DIFFERENT layout optimized for mobile views..

Here's are some less succinct definitions

The main difference is that Fluid Layouts (also called Liquid Layouts) are based on proportionally laying out your website so elements take up the same percent of space on different screen sizes, while Responsive Design uses CSS Media Queries to present different layouts based on screen sizes/type of screen. For some examples of both kinds of design, see Inspiration: Fluid & Responsive Design.


Fluid's intent is to keep the same spatial weighting to all elements, and works okay on different sizes of screens of the same sort. They tend to look okay on a 32", high resolution monitor and a 12" lower resolution laptop. They're pretty easy to implement.


Responsive design's intent is to serve different devices layouts tailored specifically for the type of screen. Your site's layout will generally be cut down to a single column on a smartphone for example.


For a deeper look, check out Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You? by Smashing Magazine, which goes in depth on the primary changes in Fluid design. They also have Responsive Web Design Guidelines and Tutorials for an overview of responsive (with plenty of links should you want to dig deeper into Responsive Design).


Responsive Design is very much "in" at the moment thanks to Mobile, Smashing actually has a whole tag for responsive design.

Fluid Design means that different sections of the site are defined relatively (eg, an element is 50% of the page width). No matter what browser you're using: Smartphone, Tablet, Desktop, the site will look (mostly) the same and have the same proportions (this element will take up half the screen). This is because in your CSS, everything is defined in terms of percent, or ems, or some other metric that scales nicely from device to device (Whereas defining fixed sizes in pixels might make and element take up half the screen on a desktop, the whole screen on a tablet, and be bigger than the screen on a smartphone).


Responsive design is usually more on the programming side, where you detect the user's browser (via useragent) or the size of their screen, and actually show them a different view based on the size of their device. For example, you might use a three column layout for desktops, a two column layout for tablets, and a single column layout on smartphones. In this case, the view on each device looks very different, because you are actually changing the view based on the device.

(added these for those who, as my daddy used to say, still "don't believe that fat meat is greasy" and who will still want to INSIST that fluid=responsive)

I uploaded your file to 6 different dev templates MAINLY FOCUSED ON THIS TEMPLATE PACKAGE but the others (ranging from ZC Classic to my most modified one).

I even gave the body tag a max-width of 1200px (not even sure why that is needed, would make more sense to apply it to the mainWrapper).

RESULT: ONLY 1

1.) Each and every dev template BROKE, I want to say at every level imaginable but NONE got past the upload most likely due to the fact that all the responsive code in your file was GONE.

@dw08gm
The idea of a responsive 3 column layout (included side columns) that retain a specific % of the screens width is very doable and I am confident that you have it working but you most definitely left out the critical parts.

This templates package is for the conversion of one's existing template or a starting point for design a template using ZC stock code (including the HTML tables).

And it works BEAUTIFULLY too!!!

One of these days I will attempt to make my tableless/imageless template responsive as well by applying your Responsive DIY Template to my tableless/imageless template.

** CONTRIBUTORS NOTE **

Uploading the attached file is done at your own accord.

I will not SUPPORT, TROUBLESHOOT, EXPLAIN or ENGAGE in reasons of why or why not. Please use a different support thread for IMO this file contradicts and is not compatible of the Original Template Package.

I do not blame you for posting this disclaimer..

[dw08gm]

Not used in my free templates.

So why provide it without adequate explanatory notes.

This template retains the original table structure for its layout ONLY if the admin configuration VALUE is 0 = Use Default Template Settings

Yes I understood as much.

Did you even look at the code before you removed it?

I have looked at your code to considerable depth but have not removed anything from your code. The file I provided is my own working file exemplifying fluid design but has yet to incorporate anything like your code.[/QUOTE]

Changing the admin configuration VALUE to anything other than 0 converts the original table structure to a div structure (responsive NOT fluid)

Yes I understood as much.

With the file you attached, all the responsive code can be removed for the template is no longer responsive.

Not at all. The point I was making is that only the parts of the responsive code relating to screen widths above a certain critical value, as determined on a site by site basis, can be treated as superfluous (no pun intended).[/QUOTE]

No, it does not help and it is going to confuse the hell out of everyone.

The file was not intended for anyone but yourself, as OP and author of the mod. Maybe I should have prefaced my post "Dear RBarbour - for your eyes only." You asked for feedback and I gave you some. You want some more, I will endeavour to give you more.[/QUOTE]

The main difference of a Fluid Layout (also called Liquid Layouts) are based on proportionally laying out your website so elements take up the same percent of space on different screen sizes, while Responsive Design uses CSS Media Queries to present different layouts based on screen sizes/type of screen.

Are you definitely saying here that Responsive Design cannot be used with Fluid Design? My point is that it can and that to do so would be more economical code-wise. However, it is early days yet and we have yet to see what zc1.60 has in store.

I even gave the body tag a max-width of 1200px (not even sure why that is needed, would make more sense to apply it to the mainWrapper).

Because mainwrapper can and is used by myself otherwise. I will look into this further however.

CONTRIBUTORS NOTE

For someone experienced in layouts as yourself, I am surprised that you chose to load it rather than only read or compare my file with others of its kind. Of course it would have caused the errors it did if loaded, especially since it was not supported by other files on which it relies, particularly its css file. I could have written copiously providing all sorts of disclaimers upon uploading the file, thereby sparing you from having to break out the red and bold black paint, however, as I have been discussing fluid code with you for many months now and have posted sizeable chunks of my fluid code on this forum since 2010, it is not like venturing onto new ground.

[DivaVocals]

Are you definitely saying here that Responsive Design cannot be used with Fluid Design? My point is that it can and that to do so would be more economical code-wise. However, it is early days yet and we have yet to see what zc1.60 has in store.

I don't think this was being stated or implied.. I think the only point rbarbour was making is that fluid design is not the same as responsive design.. The whole purpose of the Responsive DIY Template Default package is to provide a starting point to either create a responsive template or to convert a non responsive template into a responsive one..

[dw08gm]

(added these for those who, as my daddy used to say, still "don't believe that fat meat is greasy" and who will still want to INSIST that fluid=responsive)

So am I to understand that you sincerely believe one cannot have a fluid design operating to a certain screen size and then a combined fluid-responsive design operating below that certain screen size.

I don't think this was being stated or implied.. I think the only point rbarbour was making is that fluid design is not the same as responsive design.. The whole purpose of the Responsive DIY Template Default package is to provide a starting point to either create a responsive template or to convert a non responsive template into a responsive one..

Added after seeing Post #25.

But that is exactly my point. If you read my posts carefully, surely you will have noticed my support for a combined fluid-responsive design, not one or the other.

[DivaVocals]

So am I to understand that you sincerely believe one cannot have a fluid design operating to a certain screen size and then a combined fluid-responsive design operating below that certain screen size.

Not sure where you think I SAID this.. (because I didn't make any statement to this effect) so let me clarify what I am saying.. responsive design is more than just simple "fluid design". A simple (traditional) fluid design is not responsive since there are no media queries to "serve different devices layouts tailored specifically for the type of screen".. And a purely traditional fluid design will not look good at all screen sizes.. There is no combined "fluid-responsive design".. Responsive design meant to deliver a layout based on the device size, and this cannot happen unless the responsive layout is fluid to begin with.. Responsive design is MUCH MORE than just a simple (traditional) fluid layout..

Fluid Design means that different sections of the site are defined relatively (eg, an element is 50% of the page width). No matter what browser you're using: Smartphone, Tablet, Desktop, the site will look (mostly) the same and have the same proportions (this element will take up half the screen).

But that is exactly my point. If you read my posts carefully, surely you will have noticed my support for a combined fluid-responsive design, not one or the other.

If you look at ANY responsive template and in particular the subject of this support thread, the Responsive DIY Template package, you would see that responsive templates ARE fluid layouts..

Responsive design's intent is to serve different devices layouts tailored specifically for the type of screen. Your site's layout will generally be cut down to a single column on a smartphone for example.

It does this using CSS and media queries, and none of this works unless the base layout is fluid to begin with.. So speaking as if a responsive template is somehow not a fluid layout is a fallacy..

[rbarbour]

Bottom line as stated earlier the code provided in the file you provided does nothing when uploaded as is and breaks the current template package at every level.

If this was intended for my eyes only, then perhaps is should have been PM'ed to me instead of posting for community consumption with the impressions that it would do what you stated it would.

According to the I R S, last year my time was valued at $198 per hour so any time I spend on free contributions is a huge loss to me so if I incorporate code that that has no purpose in it's release, I reassure you it will in future releases. I am already collaborating with ZC's largest and most talented free template contributor in doing so.

I stand by my contributors note and if you decide to include the code that makes this work, do it in your own thread for it alters this templates in a way that contradicts what its purpose is.


** CONTRIBUTORS NOTE **

Uploading the attached file is done at your own accord.

I will not SUPPORT, TROUBLESHOOT, EXPLAIN or ENGAGE in reasons of why or why not. Please use a different support thread for IMO this file contradicts and is not compatible of the Original Template Package.

[SPH]

** CONTRIBUTORS NOTE **

I think that most understand that dw08gm's file is a different animal. dw08gm may have a competeting system for responsive design, but I agree it should be a different thread...or private msg between you two if you have any further interest.

[rbarbour]

I think that most understand that dw08gm's file is a different animal. dw08gm may have a competeting system for responsive design, but I agree it should be a different thread...or private msg between you two if you have any further interest.

I do have interest and dw08gm knows this, I have expressed that many times and I am always open to easier, less and more flexible code.

My point is exactly what you stated, it is a different animal but I'm not sure if dw08gm understands that himself.

And I quote:

I understand the admin Column_Width setting refers to cases listed in tpl_main_page.php which in turn draws upon the widths of the side columns prescribed the responsive.css file. However, with my fluid arrangement, as the screen size reduces, the actual px width of the side columns also reduces, until a single critical width is reached when the largest sidebox will no longer fit snugly within its respective side column.

This tells me that the attachment will work and does what dw08gm states it will when in fact it does not. Thats the point I was trying to make.

In my previous post the point was that everyone's time has a value hence the reason for the contributors note. I do not have the time to explain or walk people through why it doesn't work.

I stated it doesn't work as is and I quote

Of course it would have caused the errors it did if loaded, especially since it was not supported by other files on which it relies, particularly its css file.

Not only were the files it relies on not included, none of this templates configuration or structure were intact.