How to add a custom floor plan to my event in the Remo Conference
Please follow the guidelines and restrictions listed below while designing your custom floor plan.
You can use any design tool like Adobe Illustrator/Sketch, but the final floor plan map image must be shared in SVG format.
Map sizeThe full map must fit within the max resolution size in each of the Sketch/illustrator files (shown in light green below)The core conference area must be 16:10 aspect ratio (highlighted in red)
Size of the avatar seat is 55px W x 55px H (including the 4px status ring size), Avatar will be rendered as a circular image.
While exporting your design as SVG file, make sure “Responsive” option is unchecked
If you have your custom fonts inside the floor plan, please embed the fonts as below in final SVG file
Sample Design with layer names View full image
Create a layer named “conference area” for us to identify the main conference area in the floor plan.
This layer will be zoomed in to fit the users’ viewport/browser.
All the below layers (tables, seats, stage, sponsors) should be added within this layer
In your design file, the table section should be created with the layer name starting with “table-“ as in the above image. All elements inside this layer will be considered as part of the table. Dimensions like width, height, top, left will be calculated based on this tag.
Rest of the table layer name will be used to create a unique code for identifying the table. Ex: if you set layer name for a table as “table-first table“, “first table” text will be used as code for identifying the table. Please make sure all the table layer names are unique and in English.
Our algorithm will spread the attendees to tables evenly based on the order of the table layers. For example, first and second attendees will be placed in the first table and 3rd and 4th attendees will be placed in the second table. So, create layers in the order you want to spread your attendees
For positioning table name inside the table, create an empty text element inside Table. This text element should have a layer name starting with “name “
Seats should be added inside the respective table layer created above
Each seat should have a layer name as “seat” to identify the seats inside the table
We take only the top and left position and the seat will be rendered as a circle.
The order of seats in the event floor plan will be the same as the order of seat layers inside the table.
Max no of seats inside the table is 6
Max no of users allowed on a floor is 100. Create a floor plan that can accommodate 120 seats, so there will empty seats for users to switch tables during the event.
You can have tables with less than 6 seats per table, but the total number of seats per floor have to be 120.
This will be identified by the layer name “table-left-board“
This will be identified by the layer name “table-right-board“
This will be identified by the layer name “table-stage“
Create empty layers with layer name starting with “sponsor” as below in the correct position as required
Order of sponsors will be determined by the order of the sponsors’ layers
Height and width of all sponsor layers should be the same
Sponsor layers
Make sure the SVG output follow this guideline
https://css-tricks.com/high-performance-svgs/
Smaller sizes contribute to a faster loading time in our app. Optimal size: < 500kb
Use image compression tools after all validations are done: Ex: https://vecta.io/nano
If there are many elements and small items, it will lead to longer load time and sub-par experience when zooming and dragging the map
SVG export decimal (ignore If Sketch doesn’t have this option)Please set to 2After output as 2 decimal, the SVG and design may be distorted, the designer will need to correct the output file before handing to developers
Sample 6 ads AI design file: https://drive.google.com/open?id=17_52inz9_JoN7TfwjSTKlrO1dKjqWzCJ
Sample 6 ads SVG file: https://drive.google.com/open?id=1aMB8QRSeDnmklml_JBNu1nIMGc5-s1-w
Sample no ads default AI design file: https://drive.google.com/open?id=1rWc3VK3LfxNJev3jGXjkN8rO4uWchxNJ
Sample no ads default SVG design file: https://drive.google.com/open?id=1y4fhGy5vq1geeIbWfDd7FptRd05VamXz
Click Need Help button in Remo conference page and upload the SVG file.
Design Specifications
You can use any design tool like Adobe Illustrator/Sketch, but the final floor plan map image must be shared in SVG format.
Map sizeThe full map must fit within the max resolution size in each of the Sketch/illustrator files (shown in light green below)The core conference area must be 16:10 aspect ratio (highlighted in red)
Size of the avatar seat is 55px W x 55px H (including the 4px status ring size), Avatar will be rendered as a circular image.
SVG file requirement
While exporting your design as SVG file, make sure “Responsive” option is unchecked
If you have your custom fonts inside the floor plan, please embed the fonts as below in final SVG file
Sample Design with layer names View full image
Conference Area
Create a layer named “conference area” for us to identify the main conference area in the floor plan.
This layer will be zoomed in to fit the users’ viewport/browser.
All the below layers (tables, seats, stage, sponsors) should be added within this layer
Table:
In your design file, the table section should be created with the layer name starting with “table-“ as in the above image. All elements inside this layer will be considered as part of the table. Dimensions like width, height, top, left will be calculated based on this tag.
Rest of the table layer name will be used to create a unique code for identifying the table. Ex: if you set layer name for a table as “table-first table“, “first table” text will be used as code for identifying the table. Please make sure all the table layer names are unique and in English.
Our algorithm will spread the attendees to tables evenly based on the order of the table layers. For example, first and second attendees will be placed in the first table and 3rd and 4th attendees will be placed in the second table. So, create layers in the order you want to spread your attendees
For positioning table name inside the table, create an empty text element inside Table. This text element should have a layer name starting with “name “
Seats
Seats should be added inside the respective table layer created above
Each seat should have a layer name as “seat” to identify the seats inside the table
We take only the top and left position and the seat will be rendered as a circle.
The order of seats in the event floor plan will be the same as the order of seat layers inside the table.
Restrictions on Seats
Max no of seats inside the table is 6
Max no of users allowed on a floor is 100. Create a floor plan that can accommodate 120 seats, so there will empty seats for users to switch tables during the event.
You can have tables with less than 6 seats per table, but the total number of seats per floor have to be 120.
Left Billboard (Youtube video area)
This will be identified by the layer name “table-left-board“
Right Billboard (Agenda area)
This will be identified by the layer name “table-right-board“
Stage (only hosts/speakers can enter)
This will be identified by the layer name “table-stage“
Sponsors
Create empty layers with layer name starting with “sponsor” as below in the correct position as required
Order of sponsors will be determined by the order of the sponsors’ layers
Height and width of all sponsor layers should be the same
Sponsor layers
Final optimizations
Make sure the SVG output follow this guideline
https://css-tricks.com/high-performance-svgs/
Smaller sizes contribute to a faster loading time in our app. Optimal size: < 500kb
Use image compression tools after all validations are done: Ex: https://vecta.io/nano
If there are many elements and small items, it will lead to longer load time and sub-par experience when zooming and dragging the map
SVG export decimal (ignore If Sketch doesn’t have this option)Please set to 2After output as 2 decimal, the SVG and design may be distorted, the designer will need to correct the output file before handing to developers
References
Sample 6 ads AI design file: https://drive.google.com/open?id=17_52inz9_JoN7TfwjSTKlrO1dKjqWzCJ
Sample 6 ads SVG file: https://drive.google.com/open?id=1aMB8QRSeDnmklml_JBNu1nIMGc5-s1-w
Sample no ads default AI design file: https://drive.google.com/open?id=1rWc3VK3LfxNJev3jGXjkN8rO4uWchxNJ
Sample no ads default SVG design file: https://drive.google.com/open?id=1y4fhGy5vq1geeIbWfDd7FptRd05VamXz
Where to upload?
Click Need Help button in Remo conference page and upload the SVG file.
Updated on: 12/06/2020
Thank you!