Objects on device are smaller than they appear

I’ve seen a lot of design comps for iPhone, Android, and iPad apps that all suffer from the same problem: they were designed on a desktop monitor and weren’t reviewed on an actual device. This is an understandable issue for people new to mobile design. When making desktop web sites, photoshop offers a nice 1:1 view of what your app will actually look like. Mobile devices are a different beast, though. Devices tend to have tighter pixel density which means that items on the device look much smaller than they do when viewing them at 100% on your desktop.

Can you see me now?

Photoshop Lies!

As an example, look at the Twitter app for the iPad. On device, the user interface is easy to read and feels nicely balanced. Take a screenshot from the device and open it up on your desktop and the same screen has a dramatically different aspect: the type feels horsey and out of proportion.  By the same measure, an illustration that looks perfect in Photoshop can prove difficult to read when viewed on the actual device.

Emulators Lie!

Worse than photoshop are the device emulators. The android emulator is the worst – while developing an app, I got into a comfortable bubble using the emulator to make sure that all the UI pieces were coming together. The problem is that the resolution shown on the emulator is vastly different than on actual devices, and what looks great on emulators winds up impossibly small in real life. Don’t trust that something is too big while using the emulator-  try it out on a variety of devices to make sure.

Testing a mobile website in Chrome is not testing at all!

My biggest pet peeve is when someone builds a mobile website exclusively testing on Chrome or Safari. Sure, they both use the same webkit engine that most modern phones use, but using a desktop browser to test a mobile site will lead to heartache in the end. Desktop browsers are very useful for debugging, but it’s too easy to get lulled into smaller tap-targets and over-dense screens. Things that perform great on chrome on a top-of-the-line desktop machine often perform terribly on mobile devices, and elements that seem to position perfectly on a desktop browser can get all out of alignment when switching between portrait and landscape orientation. Keep testing on many different devices to make sure your mobile site is striking the right balance!

Practical solutions to viewing work on-device

Testing on devices can make for a more disruptive workflow, but there are some simple tricks that can help you work more efficiently:

  1. Save ful-screen PNG images and view them on the device photo gallery.
    It’s easy to do and very effective for android, iOS and blackberry and gives you 100% fidelity for sizing purposes. The downside is that you wind up saving tons of in-progress comp images, which can be annoying.
  2. Use an app to get live previews on-device.
    If you’re using a mac and developing for iOS check out Liveview. It’s an app that lets you get live previews from photoshop (or anything on your desktop) onto your device. Best of all, it’s free!
  3. If you’re building a web app, test it on the device browser.
    No excuses! If you want to test things before deploying on the internet, install a local web server (I use MAMP for my mac, but XAMPP will do the same) so you can look at your work on a real device.

3 comments

You may also want to try out. http://giveabrief.com. It is limited to Macs/iPhones but seems pretty slick.

holy cow tim, giveabrief looks incredible. I’m going to have to try that out ASAP!

Last I saw for emulators you can set the dpi, Also pels are not square on windows they are on Mac, just my thoughts. Using a browser on the device from a server which has access to your HTML file for webapp dev (editing) is perfect and will produce the real device look faster than deploying a native app. Much more realistic than native dev using an emulator that fumbles to set the DPI on an inferior laptop screen.