Published Experience Checklist

knlowledgeart

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

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

Note: Due to limitations on the IE11 browser, videos will play using Flash. Flash can be resource intensive and is also blocked by many IT departments at an admin level. Please check with your IT team to determine if this will be an issue. We recommend using Chrome or Firefox when available.

Developer Tools

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, 800 for mobile
  • 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 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 tinypng.com or compresspng.com / compressjpg.com for further compression before bringing them into the studio
  • Videos over 5-6MB may result in poor performance
  • Multiple videos on one page may also cause performance issues
  • Avoid multiple auto-play 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 13 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 Layer Config

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

Review Settings / Embedding

  • Make sure to populate the Experience Title and Meta Description fields. This is important for SEO. See Settings Panel article 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. 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 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, 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

  • Make sure the Experience works on mobile devices if you aren’t building a mobile variant
  • Ideally, you should test mobile Experiences on iOS and Android smartphones and tablets
  • Ensure that hover actions have a mobile tap fallback
  • 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
  • Generate a redirect code for non-embedded mobile variants
  • Check that your mobile redirect code is entered correctly in the Custom HTML field (see Settings above)