Dashboard: minimum/maximum(?) tile size and fonts, not absolute...or mobile-aware layout

Using fixed settings for dashboard layout elements (column width, row height, font size, icon size, grid gap, etc) can produce dashboards that look terrific when carefully tweaked for specific devices (screen size, screen orientation, resolution).

The same dashboard may be unreadable on a device with a different display.

The "auto-fit" settings seem to produce very good looking dashboards on a desktop monitor, but the same tile layout is unreadable on a different device (ie., portrait mode cell phone or tablet).

It would be very helpful to allow users to set minimums for different quantities (particularly tile width/height and font size), while allowing auto-fit. Maximum sizes for those characteristics may also be useful.

Even better would be dashboards with CSS that uses media queries to dynamically produce a good display across multiple platforms.

I set font sizes in custom CSS using vh and vw, and I have a pretty good scalable dashboard:

Use Smartly.

I'm using it and like it a lot. It's got features that really should be in HE itself....but the same issues hold -- "Smartly" dashboards look great on a 3K portrait monitor with automatic tile width & height...but the same dashboard is unreadable on a phone or FHD tablet.

Manually adjusting the dashboard for those devices produces something that's OK on a desktop monitor, but far from ideal.

I agree but how could this be fixed? Isn't it simply the case that you cannot effectively squeeze such a dashboard that is great on a large monitor down onto a phone screen? What specifically would you have the system do to accommodate these screen size differences? Maybe it be better to just have another smaller dashboard optimised for the phone screen. Agree it would be nice if the system could adjust but I'm not sure how this could really be achieved beyond what Smartly already does.

Um, see my initial post. CSS can query for the display device. Based on that, there could be several steps in minimum/maximum tile size & fonts, depending on the display device and orientation. Layouts could vary (ie, 5 rows x 10 columns on 3K portrait desktop, 16 rows x 3 columns of larger tiles on a portrait mode phone in order to show icons and text in larger sizes and have buttons large enough to hit accurately). Resolution and icon families could be selected dynamically for improved readability on low-DPI/smaller dimension devices. There are lots of techniques...I was suggested very elementary starting points, not trying to do a full UI/UX design.

It's clear that the UI is not the strength or focus of the HE developers, but improving the interface would be a great benefit to users, and it's not that difficult -- as evidenced by Smartly and by lots of individuals who've tweaked their own dashboard displays.

My feature request is to put that kind of usability improvement into the core product, beginning with enabling fixed minimums as a baby step, to ensure a "fail safe" dashboard that is readable on multiple devices. The next step might be enabling HE to generate "smarter" dashboards (rather than having each user hand-edit their own CSS).

I agree.

It would be nice to set number of rows/columns based on viewport size, but I can imagine the possibilities being pretty complex, considering all the layouts different people want to do. If I only used 1x1 tile sizes that might work OK, but I don't have any tiles that are that small, since I use lots of rows/columns to allow smaller adjustments to tile sizes.

I actually ended up with separate dashboards for my phone and my tablets, and my tablet dashboards can be resized to a 4k PC monitor with no problem, but my phone dashboard doesn't resize. If the layout changed based on portrait/landscape mode I could get them all to work, but I really don't want any fixed minimums. When I set font sizes by vh or vw in custom CSS, I want those to be what I asked them to be.

Finally, when I got my dashboards to work across my tablets and PC monitors, I ended up realizing it would have been quicker just to make multiple dashboard versions, which is how it's really designed. I do like this way, since maintaining/updating one dashboard is easier than two.

That's just the kind of "complex" that computers are good at -- there are lots of existing algorithms to pack "N" tiles with a total of "W" column width into a variable number of rows, based on the available display width. It almost certainly won't be as pretty as hand-tweaked dashboards, but it'll be better than the current situation.

To clarify, my requested enhancement was to allow users to set their own fixed minimums for quantities that are currently variable (width/height/font) -- not to have those minimums imposed by HE for every display.

Exactly...maintaining one dashboard is the ideal, with scaling and layout changes happening based on the output device. My suggestion is that the part that's time-consuming (hand-coded CSS to enable variable interfaces for different display) should be part of the core UI. Of course, users would still have the ability to tweak the HE-generated layout.

1 Like

TLDR but have you’ve looked at the settings available per dashboard to see if setting those to auto and then using custom CSS will solve your issue :

If can't read the preceding 8 posts, then why bother replying?

Don’t like being preached at. From what I read you may not have explored all of the options. You can take my suggestion or not, I’m happy with the way my dashboards look and function, it appears that you aren’t....