Hotspot Grid
Coming with GRAVITY Version 1.5, we start to support a so called hotspot grid. There are pages with dynamic content, or pages where GRAVITY is just not allowed to access (in other terms, we can not access the DOM tree). For these cases now comes the grid, placing an overlay over the website, allowing content owners to place content relative to the grid. The grid is most commonly defined as table (but can vary) and is defined in the relative GRAVITY backend.
Note: A site can either support the hotspot grid or the normal mode, but not both. The grid is also not going to scroll with the page, it is always 100% the size of the window and stays in front of any content you see (it is a tradeoff).
On!
| Grid On! | Grid off. |
|---|---|
 |
|
The left image shows Word Online (® Microsoft) with the new Hotspot Grid turned on. As soon as the grid is turned on and edit mode is enabled, all native page content becomes inaccessible and the Grid containers are the only selectable elements.
Detail
Instead of using native page elements (so called DOM elements) we use artificial elements to bind content to. We create the artificial containers in the backend, overlaying them in the actual site as soon as gravity is enabled. The user (except content owners) will never actually "see" the grid, they may see that hotspots are not 100% accurately bound to a specific element, but the "grid" itself as grid will never be visible.
Mode comparison
| Grid mode | DOM mode (traditional) | |
|---|---|---|
| Strengths | Grid was developed for any case where DOM is inaccessible (known cases are e.g. Office Online Applications or any other iFrame case) Use it when the only element you could bind to is your whole screen or when the DOM tree regularly changes above our finding skills. | Especially useful if DOM content does rarely or never change and all DOM content is accessible |
| Weakness' | It is not fully zoom and resolution aware, which means that content can appear slightly off place Note we are actively working on making this obvious to the user. | Layouting becomes exceptionally difficult when DOM content changes on regular basis. DOM mode is error-prone in this case (note that making the algorithm more tolerant will result in false-positives). |
Working with it
As a content owner you can enable the grid per site. Once enabled, choose a suitable HTML template for your site. Start to create content!
Note
Grid mode does not support responsive designs where content changes its position according to zoom or wrapping-effects!
Unless you manage to configure a template which behaves similar to the native site.
Changing the template!
Either use id's or delete hotspots before changing the template.
Stopping work with it
There is no button to turn the grid mode off, delete the template code to turn it off!
Q&A for the Grid
Does it support browser zoom?
Grid mode fully supports browser zoom.
What about different screen resolutions?
Grid mode fully supports different resolutions.
Examples