Responsive HTML5 Output

[Josh101]

Has anyone experimented with attempting to implement "responsive" design into their HTML5 output using something like Twitter Bootstrap, etc.? For those who don't know what I mean by responsive design, see the Wikipedia entry: http://en.wikipedia.org/wiki/Responsive_web_design. But basically it's where the content on a web page changes depending on the screen size of the device it's being viewed on. The product I document is using Bootstrap to make the product change depending on the size of the browser window, and there is an increasing demand that the help be able to do the same. Yes, I can create separate mobile output, but that's not ideal because the developers then need to figure out how to call a different help system based on the screen size (I'm sure they could do it, but it's a pain.)

I imagine it would be a monumental hack to get something like this to work in HTML5 output, especially since it uses iframe, but seems like there are a lot of hacks being done to Flare's web outputs to get it to do what users want.

Has anyone experimented with trying to get HTML5 to be responsive yet, and if so, did you have any luck with it?

[NorthEast]

I've used Twitter Bootstrap a lot in developing websites, but not yet with Flare help.
I think combining Bootstrap with Flare help would be quite a lot of work, as the Flare help outputs are completely undocumented.

You should be able to add your own responsive design to the HTML5 output though.

If you look at the HTML/CSS (I'd suggest using an inspect tool like Firebug) , you should be able to identify the panes - #navigation, #contentBody, #navigationResizeBar, etc.

Have a look at how those panes are positioned (in /Skins/.../Styles.css), and then add some media queries to adjust their properties; e.g.

Code: Select all

@media (max-width: 950px) 
{

	#navigation { width: 245px;} 
	html.left-layout #contentBody  { width: 700px; left: 250px; }  
	html.left-layout #navigationResizeBar { left: 245px; }
}

@media (max-width: 500px) 
{

	#navigation { width: 195px;} 
	html.left-layout #contentBody { width: 300px; left: 200px; }  
	html.left-layout #navigationResizeBar  { left: 195px; }

}

[Josh101]

Easy, right?

I agree that using Bootstrap would be a lot of work, but it may be interesting to play with. The more I look at that page, the more I see that all of the structure is there, just none of the content. They must be pulling in the content using JavaScript?

Anyway, I was hoping someone had played with it. I'm guessing not, but keeping my fingers crossed. I just want to know whether it's worth my while to fool around with.

Hopefully someone from MadCap pays attention to these forums and a lightbulb is going on over his/her head. What an awesome feature a responsive help page would be in some future release. That would certainly set them apart from any other help authoring tool I've ever seen.

[NorthEast]

Well, those examples are as easy as it's ever going to be - they use exactly the same technique as bootstrap, and will automatically resize the panes in a responsive manner. I'd probably just expand them to handle the left pane position on a small screen; e.g. position it above the body pane.

If you wanted to use the bootstrap grid to control the layout (i.e. use its row and span classes), you'd have to first remove all of Flare's CSS for the positioning of the panes, as they'd just conflict with each other.

If you want to see responsive design, rather than hope someone reads this, just put in a feature request.

[jcatlin]

I've considered creating responsive HTML5 output, myself. I know it won't be easy, as we'd really have to tweak in order for Flare to create what we want. I have bigger fish to fry right now, but I'm certainly interested in the topic and will keep an eye on it. I may submit a feature request, if it hasn't already been done.

I think it would be very beneficial for us as authors to work with just one output and just one URL for our customers.