Responsive Output and Conditioning

This forum is for Single-Sourcing your Flare content to multiple outputs.
Post Reply
TorontoFlare
Propeller Head
Posts: 35
Joined: Mon May 12, 2014 10:50 am

Responsive Output and Conditioning

Post by TorontoFlare »

Is it possible to condition text to appear (or not) in the three different mediums of an HTML5 skin with responsive output?

I.e., some text that is applicable to mobile to not appear in the same help page when it is at desktop resolution, etc.
doc_guy
Propellus Maximus
Posts: 1979
Joined: Tue Nov 28, 2006 11:18 am
Location: Crossroads of the West
Contact:

Re: Responsive Output and Conditioning

Post by doc_guy »

Yes. I've done this.

You have to work in the code of the CSS stylesheet, but that's not too bad.

Do something like the following:

Code: Select all

@media screen and (max-width: 900px)
{
    p.hide { display:none;}

}
This says when the browser window is narrower than 900px, hide all paragraphs with the class of "hide".

That's the basic concept. Let me know if you have more questions.
Paul Pehrson
My Blog

Image
doc_guy
Propellus Maximus
Posts: 1979
Joined: Tue Nov 28, 2006 11:18 am
Location: Crossroads of the West
Contact:

Re: Responsive Output and Conditioning

Post by doc_guy »

Sorry just re-read your question. In this case, do the opposite:

Code: Select all

p.mobileonly{
     display:block;
}
@media screen and (min-width: 901px)
{   p.mobileonly{
     display:none;
    }
} 

Here is a more complex example:

Code: Select all

@media screen and (max-width: 500px)
{
/* Phone mode styles */

p.phone {display:block;}
p.tablet {display:none;}
p.desktop {display:none;}

}

@media screen and (max-width: 900px) and (min-width: 501px)
{
/* Tablet mode styles */

p.phone {display:none;}
p.tablet {display:block;}
p.desktop {display:none;}
}

@media screen and (min-width: 901px)
{
/* Desktop mode styles */

p.phone {display:none;}
p.tablet {display:none;}
p.desktop {display:block;}
}

}
In that case, you have three paragraph classes. One class is visible for phone mode, one class is visible for tablet mode, and one class is visible in desktop mode.

Again, those are the basic concepts you're working with.
Paul Pehrson
My Blog

Image
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Responsive Output and Conditioning

Post by NorthEast »

As doc_guy mentioned, using media queries will allow you to change the styles in topics at different resolutions.

However, note that it's difficult/impossible to co-ordinate the change in the topic styles with the change in the skin responsive medium.

When the skin switches from desktop to tablet medium, the navigation bar is hidden and so the topic width will actually increase initially.
For example, using Flare's default skin settings, the topic width will be around 950px in desktop medium (with navigation bar), and increase to around 1250px in tablet medium (without navigation bar).
So that causes a big problem if you're trying to use the topic width alone to co-ordinate the topic style changes with the skin - you'd need to find a way for it to 'know' what responsive mode the skin is in.
TorontoFlare
Propeller Head
Posts: 35
Joined: Mon May 12, 2014 10:50 am

Re: Responsive Output and Conditioning

Post by TorontoFlare »

The problem here I am trying to solve is that this is a web-application that we are also going to have a mobile (web-based) application for.

Some topics (or parts of topics) will not be applicable to mobile. My goal here is to try to find the best way of excluding text from the help when it is clicked on from a mobile or tablet. The URL for the help system is the same.
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Responsive Output and Conditioning

Post by NorthEast »

TorontoFlare wrote:The problem here I am trying to solve is that this is a web-application that we are also going to have a mobile (web-based) application for.

Some topics (or parts of topics) will not be applicable to mobile. My goal here is to try to find the best way of excluding text from the help when it is clicked on from a mobile or tablet. The URL for the help system is the same.
What you've described doesn't really sound like responsive output. Responsive in this context means that the layout adapts to the device that is viewing it, which in the example above is based on the screen dimensions of the device. It sounds like you want the help to display different content depending on the version of the application it is being used with.

If you're producing two different web applications (normal and mobile), then the easiest solution is just to produce two outputs (it won't be difficult on the application side to switch between two URLs).

If you really must have a single output to display different content depending on the application it's used with, then how will the help 'know' which application that is? What determines whether a user accesses the normal or mobile version of the web application?
TorontoFlare
Propeller Head
Posts: 35
Joined: Mon May 12, 2014 10:50 am

Re: Responsive Output and Conditioning

Post by TorontoFlare »

Yes it seems that responsive output probably isn't appropriate for this purpose. I was hoping it would be, because it is so much easier to set up. But, if I am reading your responses correctly, conditioning text doesn't seem to be an option in responsive output, at least not without some kind of complex trickery.
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Responsive Output and Conditioning

Post by NorthEast »

TorontoFlare wrote:Yes it seems that responsive output probably isn't appropriate for this purpose. I was hoping it would be, because it is so much easier to set up. But, if I am reading your responses correctly, conditioning text doesn't seem to be an option in responsive output, at least not without some kind of complex trickery.
Setting a 'condition' in Flare just allows you to switch it on or off in a single output; so it's designed for cases when you're producing multiple different outputs. Flare conditions don't support dynamically displaying different content within the same output.

As doc_guy shows above, you can use responsive layout to show or hide content (styles), based on a media query such as the screen size.

You can hide styles/content this way, but it's probably only suitable in quite simple situations. For example, if one version of the application has extra features and options, then it may be difficult to hide that; because you can't hide a topic in the TOC, or hide topics from appearing in search results.

The other point I was making is, if you're using something like the screen size to determine what help content to display, then the screen size must also determine what application is displayed to the the user. Otherwise, how does the responsive help know which application is being used?

It's hard to say exactly what is/isn't suitable, without knowing about how your applications work.
TorontoFlare
Propeller Head
Posts: 35
Joined: Mon May 12, 2014 10:50 am

Re: Responsive Output and Conditioning

Post by TorontoFlare »

Yeah I am pretty sure that responsive output isn't going to cut it here. Basically we are now developing a version of our web application which is nearly the same but has a different UI for mobile/tablet purposes. Naturally, there will be some small but significant sections of the help that should differ. Our online help is also web-based. So I am guessing the best option here might be to create two target outputs with two similar URLs and then have the application determine which help URL open.
Post Reply