For a lot of the projects we are working on here at Hellotank we are having to design for mobile devices as well as desktop and laptop screens. We’re heading towards everything we design and build for web being responsive – in other words, creating web content that will work on any screen size. With new devices appearing almost daily and with them new screen sizes, the old days of designing purely for 1024 x 768 monitors are gone, so we have to rethink the way we design and come up with something more flexible.
It can be quite hit and miss when you’re trying to preview your designs on an iPhone. JPEGs auto scale to fit on screen and appear to be compressed. Trying to get a visual to fit to the screen width without scaling AND still allow you to scroll vertically, as you would a regular web page proves to be a bit of a challenge.
Finding a definitive resource on designing web content for mobile devices can be tricky. I’ve spent a long time scouring the web looking for concise, accurate and straightforward information on what size things should be when designing for a mobile device – specifically the iPhone Retina display. This article on Smashing Magazine is probably the best I’ve seen to date.
But it’s all so overblown. I just want to know a simple way to preview my designs accurately on my iPhone. Through reading other people’s experiences online and a fair bit of trial and error I’ve come up with a workflow that suits me and will hopefully be of some use to others.
This is by no means a definitive guide. This is just a nice simple way for previewing your designs on iPhone etc quickly and accurately. If anyone has any suggestions or improvements to this then I’m all ears.
Designing a website for iPhone Retina Display
Goes without saying but you need: Mac/PC with Photoshop, Dropbox, iPhone for previewing
- Set up a Photoshop document at 640px x 960px @72dpi resolution
- Design using vector shapes where possible
When you’re ready to preview on your device:
- Save a copy of your Photoshop file as a PDF
- Drop that PDF into a folder in Dropbox on your Mac/PC (I have a folder set up called ‘iPhone visuals’) that I just drop everything in
- Open the Dropbox app on your iPhone/iPod Touch and locate the file you’ve just created
- Et voila! Accurate previewing, no unnecessary compression, fits to width and allows vertical scrolling
