2

Our predicament is that we are using 3 media queries with different layouts which means that we're essentially generating all of the content 3 times. For instance:

<div class="small-media">
  {embed="template/view_small"}
</div>

<div class="medium-media">
  {embed="template/view_medium"}
</div>

<div class="large-media">
  {embed="template/view_large"}
</div>

You can see how ridiculous this is. We have tons of things being pulled in and we're starting to see overages on our data for doing it this way.

We're wondering if there's a way to use PHP (or EE itself) at the top of the document to load everything once and then send only the pertinent data to the nested templates at each media query.

Thanks for any input on this.

Improve this question
7
  • Wow, yeah that looks terribly inefficient. I would recommend only spitting out the data once and using the media queries to hide/show the elements you need. Alternatively if you want to use EE, you can probably cache your data in Stash variables, and loop over it in your various embeds.
    – Nuno Albuquerque
    Nov 12, 2013 at 23:47
  • Can you, please, show us what is different in every embed?
    – Sobral
    Nov 13, 2013 at 0:27
  • @RobsonSobral, no. It's simply too extensive. I wrote up an edit and it came out to 600 lines just to give you an idea of how deeply rooted the problem is. I can assure you that it's mostly images, expressionengine loops surrounding multiple embeds, text, more text, css classes like crazy, etc. The main difference between the Large, Medium, and Small is CSS and images. On small media we do away with images altogether, and essentially we're running every expressionengine loop three times.
    – adamellsworth
    Nov 13, 2013 at 2:13
  • 1
    I'm sorry, but I can't see the point of doing this. If you're generating three contents, making the user to download all of them and hiding all but the needed by media-queries, your site isn't responsive. All the CSS can be handled just by media-queries and descendant selectors. And there's some different techniques to deal with the images. Plus, I don't know if Google will like all this repeated content.
    – Sobral
    Nov 13, 2013 at 10:59
  • Yes. You're absolutely right; that's why I'm here. If you'll please read my question again: "We're wondering if there's a way to use PHP (or EE itself) at the top of the document to load everything once and then send only the pertinent data to the nested templates at each media query."
    – adamellsworth
    Nov 13, 2013 at 15:37

1 Answer 1

Reset to default
8

What you're doing isn't really the way to use media queries.

Why is the 'data' (from which I read 'content') different based on the user agent? Is it actually different content or are you simply talking about layout?

I would say your options here are;

  1. Output everything once and use CSS Media Queries properly to reformat the content appropriately for the device being used to access it. i.e Make the site responsive. There should be few, if any, instances where you'd need to duplicate output data like this.

    Media queries should be used to alter how elements are displayed and interact with other elements, adjust page flow or show/hide elements from view. The underlying page markup and content should be identical regardless of the user agent properties.

    There are numerous articles and tutorials around regarding this approach. Try http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/ to start with and descend down the rabbit-hole from there!

  2. Use separate templates (or even domains) for each 'version' of the site and sniff the device when someone lands on a page, then redirect to the appropriate version. The disadvantage of this is multiple URLs for what is essentially the same content so be sure to specify canonical URLs for each page.

    You could use PHP to sniff device properties and use a PHP conditional to add the template partial as required. There are a number of libraries available for doing this. I can't recommend any though since I haven't used them.

    Try this library as a starting point https://code.google.com/p/php-mobile-detect/

  3. Use an add-on to do the detection. Try http://devot-ee.com/add-ons/detect-mobile. I don't know whether this will ease the load as you may find that EE's parsing engine will still do more than it needs to. It depends when the add-on fits in the parse order.

  4. Use Stash. Someone else mentioned this so I won't go into it further here.

Personally I'd go with option 1.

Improve this answer
3
  • 2
    Foamcow's spot on. Based on what you're describing this doesn't sound like a problem that should be solved at the EE/PHP level. If your functionality and/or layout is extremely different between the different sizes, option 2 or 3 is reasonable to consider. But if not, and based on the info you've provided, it sounds like it isn't, you're going to be way better off going with option 1.
    – Brett Burwell
    Nov 13, 2013 at 19:47
  • Thank you very much for taking the time to answer this thoroughly. We clearly didn't do enough research before adopting the plan we have now and as you can rightly assume it has cost us in more ways than one.
    – adamellsworth
    Nov 14, 2013 at 18:58
  • If you already have CSS and a guide as to the layout you want these could be used as a starting point. It shouldn't take a huge amount of time for a decent front-end dev to rewrite the CSS and EE templates to only output everything once.
    – foamcow
    Nov 15, 2013 at 16:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.