Acuity Brands Logo      DGLogik is now part of Acuity Brands, Inc.   Learn More >>

Think Mobile for Your 2016 Data Applications

Data Center Dashboards

Delivering valuable insight with proper usability across all modern smart devices will become a requisite for IoE Applications in 2016. With DGLux5, it’s easy to build flexible, device-agnostic applications that adjust to screen sizes, respond to touch controls and load images and IoE data conservatively. Without ever writing a single line of code, you can give your users an uncluttered, intuitive and efficient experience, regardless of their device.


Responsive Layouts

DGLux5 makes it easy to create responsive layouts that are streamlined and pleasant to use and view, no matter the size of screen. By setting a few simple properties, you can create an application that takes advantage of the large real estate of a monitor or the compact screen of a phone. Start by creating a horizontal or vertical layout for your Stage and then create groups that stretch, shrink, scale and wrap to fill the available space necessary for your design. Note: DGLux5 simplifies the implementation of CSS to your application, so that you don’t need to learn CSS code. So, fully understanding how the sub-properties behave within Horizontal and Vertical Layouts in DGLux5 is extremely important. To get started, try this simple tutorial. Even further, explore the flexbox concepts that drive behind the scenes of DGLux5 layouts.

Touch Controls

A common design mistake when designing cross-device applications is to rely too heavily on hover or mouse-over events. Use customizable actions in DGLux5 to make sure that your application accepts user interactions from touch screens as well as desktop computers. The onClick, onMouseDown, and onMouseUp events are a great place to start, because they map to tap, touch start and touch end events. Power users can even use custom JavaScript to create their own suites of custom events.

Just Load What You Need

Memory-saving and labor-reducing features like symbols and repeaters let you design once and use many times throughout a project. By default, DGLux5 loads only the assets that are displayed in the page, so there’s no need for users to worry about long wait times or high data charges. To make your applications even more lightweight, use the Dataflow visual programming environment to trigger when your IoE data is loaded in browser memory.

More Tips and Tricks

Here are a few more ideas to get you started:

  • Instead of PNG or JPG icons, try an SVG-based icon font for ideal scalability even at the very high pixel resolutions of latest-generation smartphones.
  • Use the Dataflow to deliver content based on the user’s location.
  • Try a mobile-friendliness test like this one to vet the responsiveness of your layout.

The Web Document Dataflow block lets you determine content based on whether a device is mobile or has a touch screen.

 

Contact Us        Blog