Typical Dashboard Canvas Size / Proportionality

Good Morning…

I’m creating dashboards that are being rendered in Power BI. I’ve been using the default large screen base that is generated by Axure 8 Adaptive Presets (1200x660) as my general canvas size, but not sure if this is correct as my default. Of course, the whole thing will scale. But is this roughly 2:1 dimension what I should be using for my default page size to pass off to developers or am I giving them screwy base dimensions to deal with? Or does it even matter?

Thanks for your help of advice in advance?

The best place to start is by analyzing the most common browser sizes of your site/application’s users and design for that.

However browsers can be any size so you still need a design that can work at any size. Instead of giving your developers designs for every possible screen size (you can’t) design for the most common sizes and then document how the page behaves at different sizes. Maybe your design flexes to fill the available space. Maybe content rearranges as the window gets smaller. Maybe you have just a handful of fixed sizes and you just fill in the gaps with white space.

There’s no one answer or one right answer. The size you’re using sounds like a pretty standard small, lower end laptop resolution. It’s probably a safe bet but you’ll still have to define what happens with other sizes.

Thanks! Unfortunately there’s no real way to nail down exactly what users will be employing as a browser or platform as they’re global - desktop and mobile. And yes, we will have to scale responsively, etc… I just wanted to make sure that the 1200 x 660 ratio is appropriate to use a our base starting point. But it seems like you don’t feel it’s wildly off track.



Ultimately it comes down to how you and your team work best.

If you’re going totally responsive, I personally find it easiest to start at mobile. In Axure, this means I set my smallest mobile size as my default view and then cascade up larger and larger viewports to the largest size I design for.

I prefer doing it this way because I can layout my mobile layout, and then work up the adaptive views and modify the layout for the larger size. You can do it the other way around but I find this way to be easier and beneficial in promoting a mobile-first design process if that’s important to you.

Totally understood… but because of the way our development team is set up, and with stakeholders in 4 regions, we needed to start at desktop of they would never “get it.”

In any event… appreciate your insights!

Hah. Been there. Adaptive views are pretty adaptable (har har) so you should be able to make it work for you however you need to do it.