Hi,
I seem to remember someone mentioning that the use of Show If Design Area is all good however the drawback is that it does not cache the content. Is this still the case for Matrix version 4.18.X?
Basically, I had an idea of using Show If Design Area to server mobile only CSS instead of using media queries.
Is this good or bad idea?
Thanks.
Not sure about Matrix caching, but it would definitely get cached at the proxy and browser (if external caching turned on off course). So you are probably better off using media queries, which is also our standard/best practice way of implementing mobile only css.Plus, if you use a show if design area, you can't to a check on device resolution, only device type, which is a lot harder to do and capture all device types.
I had an idea of using Show If Design Area to server mobile only CSS instead of using media queries.
Is this good or bad idea?
Regardless of Matrix, this is a bad idea. Media queries are the way to go.
Thanks for the feedback.
Any reason why it might be a bad idea?
It just seems the mobile resolution is getting much bigger with phablets and coming into the desktop territory now, and plus I'd like to keep the CSS/JS as tiny as possible, hence using Show If design area to server the relevant codebase, and create a media query within this to solve the retina/non retina issue?
Thanks for the feedback.
Any reason why it might be a bad idea?
Because you need to be testing for devices based on screen size, not on what their user agent or another attribute says. Using breakpoints is really awesome, and I recommend using Bootstrap for this. If you don't want the full package that it offers, you can customize it just for their grid system. I highly recommend it.
I have used Bootstrap and my personal favorite is Foundation.
However, there are times when you end up hiding elements for desktop/mobile e.g mobile navigation, header, or booking engine, because it makes sense on desktop but not on mobile. Also I would like to use zepto.js hence why I'm leaning towards the Show If Design to isolate JS/CSS to serve mobile/tablet only.
However, there are times when you end up hiding elements for desktop/mobile e.g mobile navigation, header, or booking engine, because it makes sense on desktop but not on mobile. Also I would like to use zepto.js for mobile hence why I'm leaning towards the Show If Design to isolate JS/CSS only for mobile/tablet purposes.
Well, but for those situations you should be using the .hidden-* classes.
Regarding the cachine topic, I've just read in Daniel Nitsche's book "Matrix Secrets" - that it is possible to cache Design Areas by adding the following attribute:
cache="1"
Can someone from Squiz please confirm this? It would be quite useful if it was the case.
Thanks Bart. I think you might be referring to a later version of Squiz that we have not upgraded to yet. We are still using version 4.18.4
I think that's why David mentioned this method in his book - if the other method (you mentioned) was available, he probably would have suggested to go that way.
Just quickly though, in his book he doesn't mention putting any quote marks on the parameter (i.e. he says use cache=1).
My understanding is that you should put quotes around the number to work. Is this right?
Not sure if it works or not without quotes, but with XML data like that the best practice is always to wrap values in quotes.
Bring back this old thread again because I’m still faced with the challenge of reducing bloat/optimizing the site.
We have instagram Feed loaded in via scripts, and this feed is quite hefty (2-3mb). I’d like avoid loading this script at all below certain resolution e.g 40em. Are there any conditional keywords in Matrix that would allow this?
Or are there any alternative solutions?