Responses to Questions From My "Four Paths to Mobile With Flare" Presentation

Thomas Z

Q: If I make a medium for another output is the second medium styles saved in the existing CSS style sheet?
A: Yes, they’re saved in the CSS under a section header that looks like @media... For example, all the custom settings that I made for my mobile medium are saved in the CSS under the heading @media mobile. That section and its first style entry look like this:

@media mobile

{
            h1
            {
                        font-size: 12pt;
                        color: #1e90ff;
            }

…plus any additional settings.

Craig P

Q: Do you do any kind of CSS reset for your projects?
A: I haven’t had the need to but it’s one of those things that’s on the horizon. (If you’re not sure what a reset is, try this article - http://sixrevisions.com/css/css-tips/css-tip-1-resetting-your-styles-with-css-reset/.)

Q: Mediums know mobile versus print, etc. How might screen size be handled?
A: The next step after mediums, officially called “media types” by the W3C, is “media queries”, also from the W3C, where you can actually set properties like screen size and related actions – e.g. “if screen size > 300 and < 600, do X…” kind of thing. If media queries aren’t near the top of the priority list for Flare 9, I’ll be shocked.

Q: What's the name of the first CSS book you mentioned? Authors?
A: “Cascading Style Sheets:Designing for the Web (3^rd Edition) by Lie and Bos. It’s not fully up to date as it was published in 2005 but, IMO, is the clearest book you’ll find on the subject and the best way to get the basics. Then plan to go online to read up on CSS3 and media queries and all the newer stuff.

Heather J

Q: It looks like you couldn't really display help along with the application. Do you see downsides to that?
A: There’s obviously a downside but that that’s only true if a given device won’t multi-task, in which case the help may have to be embedded in the application. Depending on what you’re writing help for, you may also be able to use Flare to create a WebHelp Mobile output and tie it “context-sensitively” to an app. I did this using a native app authoring tool called ViziApps, the one I mentioned, and Flare, and wrote a white paper about the process for MadCap last summer. I can send you a copy if you’d like. Let me know.

Sue A

Q: Could you have two mediums for mobile - phone and tablet? How do you add a medium?
A: You can have as many mediums as you want. (But remember that mediums let you set style properties but not adapt the content to the device size. For that, you want to get up to speed on media queries – see above.) To add a medium, open the Stylesheet Editor, click the Options pulldown on the right end of the Stylesheet Editor toolbar, select Add Medium, and name the thing. Select the desired medium using the Medium pulldown on the Stylesheet Editor toolbar. You can’t delete a medium via Flare’s interface. You have to open the CSS file and find and delete everything under the "@media mediumname" heading. It’s not a major problem but is inconsistent. I expect this to be corrected in Flare 9.

David W

Q: What do you recommend doing with tables in phone form factor and does CSS handle it?
A: That’s a tough one. First, I’d try to simplify my tables way down and conditionalize them for mobile output. Second, I’d grudgingly accept the fact that some tables are wide and have to be scrolled, just as I accept the fact that I sometimes find a landscape-formatted page in a printed book and have to turn the book sideways to read it. CSS does handle tables but it depends heavily on how well the device standard itself handles tables. For example, ePub doesn’t do a particularly good job, in my experience, with any table more complex than simple rows and columns. But check the particular standard you’re using.

Stephanie L

Q: how do I add a back button to my web mobile output?
A: Take a look at the Back and Forward “buttons” at the bottom of the canvas on the WebHelp Mobile emulator. Those act like the equivalent buttons on a browser toolbar. Let me know if you had something else in mind.

Answers to Questions From CSS Class at nSight on June 28

Here, a day late, are the answers to the questions from last week’s CSS class.


Re adding a non-scrolling region in a topic to create a non-scrolling table row to make sure the column heads for a long table remain visible as users scroll the table. What you do is create a non-scrolling region at the top of the topic (which would normally contain the topic title) and put the table row containing the column heads in that non-scrolling region. See the instructions at Mike Hamilton’s blog – see http://madcapsoftware2.wordpress.com/ and scroll down until you see the post entitled Adding Non-Scrolling Regions to Flare Topics. This works, but only if the table is at the top of the topic. If the table is further down, this won’t work since you can’t have a non-scrolling region within the body of a topic. However, you could put the tables in separate topics and link to them, in which case the column heads would be at the top of the topic. However, you’d have to do this consistently, or else label what you’re doing, to make sure that users don’t get confused as to why some tables are visible in the topic they’re reading but others are only available via a jump link.


Re Flare not showing style property changes in the Stylesheet Editor but showing them in the topics that use that style sheet? This may have been a one-time error as it seems to be working correctly now. If it happens to you again, either contact tech support or contact me directly and I’ll follow up for you.


Re where Flare puts a sub-class of an a tag, like my “littlepopup” example? It apparently does put it under the a tag rather than under the popup sub-class. It’s been almost five years since I created the custom popup tags, so my memory of where Flare put those sub-classes may simply have been incorrect.