How to Create Responsive Design Applications

Traditional Applications

Traditionally, one of the first steps to designing a dashboarding or reporting solution is to determine what screen size to use as a basis for layout. Typically, the solution’s layout will be designed to look good on a “standard” laptop. The smaller screen resolution looks a bit small on large monitors, but at least the whole application fits on the page. But that can’t be the ultimate goal, right? The advance of responsive design allows for mobile devices to view the same content, but allows for the application to be scaled up to larger monitors as well. When creating responsive applications, it is important to keep in mind what device is being used to access the solution. This should determine how much and what kind of data to provide the end user.

Large Screen vs. Mobile Phone View

Income Statement Desktop            Income Statement Mobile

 

Creating the layout for a large screen is easy, you have plenty of space to format the data and add in charts, extra measures, visualizations, descriptions, tooltips, etc. These large screen layouts are built to fit monitors with screen resolutions starting at 1440px wide and going up to 1920px wide. In contrast, some mobile phones have just 320px in width available. This means you could be trying to squeeze in content from a large screen layout into a mobile layout that is 1/6th the size. There’s no way to fit all of the content in this smaller view, so only the critical information should be shown.

In the example above, the large screen view has charts for each P&L account. However, the purpose of this report is to show the dollar amounts for each account, and the charts are visualizations that provide extra insight. That’s why the mobile version just shows the values for current year and prior year. A nice addition would be to allow for a toggle switch, so the user can pick between the prior year values and the year over year variances. Also the detail visualization can be kept, putting them into a screen that you can easily reach either with a “swipe down” or “swipe right” gesture – it’s up to you or your app designers.

Mobile Phone Layouts

When designing for mobile phones, it’s important to remember how users are accessing the reports. They are most likely using their mobile data plan, which means 4G (LTE, HSPA+) or 3G (GSM, CDMA). While service providers boast about their high speed connections, they still come nowhere near the speeds of standard Wi-Fi or Ethernet connections. It’s critical to the user’s experience that mobile views require as little data transfer as possible. People typically associate this with the number of data points in a table, but it also includes images, icons, and other multimedia. To put this in perspective, the image of the large finance dashboard below takes longer to transfer than 10,000 cells of data in an excel file (5 columns x 2000 rows). On a high speed connection users will never notice this difference, but when the connection is slow images are usually the last parts of a web page to render. If possible, avoid using background images or large logos as they will take longer to render. Some dashboard solutions render charts as images, so it’s a good practice to use small charts or to just avoid them when possible.

Just because data tables load quicker, it’s not a good idea to show large sets of data (50+ rows). It’s difficult to sort through all those rows on a mobile device, and it becomes hard to read. It’s better to use drilldowns so users can see the high level data, but get more details if they want. If the data is not hierarchical, then another approach would be to use paging. This limits the display table to only x number of rows and allows the user to move to the next set of data if they want to.

Designing for all devices

Finance Dashboard Desktop                                 Finance Dashboard Mobile

 

When designing dashboards, a good approach is to use a scorecard layout. This allows you to create several “tiles” of data, which can be rearranged or resized based on the available screen resolution. In the example above the tiles are laid out in a 2×2 grid, which fits nicely on a landscape view. When switching to a mobile view, the tiles can be stacked on top of each other to display similar data.

SUBSCRIBE

Your Name (required)

Your Email (required)