App Web Viewer

[lkjdfaslkdfas]

Hi.

Been working with the web viewer and still trying to figure out how "exactly" to get the content to position itself correctly on my screen, when viewed in a web browser like chrome or firefox.

Is there any kind of rule of thumb? like design your "Web App" for a specific browser size? 1280 x 720 (just an example).  I have both a retina screen and 24" 1920 x 1080 resolution screen. Trying to get my content to appear "correctly" on the screen with a layout that somewhat resembles my "Tablet" layout has been nothing but utter failure.

Anyone have some information they might like to share etc...

thank you.

[Colin_Fleming]

I doubt you can expect a browser to be a certain size, and I agree that making the tablet design look good on a desktop is difficult.

Have you taken a look at "layout renditions" in Layout Templates?

I typically start by designing for tablet, then you can add layout renditions for phone and web viewer. This might help.

My process (developed with Bob Bringhurst) is to create a framework of controls (add the cards I expect to use but don't design them, then add the mapping rules that will control card use) and eventually "design" things by adjusting the properties for the layout and cards. The advantage of this approach is that I get to see a variety of cards in the layout view and adjust as I design. It's a little blind initially, but we like the approach.

Once the tablet is working the way we like, we add a layout rendition (for phone or web view.) And then we adjust the layout and/or cards to work on the different device/desktop class. All setting from the tablet layout rendition are copied into the new rendition, and then changes are made.

This should help with controlling the web viewer experience.

HTH

[10TonMedia]

Thanks Colin,

have you had any issues with a "blank" card? for web view?  I am using a blank card to push my cards down, instead of the "Top Margin".

[10TonMedia]

I forgot to ask directly about Web Viewer sizes.  How many renditions do account for when designing for the web viewer? just the common 3 or 4? or 1 main?

[Colin_Fleming]

No specific experience with blank cards in web viewer, sorry. OTOH, my challenge with throwing blank cards into a collection to control spacing is that you have to do extra work to manage these additional pieces of content, even if they're invisible. If I want to push things down, I _would_ use a top margin.

[Colin_Fleming]

You get one web layout rendition. So maybe I don't understand your question.

[lkjdfaslkdfas]

Hi Colin,

I am using Renditions and would like to know.... When design the "Web" rendition, I have chosen 1920 x 1080 (Large Screen) for my layout.  Can I click the "Make Default" for this? or will that now over-ride the Tablet Layout?

[Colin_Fleming]

Keep in mind, when you set a dimension while working on a layout rendition it's only for visualizing in the Layout Templates system. You are not setting the dimension of your reader's browser window when they're using the web viewer. They could change the size of their browser window at any time.

The "Make Default" sets a layout rendition (tablet initially is the default) to be used as the starting point when you add a new layout rendition. HELP explains this.

So initially, tablet is the default. When you add a phone rendition it inherits all the settings for layout and cards from the tablet layout rendition. And then you change how the layout rendition for phone is different.

Then you might add a web viewer layout rendition, and it starts with the tablet settings. Then you change how the web viewer layout and cards work.

So any one of the three layout renditions could be set as default, and it becomes the starting point when you add a new layout rendition.

HTH -- Colin