Published Experience Checklist

You’ve worked hard to optimize the story, design, and effects in your Ceros 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 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 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
• See 14 Image Tips to Speed up Your Experience

Check that Images Are Correctly Scaled Prior to 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 prior to 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 copy has been proofread
• Check that copy in text boxes isn’t being cut off, 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 touch screen devices
• For mobile variants, consider whether there are any images or content that can be replaced by built-in Ceros 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