Designing a Web site for the iPhone was an interesting challenge. I enjoyed every minute of it. I learned more than I really wanted to know about the code side of building a mobile web site. I found some really good reference sites that I will link to later on in this post. Here is the link to the
mobile site, obviously it is best viewed on an iPhone, if you are viewing it on a desktop machine it is optimized for Safari. There are some parts of the site that will only work on the iPhone, but it should work well enough for you to see how the site is laid out and how it functions.
The first challenge I had to deal with was what size to build the site. Safari for the iPhone automatically assumes that all web sites are 920px wide and shrinks pages down to fit the 320px wide screen, even if the site is 320px wide (I mentioned this in an earlier
post you can scroll down the page to see the samples). What you have to do is put this little piece of code (below) in the header section of your page that tells mobile Safari not to scale the page.
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0;">
Once I added the viewport code to each page I could build my mobile site at the native iPhone resolution of 320px wide, and not have to worry about scaling.
Now that I knew what size to build the site, I started designing the site in Illustrator CS4. I found a great template that
Mordy Golding posted that helped me see what the site would look like on the iPhone as I was designing.
Mercury Intermedia also had a downloadable vector file of native iPhone elements, like the button bar that is at the bottom of mobile Safari. I added the button bar to my iPhone template, so I could see how the elements on my page would interact with the bar. I did not worry about address bar at the top of the screen, I found a piece of Java script on the
iPhone microsites site that hides the address bar on page load. That saved me 60px at the top of the page. That left me with a total image area of 320px wide by 416px high. Not very much when your goal is to have as few scrolling pages as possible.
The whole Web site fits in the iPhone's screen without the need to zoom, and there is scrolling only on the pages with a lot of text. Each button was designed to easily accommodate the size of the average finger (did you know the average finger is 50 - 70 px wide?), no zooming required. I also did not want to do a stacked list of buttons for navigation that is so common on iPhone web sites. That is such a waste of usable content space. The navigation bar at the top only takes up 35px of vertical space, and the buttons are big enough that you can navigate the site one-handed.
Launching native iPhone apps like maps and mail is easy from a web site in mobile Safari.
Apple's developer site has all the link info you need to add application links to a mobile site. I created one click links to: call W+W, drop a pin on a map in the google maps application, and launch a compose window in mail already addressed to one of us.
Our mobile site is elegant and simple, easy to navigate, with most information accessible with one or 2 clicks from the home page. We minimized the amount of content, you can find out who we are, see what we do, and contact us in a matter of minutes. The mobile Web site design stays true to the brand look we have created, visually it is very similar to our Web site, but it is not just a shrunken version of our Web site, you can instantly tell it was designed for a mobile device. The type is set larger, 15px instead of the 12px size I use on a standard site, easy to read in the iPhone's high resolution screen.
I was surprised when I started researching Web sites designed specifically for mobile devices, how few there were, and how poorly they were done. Considering how many mobile devices are out there, I think a lot of companies are missing a very important marketing opportunity. Our next step is the optimize the site for a similar sized mobile device like
T-Mobile's G1 running Android, you will be able to read about that in a future post.