Hi there,

doey anybody know if it's possible to size a dashboard depending on the resolution of the user's screen?

E.g. User A with a screen resolution 800x600 gets a different dashboard then User B with 1024x768?

I think about catching the specific resolution when login in to BID via JavaScript or browser variables. Depending on the results, you could use different CSS and then do some kind of redirecting...


Kind regadrs,

Stefan

First, if your question is, is this supported in today's PMF without customization, the answer is "not yet." What happens today is that if you resize the browser to a smaller size than the dashboard was designed, you get scrollbars around the OUTSIDE of the dashboard, necessitating scrolling the entire dashboard to see the offscreen components outside the viewport.

As a potential feature, the question of Proportional Sizing is a very interesting question.

Technically using HTML and Javascript technology, it is very possible to have the block sizes in a dashboard adapt automatically to the available size of an HTML page. The javascript DOM properties for size are xxx.clientHeight and xxx.clientWidth, and these are readable at runtime and can be used to control sizing.

We've already incorporated auto-sizing in places in PMF. For example, if you resize a browser window when you have a PMF panel up (say, "edit measure,") you'll notice the elements on the form place and size themselves accordingly.

However, on the dashboard, additional questions arise. If we were to put Proportional Sizing as a capability into PMF's Dashboard UI, what should happen when a user makes a window smaller? Which of these is the lesser of two evils?

• A: The gadgets resize proportionally to the browser window size, and the content in the blocks on the dashboard stay the same size (necessitating scrollbars, and in some cases very tiny little blocks that are all scrollbar and no information).
  
• B: The gadgets resize proportionally to the browser window size, and the content in the blocks on the dashboard gets smaller (e.g., the charts shrink to fit the space, and as for the grids, the fonts resize to a smaller size; potentially becoming unreadable?)
  

We'd love to get your opinions about this.

One capability that is going into the 5.2 series new Dashboard Designer (which you really should take a look at) is the ability to place guidelines on a dashboard, to snap gadgets on the dashboard to the guidelines, and then to use guidelines as a way to display the target sizes for each dashboard.

In general when I personally design a dashboard it's always for a specific target screen size. I don't think that auto-sizing gives good results, and scrollbars are particularly obnoxious; the whole point of making a dashboard is information presented holistically to enable the eye to see similarities, create patterns, note contrasts, see trends; if you load it with scrollable regions, you're just hiding the information that you want to show.

But that's just my opinion as a designer, whatever it's worth. It happens to coincide with Stephen Few's opinion as well.

Note that older HTML had a "percent of total" capability where a developer could say "HEIGHT=50% WIDTH=50%" or whatever, but modern browsers support this very inconsistently, and thus that old capability is not very useful, and not recommended.

Hi Bob,

quote:

Originally posted by Bob Jude Ferrante:
First, if your question is, is this supported in today's PMF without customization, the answer is "not yet." What happens today is that if you resize the browser to a smaller size than the dashboard was designed, you get scrollbars around the OUTSIDE of the dashboard, necessitating scrolling the entire dashboard to see the offscreen components outside the viewport.

my question was not about resizing the browser, it was about the screen resolution.
I think the actual behaviour when resizing the browser is ok, as it's the "standard" behaviour a browser shows.

I want the whole dashboard incl. gadgets to fit on different screen resolutions (as mentioned before e.g. 800x600, 1024x768 or whatever).
Idea is to define my dashboard and place the gadgets relatively according to the available Space, instead of the actual way with absolut positioning.

I am thinking of something like

<table width="80%">

or as a CSS-Version with

table style="table-layout:fixed">
 <tr>
  <td style="width:25%">width:25%</td>
  <td style="width:25%">width:25%</td>
  <td style="width:25%">width:25%</td>
 </tr>
</table>

Kind regards,

Stefan

It's always been understood what you are asking for, and also the method for accomplishing it is known (note that in PMF all styling is done with CSS, not by embedding sizing and positioning metrics in HTML tags, which is pretty much deprecated in today's HTML and will really start to disappear with the new box model in HTML 5).

What we needed before we could start to design anything was an answer from you to the question of how would your users like the containers relatively sized within the page so that the content could still be readable. Not a technical answer, but rather a business case answer. Which of these evils is most preferable to your users:

• Rely on the PMF Dashboard auto-size to content capability, so they see top/left content and click to see all of it?
  
• Have report fonts and charts shrunk proportionally to their containers' sizes?
  
• Use scrollbars within blocks?
  

No matter which of the above are done, it will not look good, or even decent. If you design a dashboard on a 1280px wide screen, users with 800px screens will be disappointed no matter the tech used. They hate scrollbars, they hate shrinking fonts and charts, and they're annoyed when their content requires a click to be visible.

Today fewer than 5% of computer users have 800x600 screens, so you might want to tell your users to get bigger screens? Today you can get $90.00 20" wide flat panel monitors that easily do 1280px width.

thanks

Bob,

the TABLE-stuff was just supposed to serve as an example, I'm very aware that this kind of sizing is deprecated.

When I got you right, you want to hear my ideas of sizing the containers.
As I assume that containers and gadgets are similar, here we go:

• we have a overall definition of a minimum default font and gadget size (e.g. 8px font, 150px height, 100px width etc)
  
• the dashboard is designed using the minimum available screen resolution at customer's site
  
• positioning is done relatively (with %, as shown before
  
• for higher screen resolutions, we have a CSS with larger settings
  

This has the opposite effect as you mentionend above, so

• each user is able to see the same content on a dashobard, not depending on the screen size
  
• we have a common minium size of a gadget to ensure the readability
  
• we do not need scrollbars
  

N.B.:

quote:

Today fewer than 5% of computer users have 800x600 screens, so you might want to tell your users to get bigger screens? Today you can get $90.00 20" wide flat panel monitors that easily do 1280px width.

800x600 was just meant to be an example ;-)


Best regards,

Stefan