Display Editor Responsive Design Tab

Responsive Design

Responsive Design is all about having your pages stretch and condense gracefully to match the resolution and size of the screen on which they are displayed. When you use responsive design your site is structured with various screen characteristics in mind. Because dataZoa displays are embedded within your site, they also need to consider some of those same characteristics.

dataZoa's traditional (fixed) embed strings include attributes that give static dimensions to your displays, as set during the building process. Such displays will not resize with the available space and thus are not responsive.

To accommodate responsively designed sites dataZoa provides two alternate types of embed strings.

Embed Strings that are inherently Responsive

"Inherently Responsive" embed strings allow you to select and pre-set some options which can automatically alter your display based on available space. This allows you to make content based decisions on when to reduce the amount of information displayed in order to avoid scrollbars.

The options you can preset include:

• Selecting the number of visible data columns (not applicable for charts).
• Suppressing parts of the display's framing.
• Preserving the aspect ratio by changing height based on available width.

Some advanced details about Preserve Aspect Ratio:

• When using this option, your display's width will come set to 100%, and will consume all the horizontal space of its parent element (the portion of your page into which it’s placed).
• When checked, the height will be set and modified automatically relative to the current width.
• When unchecked, the height will not be specifically set. You can apply styling as you wish. Otherwise your display’s height will be defaulted by the browser; typically 150px for such external resources.
• If you save new dimensions for an existing display in dataZoa or you toggle the Preserve Aspect Ratio option then you’ll need to (copy and re-paste) any of the selectable (custom) or fixed (traditional) embed strings which have been used.

Embed Strings that are explicitly Responsive

The second option is a fully manual embed string. This is essentially a blank template which comes with no preset dimension stylings. You can add whatever such styling you wish. Additionally, you can enhance the display further with optional arguments applied to the embed string's src attribute.

These arguments will enable you to manually and dynamically alter the display with the same pre-set options detailed above in addition to other, more advanced options (such as templating tables). See a full listing of the arguments which can be used/set in this way here.

Additional notes

• When you use the optional arguments within a “Selectable Settings” embed string, the options you provide will override the preset options saved within dataZoa.
• For your displays to be truly responsive it’s important to use a relative font site (e.g. either em or %).