Designing mobile websites for the iPhone

Even before I finally had an iPhone magically bestowed upon me (thanks to the fam!), I had a HP iPaq mobile player – and have been fascinated with designing and building sites for the mobile web. I’ve been designing and developing websites for more than a decade now, and while I wouldn’t say it’s old hat just yet, I do get into a routine often enough that it gets to be “been there, done that”, and can get a little tedious.

Mobile browsers have their own set of problems, and if you thought you had it rough with IE, Opera, Firefox, and Safari, then you’ve got another think coming my friend. There are so many variables with mobile devices that it is a real challenge to get it right, and it would be damned near impossible to do it across all devices. That being said, if you have a solid understanding of standards oriented design, then you have an excellent start.

Before you start building, the first thing you should do is examine your site analytics to determine who is on your site, what content they are accessing, and with what mobile OS and browsers. If 98% of your site’s visitors are using Safari on the iPhone/iPod, then why spend a lot of time getting it to look perfect on another device or devices? I’m not saying ignoring those other devices, but they would not be the primary viewer, so the bulk of the time should be spent developing for the primary target. Analyzing the site’s statistics will also tell you what content to focus on for the mobile site. Since bandwidth, screen resolution and speed are important on mobile devices, you should trim the fat of your site, and not delivering everything but the kitchen sink; that’s what your regular site is built for.

Facebook app notifications screenOnce you have determined what platform(s) you are developing for, then you can start in on the design and build.  For the sake of argument, I am going to focus on the iPhone. Keeping in mind that the screen size of the iPhone is 320 x 480 (pixel size), work through the design and make choices based on those dimensions. Be sure to plan for large buttons too, I can’t tell you how much of a pain it is to hit some of the little text buttons on some sites, and even some iPhone apps. Take for instance this screen shot of the Facebook app, and the little text link you have to hit to view your post when someone comments on it from the update screen – that’s something you want to avoid. If you are in need of some inspiration check out Smashing Magazine, they have a truck-load of great information compiled. In specific I recommend these two articles; Mobile Web Design Trends for 2009 and Showcase of Designs Optimized for iPhone. Now is also the time to decide if you want to support both landscape and portrait modes in your layout.

Let’s assume you have your layout planned out now, and are ready to start coding.The first thing you should code and implement is a way to determine if your visitor is on a desktop or mobile device, and I have some code that works quite well. In a post from earlier this month, I showed off some code I have been working for mobile device detection in .net. Of course not everyone is a slave to Microsoft, and I really don’t use much of it outside of my day job, so having something for a PHP solution would be handy as well. I found some useful PHP and JavaScript code earlier this year as well.

Of course, there are also specific elements you need to add to the head of the page(s) to ensure that your site fits properly within the viewport of the iPhone, otherwise your site will scale by default in Safari, and not look or work as intended. The first meta tag viewport, does just that and ensure a proper fit, while the second simply includes an image for bookmarking.

[code=”html”]
iPhone site | hooray!
[/code]

This is the bare minimum, mind you, and there is more that you can code in page if you want deal with orientation as well. Here’s another great post from Engage Interactive on building a website for the iPhone. The majority of the site should just be well written, valid code and you will be able to support the iPhone and beyond.

For you WordPress folks out there, WPTouch. It’s a great plugin that transforms your blog into an iPhone application styled site. I’ve had it running on Flogging English for a few weeks now, and while there are some plugin incompatibilities, it handles that well and I haven’t had any issues with WPTouch not working.

%d bloggers like this: