Published Experience Checklist

5 Minute read

Reading Time: 5 minute

Published Experience Checklist

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

Published Ceros Experiences work in current versions of the following browsers:

  • Desktop: Chrome, Firefox, Safari, Edge
  • Mobile: Chrome Android, Chrome iOS, Safari iOS

You can check our supported browsers article for any additional information.

Ensure Canvas Size is Appropriate for Intended Device

  • Your canvas size should directly reflect the device you are intending users to view on
  • Recommended canvas width: 1280 for desktop, 540 for mobile, 768 for tablet
  • Excessively large experiences on mobile devices or older computers can result in poor performance
  • If there is a chance your experience will be viewed on a mobile device, we strongly recommend creating a mobile-optimized layout. If a mobile layout is not created, and the desktop version of your experience is very complex/heavy, it is highly likely that it could crash the browser on some mobile devices.

Check Overall Experience Size

  • Publish the experience
  • Open the experience in a browser – we recommend Chrome, as well as using an incognito window to ensure nothing is cached already
  • Right-click within the page and then click “Inspect,” or press F12 on your keyboard to launch Chrome’s Dev tools

  • Select the Network Tab in the Developer Tools, then refresh the page. Once everything has loaded, you will see a total of how much data has 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 smoother, a good rule of thumb is to keep the entire experience under 50mb

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 100k are worth looking into, images over 500k should be optimized and reuploaded
    • To optimize images for web viewing, we recommend you drop your exported images into a program like Photoshop,  tinypng.com or compresspng.com / compressjpg.com for further compression before bringing them into the studio
  • Videos should be no larger than 1.5gb
  • 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 should be exported as double the height and width that you want it to display at in your Experience
  • Images exported from Illustrator or Sketch should be exported at 2x
  • 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 Analytics dashboard
  • Check that 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 in Ceros, so make sure 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 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 options. i.e. turn off 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 Canonical URL field with the URL of the page where the Ceros experience will be embedded. You can also add the Experience Title and Meta Description fields (although the Title and Meta Description are taken care of by the parent page, it’s still a good practice). This is important for SEO. See the SEO Checklist for Ceros Content for more details. 
  • Fill in the Social Sharing fields for both Open Graph and Twitter post. Including a title, description, and photo allows you to customize the social media shares of your Experience, see this article on Social Sharing for more information
  • Check the Custom Code section to make sure that (a) any required tracking or retargeting pixels have been inserted, and (b) no legacy codes remain from copying another Experience.

  • Make sure the  Google Analytics or Google Tag Manager integration is enabled (if relevant)
  • Make sure banner/arrows have been turned off unless otherwise specified. See Theme Settings for more details
  • If Page Canvas Height or Experience Size changes after the original publish, be sure to grab a new embed code
  • Re-publish the Experience after making any amends
  • If the experience is being embedded, ensure the page heights are all the same and that there are no pinned objects , otherwise a scrolling embed will have to be used
  • If the Experience is not being embedded and your account does not have the white-labeling feature, check that objects, text, images, and media in the bottom right corner aren’t cut off by the Powered By Ceros icon

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 version have been changed to On Click
  • For mobile variants, consider whether there any images or content that can be replaced by built-in Ceros shapes, icons or animations, and look for any groups of images that could be combined into one
  • If animations lag on mobile devices, try switching off the replay on scroll option

Was this helpful?

You already voted!
19 out of 23 people found this helpful