You've worked hard to optimize the story, design, and effects in your experience. But before you hit Publish, here’s a checklist to run through to ensure your content performs optimally.
Check for Browser Compatibility
Desktop: Chrome, Firefox, Safari
Mobile: Chrome Android, Chrome iOS, Safari iOS
Ensure Canvas Size is Appropriate for the Intended Device
Your canvas size should directly reflect the device you intend users to view on
Recommended canvas width: 1280px for desktop, 540px for mobile, 768px for tablet
Excessively large experiences on mobile devices or older computers can result in poor performance
Check Overall Experience Size
Open the experience in a full-screen Chrome window
Right-click on the page somewhere outside of the experience, select Inspect from the drop-down list (this will open Developer Tools), then refresh your page
Click all internal interactive elements of the experience, including videos and all interactions (do not worry about lightboxes or external links)
Select the Network tab in the Developer Tools Inspector. Once everything has loaded, you will see a total of how much data has been transferred at the bottom left
Ideally, you should try and keep the overall file size as small as possible so your experience will load quicker and more smoothly. A good rule of thumb is to keep the entire experience under 50MBs
Check for Excessively Large Media
Click the Size column of the Network tab to sort all downloaded items by file size
Click any item in the list to see details about that item
Images over 100KBs are worth looking into, and images exceeding 500KBs should be optimized and reuploaded for the best UX. We recommend you drop your exported images into a third-party program such as tinypng.com or compresspng.com / compressjpg.com for further compression before bringing them into the studio
Videos should be no larger than 1.5GBs. We recommend exporting videos at the bitrate and size you intend for them to be on the canvas to reduce the overall page load
Multiple videos on one page may also cause performance issues
Avoid multiple autoplay videos on a single page
Ensure that Correct Image Formats Are Used
JPG for rectangular images, and images with no transparency
PNG 24 for semi-transparent graphics
PNG 8 or GIF for text, logos, or other flat graphics with no transparency
GIF when utilizing a short animation on repeat
Check that Images Are Correctly Scaled Before Upload
Images exported from Photoshop, Illustrator, or Sketch should be exported at 2x their intended canvas size
All images should be exported at 72 dpi
Any images that hang past the edge of the canvas should be cropped before upload
Check Folders Configuration
Make sure all hotspots have unique names; otherwise, you won’t be able to understand click actions reported in the Ceros Analytics dashboard
Check that your hotspots are not hidden behind other objects and do not have animations applied to them
Ensure that menus, pinned groups, and show/hide objects display above other content (unless specifically requested not to)
Review Text Copy
There is no spell-check functionality within the Ceros Studio, so ensure that the copy has been proofread
Check that the copy in text boxes isn’t being cut off, and add padding when necessary
Test Interactions / Animations
Make sure that:
All link-outs (Go to URL interactions, hyperlinks in text, etc.) direct the user to the correct web addresses
All interactions perform correctly
Animations perform smoothly without lag or jerkiness
All lightboxes/commerce panels open the correct content
Lightbox content displays correctly within the panel at various sizes
Any hotspots are easy to find (such as close buttons)
Check Videos
Check videos for correctly applied video settings (i.e. hide player controls, autoplay, etc.)
For mobile experiences, be sure videos visually indicate they can be tapped to play
See Optimizing Your Videos for Ceros for more information
Review Settings / Embedding
Make sure to populate the Experience Title and Meta Description fields. This is important for SEO. See the Settings Panel article for more details
Fill in the Social fields for both Open Graph and Twitter. Be sure to include a title, description, and image to customize the social media shares of your experience. Please review this article on Social Sharing for more information
Check the Custom HTML section to make sure that any required tracking or retargeting pixels have been inserted, and that no legacy/prior codes remain from copying another experience. If you have a mobile variant, you’ll want to make sure that code is present here as well (standalone only)
Make sure your Google Analytics code is populated (if relevant)
Make sure the default page navigation arrows have been turned off unless it's necessary to leave them enabled. See Theme Settings for more details
If the page canvas height or experience size changes after the original publish, be sure to update the experience and grab the updated embed code
Re-publish the experience after making any changes
If the experience is being embedded, ensure the page heights are all the same and that there are no pinned objects, otherwise only the scrolling embed code will be available for use
Test Content on Mobile
Use the Global Layouts Panel to create and optimize a mobile version of your experience
Your preview will show you how your variants look on each device, but ideally, you should also test mobile and tablet experiences on iOS and Android smartphones and tablets
Ensure that On Hover interactions on your mobile and tablet layouts have been changed to On Click, as hover interactions do not work with touchscreen devices
For mobile variants, consider whether there are any images or content that can be replaced by built-in Studio shapes, icons, or animations, and look for any groups of images that can be combined
If animations lag on mobile devices, try disabling the "replay on scroll" option