I'm trying to create a portal/dashboard using jQuery & Bootstrap. I need the ability to display gadgets with fixed dimensions that can be displayed on the same page together. I am giving the user the ability to define a template for each page, which defines the dimensions of gadgets that can be displayed on the page and also their layout.
I can already do a basic non-responsive dashboard but the part that is confusing me, is that I want to make the dashboard responsive. This would be fairly easy if gadgets were all of similar sizes, organised into rows, as per Bootstrap's grid system.
I guess the best example is this screenshot I found online.
The first gadget spans two rows and the next two only span one. I can't see how to do this using Bootstrap's grid system.
Alternatively, should it even be responsive? Is it a better user experience if the dashboard isn't responsive?
Edit: I do have clients who use tablets and/or cellphones.
Responsiveness is always a plus when you are working on a small screen. So if you have clients with small screens e.g. phones, tablets, old scool monitors, then yes, it is a good idea to be responsive.
For the grid system problem. Try to group widgets in such a way that they fit into a row. For example the table and the 2 pie-charts are perfect candidates to be in a single row. Then the pie-charts in their
<div class="col-xx-6">tad should be in separate rows and so on.You can nest as much rows as you want.
A row spans along all 12 columns of the parent. Therefore the table and the pie-charts should be in different
<div>s to allow the content to "fall down" when there is no room for it.