Skip to main content
Announcements
Qlik Connect 2024! Seize endless possibilities! LEARN MORE
ArturoMuñoz
Employee
Employee

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.

7 Comments
datanibbler
Champion
Champion

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
2,347 Views
IAMDV
Luminary Alumni
Luminary Alumni

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
2,347 Views
Anonymous
Not applicable

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

0 Likes
2,347 Views
Gabriel
Partner - Specialist III
Partner - Specialist III

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
2,347 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
2,347 Views
HirisH_V7
Master
Master

Thank You Very much amz,

-Hirish

0 Likes
2,347 Views
simeon
Contributor II
Contributor II

I also searched the Internet for a long time for information about the design. But I was able to find only on  this  . I am very pleased that I was able to find this site on the Internet. He gave me a lot of valuable and useful information. You can find more information on this website. I advise you to go and study everything carefully. This site will definitely help you to study design.

392 Views