Visit Page
Skip to content

Jon’s Most Excellent Weekend Project (DIY iPhone Optimized Website)

Okay kids, you listening?  Sit down, listen carefully, yes, that’s correct – you might want to take notes.  You know how you have your website and ever since you got that iPhone last year you’ve known that it’s not compatible.  Right? How, if you surf to your site on the phone, your very own site, the home page appears but none of the drop-down menu items function, none of the roll-over links work.  Sure someone can get to your contact page but they’ll probably never try because they’re so frustrated with the rest of your site not working. Maybe your buttons are too small?  It could happen, trust me, it could.  Heck, some of you may even have a Flash site and then you’re just plum out of luck.

And then that new iPhone comes out and now two-to-three-to-four-to-five times as many people have the phone and you’re picturing an art director or an art buyer or someone in need of a photographer searching on their phone while they commute or they’re in a bind and the phone’s at hand so why not use it?…

Well, on Friday after lots of on and off searching I found the answer, that bit of Javascript which like manna from heaven will solve the problem.  It’s simple, it’s only two lines of code plus one character.  Who knew?  Right?  I sure didn’t.

Now, I’m going to give you some help, get you started, but… and this is a big BUT, there are some disclaimers.  I’ve put them in fine print to make them legal:

I’m not a coding whiz.  I don’t know Javascript.  I take what I find and make it work.  I know nothing so anything you do is at your own risk.  I can’t tell you if your site will crash, if gas will go up to $5/gallon, if your hair will fall out, if objects truly are closer than they appear. IOW, you’re on your own.

The little bit of code is this:

if (navigator.userAgent.indexOf(‘iPhone’) != -1) {
location.href = ‘http://www.yoursite.com/newfolder’;
}

That’s it?!  It’s a bit of Javascript, it needs to go into the header on your home page.  All it’s doing is saying, “Whoa, you’re looking at this web site with an iPhone so I’m going to send you over here instead, to an ever so special site that I made just for you.”  The “here” is the address in the code, “http://www.yoursite.com/newfolder”, and you need to customize this.  Don’t forget!  It’s mucho important. It can be a link within your site’s folders instead of a full URL as above.

Beyond this I’m going to leave you to your own devices (not intended but I’ll take the pun).  The Javascript code came from here.  You’ll need to create a site for the iphone in its own folder and for that html works just fine.  Look here for more information on html for the iphone, screen sizing, defaults and linking code for email and calling.  Calling?  Yes, imagine that… someone can view your site on the iPhone, tap your phone number on the contact page and call you, automatically.  They don’t even have to enter the number.  Cool beans.

My regular home page:

home_page

My home page for the iPhone:
iphone_site

2 Comments

  1. Hey Jon,
    Thanks for the info! This is exactly what I have been looking to do as my main website is Flash based, which the iPhone cannot display. So thanks again.
    -Mark

  2. hello Jon, thanks alot for that awesome tutorial. It is the most simple tutorial with all necesarry information I found on the web! cheers, Marcus

Comments are closed.