Back in the days of print, this was easy. You worked on your brochure or your business card, you printed it out, you checked your type sizes and margins, marked up your layout, tweaked your layout, and repeated. Designing for the web is also pretty easy: in Photoshop or Illustrator, set zoom to 100%. Maybe throw a browser chrome around the layout if you’re feeling fancy. Done.
Designing for mobile devices is trickier. You probably have at least 2 (usually more) very different screen sizes AND resolutions to consider, and they are never anywhere close to what your monitor displays. So your best bet is to put your layout on the device for which it is being designed.
I’ve done this lots of different ways, and I have found the following two methods work pretty well in most cases.
Slideshow
This works great for presentations and discussions. Export size-as jpegs, load them onto your device over USB / Dropbox / iPhoto / whatever, and browse your images as a slideshow. It’s a great way to show your work, and is helpful when trying to explain specific user interactions and flows. However, making slideshows can become extremely time consuming if you’re detailing a layout, and you just want to narrow down a colour or a font size. Which brings me to option 2:Use your tablet or phone as a second display.
I first learned this trick from the smart folks at Teehan + Lax, who were using an iOS app called LiveView to test stuff on iPhone and iPad apps. Here at Mozilla, though, we spend much of our time designing for Android these days. Thankfully, there is an app for us, too. It’s called iDisplay, and it allows you to connect your phone to your computer over WiFi, and your computer treats the device as a second monitor.- Once you have iDisplay installed and running on your computer and device, open up your Illustrator or Photoshop document.
- Go Window > New Window.
- Set your zoom to 100%.
- Drag this window over to your device, and hit F for full screen. You might have to pan around a bit with your hand tool to get your window aligned properly.
