Reviewing the responsive design of the Sales Analysis application

In this section, we will test how our Sales Analysis will look in a small device. To do this task, you don't need a mobile device. You can use the responsive design mode tool from your web browser to simulate a small screen. For the sake of clarity, we will use Firefox as our web browser to show this feature.

Before we begin, open the Sales Analysis application on your desktop by using one of the following environments.

If you are using Qlik Sense Desktop, perform the following steps:

  1. First, ensure that Qlik Sense Desktop is running
  2. Open Firefox and type http://localhost:4848/hub in the address box to open the Qlik Sense Desktop hub through the browser
  3. Open the Sales Analysis app
  4. Open the Dashboard sheet

If you are using Qlik Sense Enterprise, perform the following steps:

  1. Open Firefox and type https://<servername>/hub in the address box to open Qlik Sense Enterprise
  2. Type your credentials
  3. Open the Sales Analysis application from your personal workspace
  4. Open the Dashboard sheet

If you are using Qlik Sense Cloud, perform the following steps:

  1. Open Firefox and type https://qlikcloud.com in the address box to open Qlik Sense Cloud.
  2. Type your credentials.
  3. Open the Sales Analysis application from your personal workspace.
  4. Open the Dashboard sheet.

Go through the following steps to enter the responsive design mode on the web browser:

  1. Open Firefox and press F12 to open the developer tool. The screen may look like the following screenshot:

  1. To enter the responsive mode, click on the icon indicated as follows in the top-right corner of the screen:  

  1.  Firefox will switch the visualization of the web page to the responsive layout, as follows:

This is exactly the layout we will see in our mobile device.

  1. Click on the Responsive button to switch the screen size between the devices that are already pre-defined, or edit the list and add more screen size options to test:

 

  1. Select iPhone 6/7/8 Plus to see how it will look on these devices:

  1. Click on the X button at the top-right corner to close the responsive mode:

To enter the responsive design mode again, use the Ctrl+ Shift + M shortcut at any time on the web browser.

Let's go to the responsive mode design and scroll down to the Mobile view. We will see the charts of the sheet in the following order:

  • Filter panel
  • KPI Sales $
  • KPI Avg Discount %
  • KPI Orders #
  • Pie Chart Sales $ Share by Category
  • Bar Chart Top 10 Customers by Sales $
  • Map Sales $ by Country

The Key Performance Indicator (KPI) visualizations come in first place, followed by the pie, bar, and map charts that give more details about the data. This is recommended because the KPI visualizations get the attention of users looking for summarized information in the first place and provide more detailed information when the user scrolls down the screen.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset