In marketing an app, one of the areas that needs attention is your website. The AppStore description and screenshots are sometimes not enough for every customer to make a decision. Sending them to your website gives you another chance at convincing them to purchase your product. In addition, many people do discover apps via search engines, so a website is essential for traffic that can link to your apps on the AppStore.
On your website you have more options with text formats and sizes, layout, and, of course graphics, including screenshots and device shots. Apple makes available device artwork and AppStore badges that you can use on your website, but you have to insert your own screenshots and resize the artwork to meet your needs. (The link requires a developer login). This post will cover some tips on processing your screenshots for device graphics on your website.
After entering the license agreement and downloading the artwork, choose a device and open it in Photoshop or GIMP. I use GIMP because our computers use desktop Linux, but many of the steps could able be applied in Photoshop. I chose an iPhone4 device. Take screenshots of your app using an iPhone4 and email them to yourself, using the highest image quality.
Screenshots from a retina display will have to be resized, and unfortunately, much of the definition will be lost, since websites/browsers are not as high res as retina. Ideally, a screenshot should be reduced by halves to get the best result, but that is not always ideal size for the website's design. The device artwork's screensize starts at 344x514 px at 72dpi, whereas retina screenshots start at 640x960 at 300dpi (both including status bar). If you open both creatives, and drag the screenshot onto the device image, the screenshot will convert to 72dpi have less crispness when reducing. Therefore, it's better to reduce your screenshot separately before moving it as a layer on the device file. It's also better to resize the images before placing them on your website. Browsers can resize, but the results are rather muddy.
I wanted my device shots be be rather small, so I resized my device image to have a 172 px wide screen, which is 50% of the original image. I also keep the image the same and have a “click for larger image” option on my website. This way my webpage isn't cluttered with huge images, but potential customers who wish, can see a bigger, clearer image.
After trying several iterations to find the clearest result, including resizing the device screen size to 320, trying several conversion algorithms, and varying degrees of sharpening filters, the best result I found is as follows:
For smaller image:
For a larger image:
To use the two images on your website, use this html code:
title="Click for larger image" alt="add alternate text here"
src="SmallerImageName.png" style="border: 0px solid ; width: 288px; height: 511px;">
On mouseover "title" text is what the visitor will see. On a side note, it's always important to give your image an alt text—that is what the search engines will index.
This time around, for A Journal for Trip Boss travel manager, I used the horizontal device, since we support landscape mode and I wanted to include a screenshot on our website. However, the device reflection includes part of the screen, so you need to add a screen reflection yourself. Here's how I did it:
To see a few of the devices I've processed, including the horizontal one, please visit the webpage of our latest app, “A Journal for Trip Boss travel manager.” I also have these device shots showcased on our Expense & Budget, Itinerary, and Overview pages.