Panic Blog

Proposed design for the Official Flag of “Responsive Video” by Yours Truly

Just when you think you have a handle on every conceivable size variation of every iOS App Store screenshot for your app, you remember: there’s also the App Store Preview video! Dang.

The App Store’s autoplaying App Preview video feature is really great, allowing you to show your app in action to potential users, but including video with all of your other App Store marketing materials adds yet another layer of complexity to shipping your app.  The Preview video sizes are all different from their static-image counterparts, and of course, there are twelve different Preview video possibilities, thanks to various screen sizes and options for portrait and landscape orientations. Hoo boy.

I’ve attempted to make the App Store Preview video export process a little easier to wrangle for myself (and, hopefully, for you!)

I use Adobe After Effects to combine screen recordings, text, and other elements for my videos, so I’ve made a master After Effects project that includes every size and orientation you could want for your Preview video.

Since Preview videos can be uploaded on a per-device basis, you can mix and match landscape and portrait orientations for them. We did this with our Prompt Preview, using a portrait orientation to match our screenshots for iPhones, and a landscape orientation to match our screenshots for iPads. Six different videos! Phew.

The AE Project 

Here’s a look at what’s inside:

And here’s an example use case: a video I just started working on for Coda iOS. I’m working from a 1920×1920 composition titled “MAIN”, which I’ve dropped into various device-specific pre-comps. This way, I can see the effect of positioning elements in “MAIN” at any video size. It’s like responsive design, for video. Kinda.

I recommend deciding which orientation you’ll use at each device size first, then working at the largest-possible size (like I do in “MAIN” in the example above), and scaling down for smaller devices as needed. The “Combined” comp has every size and orientation overlaid (labeled and color-coded by screen size), but you can drop your video into any of these nested pre-comps as needed, to see how it’ll look, and make any adjustments. Each of these is thirty seconds long, and has a frame rate of 30 frames per second (both app store maximums; note that your video must also be at least fifteen seconds long in order to be accepted). 

Even if you don’t use After Effects on a regular basis, I hope you’ll find this project file helpful in wrangling your App Previews. Happy rendering!

P.S. If this project file is overkill and you’re just looking for a list of App Preview video dimensions, here you go: