Search

Searching DEVELOPERS

Export Page

Responsive Embed Code

Amplience Responsive Interactive Merchandising Modules

Amplience Interactive Merchandising Modules are capable of responding to the page that they are hosted in to provide a responsive / adaptive rich content solution.

Amplience have made changes to the our core libraries to provide:

  • The ability to scale Content based on page size or containing div
  • The ability to mask an area of content to create a bleed area

This initial release is provided to solicit initial client feedback. We recommend clients fully test their content modules before releasing to the live environment. We welcome any feedback about your experiences using the responsive enhancements. 

Scaling

Why scale your content? As the range of device types and screen sizes grow creating content that fits each device becomes an unmanageable and expensive creative and authoring process. To counter the proliferation of devices developers and designers are using CSS media queries on supported browsers and responsive grid frameworks.

To support this the Amplience have implemented a scaling flag which can be used in two ways, scaling based on page width or scaling based on the containing div.

The following example shows a module scaling down by 50%. 

Masking

Masking allows the author(1) to define a region on the content module and allow the area around the mask to bleed - a typical example of this would be to fix a portion of the module in the middle and allow the edges to bleed out on larger screens. Module with Mask area indicated by pink dashed border.

On a 480px wide device only the middle content would be displayed: 

On a 740px wide device the full content would be displayed: 

Scaling and Masking

When combining scaling and masking flags the area outside the mask will bleed on devices with resolutions larger then the masked area and when displayed on devices with resolutions smaller then the masked area the masked area will scale down.

Breakpoints

Breakpoints allow different versions of Amplience content to be switched out based on environmental parameters such as screen resolution, device type or device orientation. For example you could target four different device types - mobile, fablets, tablets and desktops with two, three or four distinct content modules, using scaling to counter the range of screen

resolutions within each device type.

Breakpoints are controlled by JavaScript in the page and not an Amplience feature, however we have provided examples below on how to implement Amplience content. 


Implementing Scaling

The Scaling flag enables the Amplience content module to respond to either the page size or its containing div.

In the Amplience embed code we would set the following variable to enable scaling:

This additional variable currently has to be set manually when the embed code is added to the target page it is not currently added when you generate the Embed Code from the Publish Area settings menu.

The full JavaScript embed code with scaling enable is as follows:

 

 

To Scale the Amplience Content Module based on the page size a simple html page would be as follows:

 

To Scale the Amplience Content Module based on the div size the html would be as follows:


Implementing Masking


The Mask area is set in the embed code.

These additional variables currently have to be set manually when the embed code is added to the target page there are not currently added when you generate the Embed Code from the Publish Area settings menu.

The full JavaScript embed code with scaling enable is as follows:

 

 

The HTML code to use masking is the same as scaling detailed above. 


Combining Scaling and Masking

Both scaling and masking variables can be combined in the embed code:

 

 

Step by Step process:

To enable the scaling and masking

  1. Generate Embed code
  2. Copy header code and add to <head> section of your page

     

  3. Copy body code and add to <body> section of your page

  4. Update the generated embed code with Scaling and Masking variables;

  5. Publish Page
  6. Test
    Test your changes in a range of browsers and devices.

Content Authoring Considerations

The following items should be considered when creating Interactive Modules that will be used in a responsive page using the scaling and masking variables;

  • When using pagination buttons and the masking flag ensure that they are within the mask area.
  • The core Amplience libraries interact and swfobject files are cached for a year, if you are testing the scaling and masking variables we suggest that you add ?v=responsive to the end of the url to ensure an uncached version is loaded
  • When using the scaling variable please ensure your media is optimised for the devices you intend the content to be displayed on as loading a 2048 x 1600 px image on a small device could cause performance issues.
  • If using breakpoints please ensure that you re-embed the content module when switching between breakpoints.
  • Thoroughly test any content using the scaling and masking flags on your live environment on hidden pages

Platform support & Limitations

The current responsive code only works on HTML5 version of the published Amplience content. Amplience are currently working on a responsive version for non-HTML5 browsers (please refer to sections below).

Current Browser Support;

  • IE9 upwards
  • Safari 5.1 upwards
  • Chrome 29 upwards
  • Firefox 24 upwards
  • Mobile Safari 3.2 upwards Mobile Chrome 2.1 upwards Mobile Firefox (TBC)

Current / known limitations;

  • The Scaling and Masking variables require manual updates to the embed code, they are not automatically generated.
  • Using <!DOCTYPE html> declaration at the beginning of the page will require explicit setting of height and width attributes in the parent div containing the Amplience code - this can be done as an inline style or in CSS. Where the page is responsive these values will need to be updated programatically using JavaScript.
  • The Amplience module is positioned centrally in the containing div. In some circumstances it is possible to see white-space above and below or by either side for example where the browser height less than page size.
  • Flash scaling and masking is not supported in this version, alternative content will need to used on non-HTML5 browsers or use of fixed sized layout.
  • It is currently not possible to have multiple modules on a page that only use the masking flag, scaling must be used on all modules.
  • There is no UI to draw or set the Mask area you can only set the values in the embed code (1).
  • Masking is aligned vertically and horizontally and can not be positioned.
  • Magento and Demandware plugin’s have not yet been updated

Custom Integrations

The Professional Services team can provide assistance and support where custom code is required. Please contact your Account Manager for assistance.


  • No labels