Select $content for different screen widths

[pwired]

Hi,

I know that Mobile Detect exists as a PHP class for detecting mobile devices, and that window.screen.width exists for javascript.

But since processwire is so flexible, I think it must be possible to achieve detecting screen width
and select a $content accordingly.

I want to try to achieve to detect the screen width and then select a specific $content to render out in the _main.php.
So when a visitor is looking at a website with a sreen width 1024px, then $content1 is selected and rendered in _main.php
And I want to achieve the same thing for visitors who watch a webpage in different screen widths.

So far I am trying to use @media queries to give a <div id="screenwidth"></div> a background image at certain screen widths.

 

#screenwidth {
	width: 100px;
	height: 28px;
}

@media only screen and (max-width: 1024px) {
    #screenwidth {
        background-image: url(img/car.jpg);
    }
}

 

I want to use 3 different @media queries with max-width: 1024, 600 and 350px
and give the <div id="screenwidth"></div> 3 different backgroud pictures, car, boat and bike.jpg for those different screen widths

Then with PHP I want to detect if the background picture url exists for a certain screen width
and use that to select a specific $content in the _main.php

If background picture url exists: then select $content1

In the end I no longer want to use a background picture, but a transparant pixel (1px)

The @media queries are working and the background pictures only show up at the different screen widths
But I cannot use PHP to detect the different background picture urls because all 3 background picture urls already exist
inside /templates/styles/img/

Does anyone have other approaches to get this to work to select a different $content on a different screen width ?

 

 

 

[BitPoet]

IMHO not without AJAX (which breaks SEO). The (first) request for the page's html happens before any information about screen sizes can be transferred.

If it's just images you could:

• use placeholder images and delay load the correct images through js -> this runs the danger of multiple redraws of the page, which can get really ugly with slow connections
• or go in the direction adaptive images does by setting a cookie with the screen width (or a resolution indicator) and route all page image requests through a custom PHP script that determines the exact image to serve -> harder on the server and its memory and likely to break caching strategies

I'm generally not happy with such approaches, as even screen width (not just browser width) is a dynamic value. The moment I rotate my phone/tablet/monitor, it changes. In the middle of browsing. So to me, adaptive content is mostly a client side problem that needs a client side solution. AJAX loading the relevant content is a possibility where SEO is not a goal (like in corporate intranets).

[AndZyk]

I would do this:

Backgrounds

Use media queries, as you are already doing.

Images

Use the picture element for art directed images with media queries. That is what its meant for.

Content

Output all versions of the content in your template and use media queries to show/hide the versions for different devices.

If you are using a framework, there are components for this use case:

• UIkit: Visbility
• Bootstrap: Display

 

I would strongly avoid user agent detection. ?

[pwired]

Hi AndZyk

Thanks for your replay. But I think it would be bad for SEO because Google does not like double content.

[szabesz]

2 hours ago, AndZyk said:

Use the picture element for art directed images with media queries. That is what its meant for.

I like the following intro to the picture element:

http://web.simmons.edu/~grovesd/comm333/modules/responsive-media/srcset/#art-direction

the article links to a simple but good responsive demo page:

http://web.simmons.edu/~grovesd/comm333/demo/responsive-media/srcset/art-direction.html 

2 minutes ago, pwired said:

But I think it would be bad for SEO because Google does not like double content.

Try using CSS Grids if you are concerned that google thinks using display:none is bad for SEO. I've read articles which say it is OK to use them. It is a controversial topic, some say google will penalize the site, some say it does not matter.

[AndZyk]

11 hours ago, pwired said:

But I think it would be bad for SEO because Google does not like double content.

It is not bad for SEO. Duplicate Content on the same page will not be penalized. Only if you have it on different pages. Search engines ignore hidden content. ?

User agent detection on the other hand could be bad for SEO I guess.

[pwired]

Hi AndZyk

Thanks for that. I didn't know about duplicate content on the same page will not be penalized.

What about the website navigation part ? If I want to serve different navigation layouts for different screen widths and keep them unvisible, that  would be duplicate content on all webpages I think.

I am still trying to find some clever hook in the css media queries to set a value in a variable in php to select a $content in _main.php

Didn´t expect it to be so hard to find. On the other hand, php is done on the server side and screen width is happening on the client side, so I might just drop the whole idea and go on with the usual responsive design.

[AndZyk]

43 minutes ago, pwired said:

What about the website navigation part ? If I want to serve different navigation layouts for different screen widths and keep them unvisible, that  would be duplicate content on all webpages I think.

No, that would not be duplicate content. Search engines (or Google as far as I know) are smart and see websites like humans. If there is some content invisible, they ignore it. Google uses for their search engine an older version of Chrome, so it can interpret JavaScript and media queries:

 

Hiding/Showing content for different viewports with media queries is a common practice. For example take the Microsoft website: They use two navigations with the same content. One for desktop and one for mobile.

 

43 minutes ago, pwired said:

I might just drop the whole idea and go on with the usual responsive design.

You should do that, because as mentioned on the article I linked before:

Quote

It's worth re-iterating: it's very rarely a good idea to use user agent sniffing. You can almost always find a better, more broadly compatible way to solve your problem!

?

[pwired]

Hi AndZyk

Thanks for clarifying and the link, youtube is a great resource. I probably will play around with php a bit and dive into css display:

good conversation by the way on that clip