How to build a responsive dashboard in Looker Studio
Eventually, Google released a feature that enables all of us to build responsive dashboard in Looker Studio!
It was about time! Eventually, Google released a feature that enables all of us to build responsive dashboards in Looker Studio, making the below article irrelevant. Well, for the better in all fairness!
And… great news, we’ve been granted the privilege to beta test the preview of this new feature! So please find below a sneak peek of what’s now arrived, we hope you’ll enjoy the reading :)
Looker Studio connectors we use on a daily basis and are happy with (w/ free trials): Supermetrics - Windsor - Catchr - PMA - Funnel
Not sure which one to pick? Reviews here and there. Still unsure?! Contact us with your tech stack and budget, and we’ll guide you in the right direction:
Responsive dashboards in Looker Studio from scratch
First thing to mention here: You cannot change an existing report from standard to responsive. Bummer right? BUT, you can copy paste components from your current report onto a new responsive dashboard and start playing with your elements according to their documentation available here. In this article, we’ll really start from scratch, but just remember that you won’t have to, you could take a shortcut.
So, heading to Looker Studio homepage, we click create a Blank Report as always, and a nice pop-up appears inviting us to choose our report type:
We select Responsive, add a data source, and we’re welcomed to this new interface:
First things to mention:
Top right corner of the page, there’s now a button to preview phone, table and large screen modes. Easy to access, that’s ideal
Going to Theme and layout, you cannot change the size of your canvas anymore, nor use Grids. Only options left are Header Visibility, Navigation type, and if you want margins or not:
Last but not least, there is something inherently different to Standard reports: you cannot just create text boxes, controls or charts and drop them where you want. They have to fit within pre-created sections. It removes some design flexibity sure, but it ensures a smooth experience when switching to phones and tablets view (and in reality that’s pretty cool, as you won’t have to worry too much about this part anymore, Looker Studio takes care of the alignment for you ^^).
It’s all about sections
When you first land on your report, a header as well as a first section is already created. We added a quick channel control, and instead of adding more elements to it, we created a second section right below to ensure that our control is always top of the page. In this second section, we added 3 charts, and played with the newly created Style menu to move our elements (it’s pretty much left center right top middle bottom alignment + background and border colors…). And this is what it looks like on desktop, mobile, tablet:
These are previews from the desktop Edit mode, and alignement doesn’t seem perfect. But, we’ve tested on our phone, and it actually fits well (thanks God!):
So, what’s cool about this new way of working with sections?
You can re-order your sections in one click, moving all elements whilst keeping formatting and order (pretty convenient)
You still can add text boxes so you can name your sections
Looker Studio does the heavy lifting of formatting, you can stick to basics whilst focusing on producing meaningful dataviz
And the limitations…
Unfortunately, it comes at a price. Here’s what currently listed as limitations by Google (but we’re sure many will be worked on in the coming months):
Adding lines or arrows
Configuring the canvas size and configuring the page-level canvas size
The canvas size is automatically set to fit the components of the report
Configuring the Grid Settings
Configuring the Snap To settings
Grouping components
Making a component report-level
Multi-selecting components
Sending components forward or backward
Setting the Display mode to Fit to Width or Actual size
Setting the report-level component position
And that’s it for today. We hope they’ll release it for everyone as soon as possible and keep on building features for this incredible tool that is Looker Studio.
PROBLEM SOLVED
Tools we use and we like:
Todoist: for tasks management
Monday: for projects management, when tasks fall short
Tropical Server: our friends in charge of the hosting of this very website!
Tools we’d like to use (if we had the budget…):