Qlik Community

Qlik Design Blog

All about product and Qlik solutions: scripting, data modeling, visual design, extensions, best practices, etc.

Employee
Employee

The intelligent responsive design

Sometimes it’s the small details that make a very big difference. Intelligent responsive design is completely integrated in Qlik Sense; it seems so brilliant to me that I don’t want it to go unnoticed for you.

Responsive web design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).

A site designed with RWD adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images (…)

Wikipedia

Qlik Sense has taken it one step further than the RWD described above, by adding responsive intelligence into the objects themselves.

Intelligent responsive design is not just adjusting the layout to make objects and charts to fit nicely into your device’s screen, but it’s a product smart enough to know when to switch between summary and detailed information based on the available real estate. Qlik Sense is automatically adjusting and tweaking each individual object and chart to give us the right visualization anywhere, optimizing the entire user experience for the device being used.

Let’s review some of my favorite examples of intelligent responsive design in Qlik Sense:

sample1.png

This scatter chart is displaying Product group Sales Amount vs Margin. As soon as I fine-tuned some basic chart properties, Qlik Sense will do the rest, maximizing the information displayed based on the available real estate. It’s a fluid chart.

As you will notice in the scatter chart above not all the labels are visible, Qlik Sense is adjusting the amount of information to increase user comprehension.

sample2.png

The same chart displayed in a smaller device introduces some changes; first, we notice that even fewer labels are being displayed so we can easily see the patterns and correlation. Second, the x-axis’ scale is a bit wider to avoid adding noise into the chart.

sample3.png

Within the chart shown above, the same visualization is in yet another size while the form factor is adapted to the available real estate. Elements such as dot size, dot labels and axis are scaled again. In this smaller version of the chart, the axis labels and the home icon have been removed automatically and font size has been adjusted.

Line thickness is adjusted in line charts and a scrolling mini-charts appears when needed.

sample4.pngsample5.png

Pie chart labels and values only appear if enough space.

sample6.pngsample7.png

Qlik Sense has adapted these charts, rescaling the level of detail and functionality to maximize the user experience; this is not just resizing, but intelligent responsive design.

Enjoy Qliking!

AMZ

---

PS: I’ve had to force Qlik Sense to let me do a pie chart like that; by default Qlik Sense is preventing me to commit the crime. I do not recommend a rainbow pie chart to represent that data, a bar chart or a treemap would've been more effective… but if you still want to do it, do it in style.

6 Comments
datanibbler
Esteemed Contributor

Wow! That sounds great.

Just the thing that many of us miss when viewing any webSite - no matter which - on a Smartphone when it's not adapted.

We have a lot of QlikView_apps here which I develop on a laptop, but which are viewed by the users on big monitors - so that all the object appear crammed together in the center ...

Unfortunately, we don't have QlikSense and it's very unlikely that we will have it ...

0 Likes
42 Views
dvqlikview
Honored Contributor II

This is great feature and it will soon become must for any web based BI solutions. I still remember the nightmare of setting up and configuring Dundas Charts using ASP.Net.

0 Likes
42 Views
bunnyv123
Contributor

Hi munoz having a query regarding ..pivot table can u help me with me...

0 Likes
42 Views
Gabriel
Valued Contributor II

Hi

It's interesting to know this feature is available in Qlik Sense. My resent visit to Qlik Lab (thanks to QlikView Developer's Group - Qlik Developer's Group) I discovered that there are functionalities in QlikSense that are not well known. Hopefully blogs like this will expose those functions.

Gabriel.

0 Likes
42 Views
Not applicable

Interesting ! But since rendering always yields an image at client browser ... just curious to know what specific automation tests for RWD testing deployed are on ? Using CasperJS it was possible to do basic RWD automated testing but in such scenario, is there anything similar Qlik is leveraging upon in ensuring automation in such details ? Just curious !

0 Likes
42 Views
hirishv7
Honored Contributor

Thank You Very much amz,

-Hirish

0 Likes
42 Views