Testing landscape app interfaces

While testing some landscape iPhone app interface mocks, I noticed they seemed blurrier than they appeared in Photoshop. Just to ensure I wasn’t going crazy (it was 1.30AM at the time, so my vision wasn’t as good as it could be), I decided to run some tests. The results are below.

Portrait

A portrait (320 pixels wide by 480 pixel tall) image was created in Photoshop to test if the Photos app on the iPhone was indeed showing the image at 1:1 and not scaling. The original PNG file, as saved by Photoshop is below.

The file was added to iPhoto, synced, displayed in the Photos app, then captured with home + sleep. It looks ok. Pixel perfect when compared to the original image.

Landscape

A landscape (480 pixels wide by 320 pixel tall) image similar to the first test is below.

The file was added to iPhoto, synced, displayed in the Photos app, then captured with home + sleep. The single pixel vertical black and white stripes have been turned into a moiré of grey mush, due to some slight scaling or sub-pixel positioning.

Conclusion

If you’re working on a landscape iPhone user interface you need to test, save it as a portrait image or risk seeing a preview that’s quite different to what you were hoping to see.

Tip: Tap and hold anywhere on the screen until the Copy item appears to stop the Photos app from rotating the image when you rotate the phone. This lets you view your landscape UI—that’s been saved as a portrait image—in landscape.