Best practice to handle responsive content

[pleini]

Hi there,

how do you handle responsive content with processwire?

It's easy if you want to show the same content on every device and you just do things like

moving boxes arround and leaving a picture away.

But what about different content for mobile / tablet / desktop?

So showing for some field a mobile / tablet / desktop version?h

Inside the backend, I think it's important to fill up all 3 versions at the same place.

What's the best way to handle this in processwire?

Thanks for you help

[cstevensjr]

ProcessWire leaves the responsive content up to the developer.  You are not limited in what front-end framework (Bootstrap, Zurb Foundation, etc...) that is used.  There are existing responsive profiles already available that you can use.  

Others on this great forum will provide additional details.  Welcome to ProcessWire.

[pleini]

Of course, I'm not talking about a responsive framework but how to handle

a different field for different devices.

I'm looking for a best practice.

Of course, I can add three fields like

featurelist_mobile, featurelist_tablet, featurelist_desktop

But is there a better solution?

[cstevensjr]

Maybe we are misunderstanding each other.

  But what about different content for mobile / tablet / desktop?

So showing for some field a mobile / tablet / desktop version?h

 A responsive framework allows you to have 1 field "featurelist" and the display will accommodate any device (tablet, phone, desktop, etc...).  

The logic (framework code) determines what device you have and displays the content according to the wishes of the developer.   That means if you have other content that should show up on a tablet only, this is the optimum way to do that.  That is covered when you use the front-end framework.  If you are talking about responsive content, then that's a responsive solution.

I'm sorry if I still am not talking about what you are looking for.  My apologies.

[Joss]

There are two different approaches here:

1. You want to have the same content for both mobile and desktop users, but laid out differently

2. You want to have different content for each - maybe a less verbose description of something for the mobile users that takes up less space.

Looking at number 2, you would need to create two distinct fields - obvious really since you will be adding different content! Then, using whatever frame work or a bit of jquery to recognise the browser type or viewport size, you can call up each field in their distinct way. One warning, however, it is unwise to deliver different content to users of different systems - just because they use different devices does not mean they are distinct market segments.

Looking at number 1, in this case you can use the same information in more than one way.

So, you can call $page->title and $page->body, for instance, but then lay them out in perhaps 4 different ways, using media queries or JS to select which one to use.

Foundation, for instance, has a utility called Interchange for doing exactly this

http://foundation.zurb.com/docs/components/interchange.html

The point with ProcessWire is that it is versatile enough to server whatever content you need, however you need to use it - you just have to work out what you want to do with it.

I suppose one thing you could look at for fun is the core language modules, but rather than trigger them depending on the language, trigger them depending on the device. I have no idea how that would work, but it might be an interesting way of looking at it.

[pleini]

Hi Joss,

thank you, I definitly try to deliver the same content for all devices but sometimes it doesn't work out.

Interchange looks really awesome do you know if something similar exists for Bootstrap?

I thought about utilizing the language modules but it might be better not touching them...

An awesome feature would be variants of fields.

Like building a blue t-shirt page by inheriting a red t-shirt page. In this way, the user has got the abilities to extend a mobile page as desktop variant by just changing a bunch of fields he really has to adjust.

Best,

Chris

[Ivan Gretsky]

As far as i know, responsive design is now a mostly frontend thing. Processwire fields logic works only on a server side. And server does not know almost nothing about the device. So there is probably no consistent way to have specific fields for different types of devices.

But you can define conditions in the front end via js or media queries to reveal different hidden parts of the page, which could be formed using "device-specific" fields. But i wouldn't do that .

In case of "interchange" plugin you still have several html files which could be genrated using different PW fields, but PW still does not know nothing about the device. It is js and media queries who handle the logic.

You could organise "device specific" fields via tabs in admin for better usability and thats about it.

If you only need specific images served to specific screen widths or something, you could look at srcset, but browser support is still poor.

Edited June 11, 2014 by Ivan Gretsky

[horst]

.... And server does not know almost nothing about the device.

@Ivan: but you can tell the server if you want him to know it: https://github.com/serbanghita/Mobile-Detect

[Joss]

@pleini

Since you can create whatever fields you want you can also create whatever variants you want.

On your template (not template file) you might want to have different tabs for different devices.

However, since you want to have exactly the same data in all devices (wise choice), there is no need. You can do this as part of your template file, which is far more useful. Then the user does not have to worry about devices, the template files will sort that out.

You can also use bits of php - so, for instance, you might want to break an article up into a series of iPhone sized swipeable pages, but just for phones. So, you use a bit of php to break your text up into the right sized junks and then use some sort of content slider to display them. On a Desktop, it would just show as one page.

But this is all work you can do in your template files while leaving your templates/fields uncomplicated.

I don't think Bootstrap has the equivilent of interchange, but I am sure there are plenty of jquery plugins out there that you could use. like response.js http://responsejs.com/

[pleini]

@Joss ok, thank you.