Published Experience Checklist
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.
Ensure Canvas Size is not Excessive for Intended Device
- Your canvas size should directly reflect the device you are intending users to view on
- Recommended canvas width: 1200 for desktop, 640 for mobile
- Excessively large experiences on mobile devices or older computers can result in poor performance
Check Overall Experience Size
- Open the Experience at full screen in Chrome
- Right-click to open Developer Tools (Inspect), then refresh
- Click all internal interactive elements of the Experience, including videos and show/hide layers on every page. Don’t worry about lightboxes or external links at this time
- 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 — 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
- 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 should be exported from Photoshop / Illustrator at exactly double the intended display size at 72 dpi
- Images that hang past the edge of the canvas should be cropped prior to upload
Check Layers 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 have no animations applied to them
- Ensure that Menus, Pinned Groups, and Show/Hide Layers display above other content (unless specifically requested not to)
Review Text Copy
- 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 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 Experience Title and Meta Description fields. This is important for social sharing buttons as well as SEO. See Settings Panel article for more details
- 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 — 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 rollover 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. Also 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).