rbarbour:
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:laugh:)
rbarbour:
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.
rbarbour:
** 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..:no:
My Site - Zen Cart & WordPress integration specialist
I don't answer support questions via PM. Post add-on support questions in the support thread. The question & the answer will benefit others with similar issues.