how to handle responsive content loading?

Question

I have a few questions regarding loading different content depending on the screen size and or device...

a site I'm working on has one column with 5 entries, when the screen size gets reduced a bit I want to change that to 2 columns with 6 entries so I don't have an empty space in the last row. Now I can always easily just load 6 entries and hide the last one with css on widescreen but I would rather try to do it beforehand

I've downloaded the ress plugin to have some type of variable I can use but it seems kinda silly to me to wrap 2 channel entries tags inside if statements when the only difference between them is the limit="5" and limit="6" parameter.

I'm also in the EU so I'm a bit worried about having to use a cookie for this, and also it's a pain to test this because I have to delete it every time to check how the site looks on a different screen size

I have a similar issue with loading images, I'm using the foundation framework and while it does have a nice solution with data-attributes to load different images for different sizes I am wondering if it's a better idea to use something like ress and just place all my images inside if statements. Not sure which is better performance wise?

Answer 1

In this particular case if you used 2 channel entry calls within if statements you will have lower performance than just calling all 6 entries and hiding one with css.

'if' statements have all their contents parsed and then the unnecessary ones are removed after. One way around this would be to use an early parsed conditional like the ifelse plugin or switchee. If you already have a solution in place for images I wouldn't bother using ee to handle it. That seems redundant.

Answer 2

The reds plugin wouldn't be dependent on javascript, to it certainly has that going for it. And if your conditional is early passed with an add-on like switchee or ifelse, then I would suspect it would offer some pretty great performance.

With regard to your first question about the entries - you're right - you're probably best to load with a limit of 6 and then simply use a ress conditional to remove the last entry for large screens. And to minimize the markup required to handle it, you could take a look at using the block-grid rather than the regular grid so you cane have large-block-grid-5 small-block-grid-2 as your ul class (and then remove the last-child li with a ress conditional aimed as large screens). Worth a try anyway.