My Alexa Display Template Skill Design & Coding Deep Dive series continues with a free, downloadable resource I hope will save you time and aggravation when working with text and images in Alexa Display Template skills: an Alexa Skill Image Cheatsheet.
Image and Font Specs Matter
With respect to the deep dive series, we’ve nailed down our skill concept, sourced our images, and mapped all possible user paths through the GUI with a flowchart (and maybe some pseudocode). Before you dive into writing the actual code, you’ll want to format your images and edit your intended text items to ensure they meet Amazon’s Display Template specifications. That way, when it’s time to start testing your code you’ll be able to see your text and images exactly as the user of the finished skill will see them, and you’ll avoid getting bogged down in error messages or weird display situations that are caused by failing to meet Amazon’s image or text specs.
Each different Display Template is intended to display its text and images in a slightly different way, so each has different image and text specs. Amazon has scattered the image and font specs throughout their Display Interface and Template Reference documentation, but there are some errors in the documentation there and you’ll have to do a lot of repetitive scrolling to get to the spec you need in the moment.
I solved the problem by creating my own cheatsheet: a color-coded table with all the image and font specs laid out in a single page, to print and post near my workstation for easy reference. The sheet is accurate as of today, 1/23/18, and has its publication date is included at the top.
The deep dive continues next week.
Other Posts In This Series
Things That Kill Alexa Skills
A checklist of reasons why you might want to rethink your skill, or its design.