Basic Questions about Responsive CSS

[Feznizzle]

I'm trying to build my own responsive template.

I have a fresh install of zc155e. To that I added Clone a Template. After cloning Responsive Classic, I added then added the Responsive Color Changes mod.

I did read the documentation of the two mods above, as well as the CSS_read_me.txt, but I'm still feeling a bit confused. Forgive me if my questions are dumb!

First question:
Why can't I "Request Desktop Version" on my mobile devices? Is there something I need to enable in order to allow this? As a customer, I frequently make use of this on sites like Amazon, Facebook, etc, so I'd really like for my customers to be able to do the same if possible. If this cannot be done easily, I guess it's not a big deal.

Second question:
Which file controls the desktop version, explicitly? For instance, where do I set site width?

I know Stylesheet.css controls most everything basic. And I can change site width by altering line 99 of that file (Responsive Color Changes version):
/*bof wrappers - page or section containers*/
#mainWrapper {text-align:left;width:100%;vertical-align:top;}

But it also appears that I could change desktop width using responsive_default.css. What's the best way to do this?

Third question:
Hope this isn't painfully dumb, but what does "!important" mean/do? Like this:
.onerow-fluid{width:100% !important;}

And could I alter that as such:
.onerow-fluid{width:1200px !important;}

Last question (for now):
Is there a basic Q&A for the Responsive Classic Template out there, somewhere? And/or other general info writeups about building ZC and responsive templates?

Thanks!

[carlwhat]

i am not the responsive template guru, but i'll provide a little information.

when a website has a link for a desktop version, they do NOT have a responsive template. they have 2 (or more, depending on the viewports) templates for the particular screen size. so when a user browses to your site, the code will look at the detected browser and viewport and then execute a particular template accordingly.

a responsive template adjusts elements based on the viewport which is slightly different than having a completely different template.

i would try and avoid setting a site width. ideally, your template should detect the viewport width, and then fill it accordingly. setting a width for a website to fit on a screen is an old way of looking at things. you can set widths of div elements, but i try and deal with percentages as opposed to pixels.

you need to familiarize yourself with developer tools and then you can see which css file is controlling the specific element you are looking at.

there is an order of precedence when defining the css for a particular element. so if an element is defined in 2 stylesheets, i think it is the last one loaded that takes precedence. if the 1st one loaded has the !important tag on a style, that one will take precedence no matter the load sequence. it really is a lazy way of doing things, but modern sites get so complex, that designers will use that path rather than changing lots of other code.

you should have 1 file that loads last and takes precedence for all of your css changes. you will then need to eliminate all of the !important tags for elements that you want changed, as despite your changes having the higher precedence, the !important tag on a previous css sheet will take precedence.

there is plenty of material on building a responsive template out on the internet. i think limiting it to ZC is not necessary, as the concepts are the same.

good luck.

[Feznizzle]

Thank you so much, Carl. Especially for explaining the "!important" tag.

Regarding the separate templates used for a "Request Desktop Version", I sort of suspected that. If memory serves, Facebook/youtube seem to serve mobile on seperate subdomains. A page will go from facebook.com to m.facebook.com and similar for youtube. Seems like a lot of extra work for (in my case) not much benefit.

Regarding site width, I can definitely see the wisdaom in leaving as much defined by % (vs px) is best. And I plan to do exactly that.

However, I personally find it extremely frustrating to browse sights that don't bother to set a max width for large screens. This is especially true when grids of information are presented. Take the ZenCart admin pages, for instance. I will often drag my browser screen to a more narrow window in order to make it easier for my eyes to quickly scan across rows of information.

For that reason, I will be setting a maximum site width at 1200px.

I'm fairly adept at using developer tools. However, the addition of multiple sub-css sheets introduces many possibilities where changes can be made.

Instinctively, I assigned my desktop width in the stylesheet.css file like so:
/*bof wrappers - page or section containers*/
#mainWrapper {text-align:left;width:1200px;vertical-align:top;}

I'm just wondering if maybe, instead, I should have placed that data in the responsive_default.css?

