Hi all
I am working on a fairly large site for which we have recently built a responsive template, but want to push the mobile/desktop abilities further by using some form of mobile detection.
The site is built mainly off Views and Contexts, and I have therefore been looking at using a Context + Mobile Detection combo to serve a few different blocks. I have tested with Context Breakpoints, Context Mobile Detect, and more.
However, our server maintainer has been concerned that these options send too many requests to the server and bypass Varnish. He has suggested we do this in a way that does not use cookies (which all the existing solutions seem to use).
So it seems we need to build a bridging module between Context + Varnish + Mobile Detection/Breakpoints using HTTP Headers.
I am at a loss as to how larger sites manage to get this right, where Drupal apparently cannot - not with the modules currently available at least.
Has anyone done this before? Is anyone interested in building this for us?
Comments
I think the problem the
I think the problem the server maintainer is talking about, is that Varnish will have to cache a version of each page for every combination of cookies. So it depends how many variants there are, if it's just 3 possible cookie states for anonymous traffic, then the overall cache size could be expected to grow by 3x. Since RAM is cheap, why not just make the Varnish cache larger to accommodate this expansion?
If there are hundreds of permutations of cookies, then the server admin is correct to be worried. The best solution to this is to not generate different variants of your pages on the server side, rather do it client-side in JavaScript.
Another option is to use ESI (edge side includes), but unless you bypass a full Drupal bootstrap when pulling in fragments, you won't see any benefit.
Hi Mark Thanks for your
Hi Mark
Thanks for your feedback.
There would generally only be 3 variants, yes - desktop, tablet and mobile. Anything else in between is changed with CSS.
You mention the option of doing this client-side in JavaScript - I think this is what our server maintainer is talking about. Any idea where to start with that?
thanks
Yeah, depending on what
Yeah, depending on what things you need to detect, you should check out Modernizr:
https://www.drupal.org/project/modernizr
http://modernizr.com/docs/#features-css
That looks cool, but I can't
That looks cool, but I can't see how it will help me in my use case.
Modernizr seems to assist with CSS and JS, but I can't see how it can work with Context.
I've been trying out Modernizr with the Media Query test, but it appears one needs to write some extra JS or something to make it connect with Contexts?
I am more of a front end developer than php/js dev, so this is all beyond my scope. I'm needing a module of sorts to link these together, else someone who will build this link for us.
Not this Use case
Using Varnish to pre-set the delivered HTML via headers for context, will keep the hosting costs down. Modernizr would need to load the JS/CSS before we know which device we working with. I could see JS been used to call the best HTML, but that would be quite a bit of work outside of Drupal, possible, but not the right fit for this this use case.