iPhone showing First UU Nashville home pageMy iPhone is now four weeks old, and, if it’s possible, I love it even more than when I first unboxed it. Each week I get a bit more proficient at its use, plus new sites and tools designed for it appear daily. Based on my experience and talking to others who have one (including a researcher adapting an iPhone to help sick children), I’m convinced this technology is not just an advance — it’s a breakthrough of the first magnitude.

Why the iPhone Matters So Very Much

It’s a tiny computer merged with a telephone. Thus I have a powerhouse in my pocket everywhere I go. The genius is in how beautifully Apple made such a powerful machine so small; in particular, it’s in how it feels and responds to touch. Its Applesque elegance is just icing on the cake.

For web developers and designers of all stripes, including those of us who tend church sites, the implication is obvious. We have to design or redesign our sites to optimize them for iPhones and their poorer cousins.

In the past, designing sites for cell phones and Blackberries was only a requirement for large or specialized sites; it was hardly a must for the rest of us. Sure, we’ve had geeks in our church who visited the site on their mobile devices in the past. But they were techies or business types who adapted easily to the end results, whatever they were. Typically they were surprised if it worked at all. Expectations were low.

What To Do

For sites like my church’s, the good news is that the expectations in this realm are still low. There’s no hurry to make our sites mobile-optimized. But the writing is on the wall. Expectations will change. Soon. My guess is within a year. To be clear, I’m speaking of the United States. The mobile market is markedly different in the rest of the world – particularly Europe and parts of Asia. There I suspect it’s been more important to design for mobile devices for some time now.

For now in the U.S., smart webbies will be taking this new reality into consideration. While we don’t need to drop everything, starting right now, I, for one, am thinking about our redesign – and I hope you are too. We were in the middle of a redesign in any event (a common enough reality), and it’s actually no big deal to do this.

I’m thinking about how best to make my church’s site work well on not just the usual suspects (the many faces of Internet Explorer, plus Firefox and Safari on a Mac), but also on generic web-enabled mobile devices and, of course, Safari on the iPhone.

The Specifics of Designing for the Mobile Web

I haven’t just been playing with my iPhone, tempting though that is. I’ve also spent quite a bit of time these last four weeks exploring the ins-and-outs of designing for them. That’s led me into the larger issue of designing for mobile devices. Here are the primary things I’ve learned:

  • Screen-size is 320 x 480 (or 480 by 320) pixels. While the iPhone shrinks pages beautifully, when you zoom in enough to read easily, on many pages you have to keep scrolling left-right – a big no-no in web design.
  • A finger is not a mouse or a stylus. It’s best to put padding around menu links particularly – otherwise you can easily press two links simultaneously or the wrong link.
  • Use columns and blocks of text. When you tap a site to zoom in, it will focus on blocks.
  • However, don’t make columns too wide.
  • Keep total file size way down. I bet a maximum of 50K (including graphics) is what to aim for. The web can be excruciatingly slow on ATT’s EGDE network. Most of the time I use the wireless connection and that’s peppy. But when it’s not available, and the iPhone switches to EDGE, connection speed goes down dramatically, and fluctuates even when you’re in the same place.
  • Neither Flash nor Java works (though it’s likely Flash will be supported soon).
  • JavaScript support is uneven.
  • Adhere as much as possible to W3C standards. More than ever, it’s important to separate both design and layout from content, so use CSS as it was meant to be used.

Since my church’s webbies have been good net citizens, and started to separate our content from design, it shouldn’t be that hard. Being graphics and Flash-heavy will no longer be an option, but that’s no hardship for us. We were already thinking clean and simple.

The big question for me remains: do I set a site up to sniff for iPhones, Blackberries and their kith and kin? My first thought was to use the CSS Media Type. That’s the clever way you can control the print version of your sites. While hardly any mobile devices seem to use the “handheld” media type, I thought the iPhone might. Foiled again. It doesn’t, and perhaps in its case this makes sense. Handhelds are defined as “typically small screen, monochrome, limited bandwidth.”

Nonetheless, it’s easy to do. See, for example, my simple PHP sniffer. This sort of detection makes it possible to automatically go to the mobile-optimized version of a site when you enter the primary web address.

Alternatively, do I give you a choice that you have to click on? Do I find a place for a link that says something like “Mobile Version”? That’s fairly popular lately and is often paired with a .mobi extension

Or is there a third way? Perhaps the site can sniff a handheld, but once there, it offers you a way to turn off the mobile look-and-feel? My guess is this third way is the best, though I’ve yet to see it done.

Whatever the answers to these questions, clearly planning for the iPhone and other handhelds now is the smart thing to do. So clean up your code and keep your ear to the virtual ground. The future has arrived.

Further Resources

Tools

Inspiration

iPhone Resources

Mobile Web Resources

2 Comments »