FEB 21, 2011

Designing for Mobile Safari

Yesterday, I spent the evening revamping the layout of the share page for Shows. It’s a pretty crucial feature since a single tweet or Facebook post about some upcoming show can reach hundreds of people, which might eventually wonder what the heck is that Shows app about? Oddly enough, that page didn’t boast an iPhone-specific layout, which is just silly. After all, I’m trying to promote an iPhone app. I really should be showing them something that looks good in a mobile browser. So I finally came up with this new design:

Much better right? The page feels much more native and adapted to the iPhone. Best part is that it was a lot more fun and easy to set up than I had originally anticipated. Here are my thoughts and finds on designing for Mobile Safari:

1. Start with the right slate

File > New with 640×960 won’t cut it. You need the whole thing (but please, no device). Trust me, it does make a huge difference, especially because it narrows you down to a much smaller, 640×704 (320×357) viewport.

2. One design to rule them all

My biggest surprise was how little work I needed to do to have the design look good on non-retina devices (I personally always design for Retina first). If you’re not working with weighty images, your retina images will look just fine on non-retina displays so you won’t even need that 1x/2x crap. All you need is this meta tag in your HTML head (adjusted to your fits)

<meta name="viewport" id="viewport" content="width=320, height=357, user-scalable=no, minimum-scale=1, maximum-scale=1" />

And a little CSS for making background-images play nice with a single set of (non-retina) dimensions:

-webkit-background-size: 100%;

3. Test, review and debug directly on device

Using something like LiveView Screencaster at this point is a no-brainer. Sizes (especially fonts) and colors might look amazing on your 27" iMac, but chances are they’ll look oddly disproportionated or just plain ugly on your iPhone. What I personally like to do is to put the Screencaster on top of my Photoshop canvas and hide it (so it stays there the whole time without getting in the way) until the design completely wrapped up. But you already do that, right?

4. Forget browser compatibility

I’m not sure what’s Safari exact market share on iOS, but I’m guessing it’s pretty damn high. That’s excellent news for browser compatibility. At last, you can use CSS properties without wondering how ugly it’ll look or work in other browsers. For example, the new design uses this awesome, 100% CSS string tail truncating code (that apparently doesn’t work in Firefox):

text-overflow: ellipsis; 
overflow: hidden; 
white-space: nowrap;

5. Think platform

In my case, the user is already using the platform for which I’m selling my product. He’s one tap away from viewing it in the App Store, and a couple more from tapping the magic “buy” button. With the new design, I feel like the share page alone might be enough to sell the app to the user and that instead of dragging him to the app site, which is pretty lengthly and not optimized for mobile, I send visitors straight to the App Store. Of course, i changed the text so it’s clear what will happen when you tap on the icon. Remember: users don’t like to be unexpectedly dragged out of their current app.

6. URL schemes – untapped potential

Another nice and underused feature of Mobile Safari is 3rd party app URL schemes. For instance, tapping this URL in Mobile Safari will launch with a pre-filled compose view:


Pretty neat right? Only (but pretty bad) caveat: the user gets an error alert if he doesn’t have the app in question. And there’s obviously no way to check what apps are installed or even set fallbacks. Such a shame.

For an app like Facebook, however, this isn’t really much of an issue, as there aren’t 56 different Facebook clients for iPhone. And Facebook does indeed have its own URL scheme to show feeds, photos, profiles and much more. But nothing about sharing. How lame. Even the touch website doesn’t sport its own share page. Ahh, Facebook