With the increase in popularity of the iPhone as a mobile browser, I couldn’t help but want to design and develop an iPhone specific version of our website and for use with our clients’ websites.
The opportunity has come and I’m bringing you along for the ride. This is going to be PART 1 of 3 PARTS so check back for future goodies.
PART 1: How to detect if the user is visiting your site on the iPhone and what to do if they are.
PART 2: How to design (or alter the design) of your website for an iPhone.
PART 3: How to take your iPhone enabled website to the next level.
PART 1
First we have to make a decision whether we want to redirect visitors to an iPhone version of our website OR if we want to use a different CSS stylesheet that is triggered when someone access the website with an iPhone.
If you decide to build an iPhone specific site then you want to
A) Find out if the user is on an iPhone and
B) Redirect them to your iPhone specific site.
This is easily done using the following javascript code.
if ((navigator.userAgent.indexOf('iPhone') !=-1) || (navigator.userAgent.indexOf('iPod') !=-1)) {
document.location = "http://iphone.yourdomain.com/";
}
Perhaps you’re not into building an iPhone specific version of your site, and you just want to change the styles around a bit so that your website looks better on the iPhone. If you do then you’ll want to use this modified version of the code above. This version is simply detects the iPhone and then attaches your alternate external iPhone stylesheet.
if ((navigator.userAgent.indexOf('iPhone') !=-1) || (navigator.userAgent.indexOf('iPod') !=-1)) {
var cssNode = document.createElement('link');
cssNode.setAttribute('rel', 'stylesheet');
cssNode.setAttribute('type', 'text/css');
cssNode.setAttribute('href', 'iphone.css');
document.getElementsByTagName('head')[0].appendChild(cssNode);
}
Personally, I think designing and developing an iPhone version of the website creates a much better user experience. The visible space on the iPhone is limited and at Media Contour we always focus on pairing the user with what they want and what you offer as quickly and easily as possible. That’s even more difficult on the iPhone if your site has too much information. Simplify things for your users by only giving them the bare essentials. If they want more they’ll go back to your site when they’re on they’re full size PC.
Another thing to consider is e-commerce. Instead of providing the check out parts of your products, allow users to “email-me” which sends them a link to that product for when they get back home or to the office. You get their email that way regardless of if they actually make a purchase or not.
So there you have it. Two different way you can make the iPhone user experience a lot more easier and friendlier when visiting your site and the javascript code that will enable you to do just that.
Check http://www.mediacontour.com/blog/ for PARTS 2 & 3.
