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.
Over the years, there have been several forces behind the surge of mobile devices. With the influx of devices in today’s market, unlike the limited options you were once faced with, now there is something for everyone no matter your style, color, or operating system preference. On top of this is the introduction of Quadcore to tablets, 4G, and the continuous adoption of HTML5. This proliferation of devices gave rise to the phenomenon of BYOD.
With the emergence of this trend, businesses realized they had decisions to make and quickly: Do they stick to their current policies and only support company issued devices? Do they adjust their current strategies and infrastructure to support new BYOD policies? In hindsight, with the growth of BYOD, lurks the inevitability of having to create apps for each screen for the large number of devices, which is not only time consuming but requires resources. In the end, companies want end users to be happy and productive while ensuring your IT departments sanity.
Modern websites and applications must work well for both end users and developers; they need to keep users happily engaged on their preferred device while maintaining the sanity of developers working behind the scenes. Responsive Design is an approach to web development that caters to both groups. The idea is to present the same content regardless of the device type, but the layout “responds” to the device “asking” for the content. In the business intelligence world, it means a master app can be designed one time, then slightly reconfigured for each device with very little effort – no copy and no separate app. Users get an optimized experience that keeps them coming back.*
Responsive Design is gaining traction with many organizations today due to the rapidly growing number of people who depend on mobile devices for access to business information. Mobile users cite benefits like increased efficiency and productivity, improved communication, and streamlined business processes, and 85% of IT managers agree that mobile devices make their company more efficient. Getting on the Responsive Design bandwagon is the way to ensure that your business apps meet your employees’ needs while maximizing the use of your IT team’s time.
Whether you decide to responsively design your website or your business applications – and in many cases, internal business applications are websites, including web-based mobile BI apps for business intelligence dashboards and reports – here are some of the benefits of a Responsive Design approach for users and developers…
Responsive Design is the backbone of next-generation mobile BI. Responsively designed BI apps enable you to deploy one application to all devices – one design that adjusts to any screen size, keeping development simple and maintenance efforts low. Here are some guidelines to keep in mind when designing responsive content for a mobile interface.
1. Use tiles or panels
Design content in a series of modular tiles or panels. The tiles can then form a grid layout, which makes it easy for users to scan the app for relevant content.
2. Think symmetry
When designing tiles, make them symmetrical in terms of height and width. In so doing, you’ll be able to rearrange content easily and even re-use it between multiple BI apps.
3. Shrink your work
Not every piece of content visible on a large screen needs to be present on a smaller tablet or smartphone screen. Pick out the most relevant content for a mobile audience and hide unnecessary features that only make sense on a desktop app.
4. Shrink images
Remember that smaller devices such as smartphones have limited bandwidth, so stick to images that can be resized proportionately and downsized to a lower resolution to save space.
In the wake of the BYOD movement, organizations are challenged to support multiple devices for accessing business information while providing the best mobile experience for end users. Seamless mobility is now an expectation for many knowledge workers who rely on smartphones and tablets to do their work. With arcplan 8, our latest release, we offer unparalleled flexibility for mobile business intelligence deployments for developers and users alike. arcplan 8 was designed with the principles of Responsive Design in mind. Developers can use our HTML5 client to build state-of-the-art BI applications that only need to be designed once, yet can be deployed on any mobile device. Let’s examine the 5 principles of Responsive Design – design principles that are simple and effective, and can be used as a guideline for developers to create responsive mobile BI applications:
1. Design with mobile in mind.
Designing with mobility in mind leads to a better user experience across all devices and platforms. When designing a BI dashboard application, think of the charts as modular tiles. These tiles will need to be rearranged depending on the device’s screen size and orientation, so it helps if they are designed with similar widths and heights. Desktop monitors and tablets in landscape orientation can accommodate all the tiles arranged in two rows, but smartphones and tablets in portrait mode will be better served by tiles stacked on top of each other so the charts are large enough to be understood without too much zooming.
2. Start with the smallest device first.