Perhaps below this (A):
@media (min-width:768px) and (max-width:1500px) {

Or this (B):
@media (min-width:1500px) and (max-width:1800px) {

Or this (C):
@media (min-width:1500px) {

Ultimately I went with the main stylesheet because option (A) presented conflict.

[dbltoe]

Find the add-on/extension for your browser that tests the mobile and tablets. In Chrome, I use Responsive Web Design Tester. It allows me to do an inspect on all sizes of mobile and tablet.

[mc12345678]

So, unfortunately the responsive template implemented in ZC 1.5.5 (though I haven't reviewed the responsive color changes mod) was that a desktop could request the display/usage of one of the "mobile" template formats, but the reverse is not true. I've been wanting to delve in a little and see if it were possible to change the php code to support it but I suspect that more so overall the "main" css will preside and not really offer an alternative "view".

As to "which" of the three groups would apply? Well each of those groups identifies a cut-off point for which group will control the view for which media setting. In other words if your device resolution is between 768px and 1500px and then apply 1200px, a device that has a resolution of 768px will be forced to see the site at 1200px which means that it would be oversized for the display. For the grouping 1500 to 1800, then a 1200 sized view would be really small...

Back on the "click here for desktop" type view, since the control is somewhat session and javascript based a "fourth" css file could be introduced to offer the desired variations to support such an additional feature and still be in the same template, anyways that was just a thought.

As to questions/answers about the responsive template specifically there's an entire thread on just the template itself. Not sure how many unique messages are there about it, but don't forget also how javascript/jquery plays into the entire thing and yes certainly once ZC identifies and loads the css files and the javascript/jquery has executed, the rest is just your standard web site related web development.

Oh yeah, also with the !important statement, different browsers behave differently as well... lot to integrate and test...

[Feznizzle]

@dbltoe, the Chrome web tester is the one I use most. When I get stuck, I'll open the Firefox inspector as well. Dunno why, but sometimes that helps me to find what was hidden in Chrome. Maybe just a fresh perspective?

@MC, thanks for the insights. I bet introducing a fourth css would do the trick, if I could figure out what mobile browers like Safari/Chrome/etc go looking for when you choose "Request Desktop Version". And if that doesn't work, I noticed the mod "Switch Skin" the other day. Bet that could be used to switch to a non-mobile version! :)

Thanks guys. I'm off to find the Responsive Template support thread!

[dbltoe]

At any given moment, a page can be using up to four different stylesheets. More if there are some added by the user or a particular mod.
What gets most folks in trouble with the desktop is trying to make it a specific width versus controlling the width of the sideboxes. The responsive.css stylesheeet was built specifically for this purpose. It doesn't cover all the options but does cover most of the even numbers by tens (90, 100,110,120, 130....) If you enter a non-coded column width, it can do some funky things to the page. Likewise, taking advantage of this can provide for an interesting effect. haredo.com wanted to keep the logo image prominent in narrower widths but not have the dead space on either side at larger widths. If you open it at 1200 width, you'll see the image is prominent with the side columns beneath it. Widening the screen to 1360+ give a different effect. You'll see the side columns jump up to the same level as the image.
Conversely, as the window width goes below 960, the image decreases in width proportionately to the screen width.
The WHOLE idea of responsive is to present as much as possible, as well as possible, to every size possible. Other than trying your best to get the pertinent information above the fold, I don't see the ROI for controlling the site more. IMHO deciding what your customers need in the way of screen resolution, size, or even if they see/don't see images is not your job. Your job is to present the information. They will decide whether or not they adjust the resolution, size, or turn off images till they get where they are going.
I'm still wanting to play with responsive treatment for New, Featured, etc. It would be nice to be able to have ZC show them based on the users screen setting. But, then again, that's just another way to get as much information to the customer as possible and another topic for another day.
Good points at http://tinyurl.com/yd8mak6x
As for the importance of viewport and a recommendation by Google - http://tinyurl.com/y9nlvt4q
viewport error problems at http://tinyurl.com/y9u5r5u5

[icecold]

This is an interesting thread, I do have my own questions though, does the responsive template uses bootstrap 4?
By this I mean, can I take advantage of bootstrap on my html5, or is it a subset?
If it's that the case, can I create bootstrap menus, or will they have to be a plugin?
Can I create my own layout? adding blocks, and styling them, does it support modals?