TutorialsWeb Design

How to detect an iPhone visitor to your iWeb site

Last year I wrote a post all about making an iWeb site look good on an iPhone or iPod Touch and a few of you have written to me to ask whether it would be possible to have an iPhone user automatically redirected to a completely different page, one that had been designed specifically for an iPhone’s smaller screen. Well I have been doing a bit of digging and a bit of experimenting and I think I have finally come up with a solution.

There are several ways of achieving the automatic redirection however many involve PHP or HTML and Conditional Comments which change the CSS layout of a page. All well and good if you are an established web-designer not using iWeb so I had to find a different method.

After a bit of digging around I thought about looking on sites that I know have a redirect already and soon found a good example using my iPod Touch. I found this example which will automatically redirect an iPhone (and iPod Touch) user to a specificially designed page.

<script type="text/javascript">
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
  if (document.cookie.indexOf("iphone_redirect=false") == -1)
window.location="http://youriphonedomain.com";}
}
</script>

So how and where do you put this code?

I’m afraid it’s another case of editing the HTML directly with this one. Nothing difficult though, just a bit of copying/pasting. Before you do it though you will notice I have written a redirecting URL in a line of the code ‘http://youriphonedomain.com’. This is the only bit of code you must change; just overtype with your own redirect URL where you have hosted your specific iPhone iWeb-site.

Open your site in iWeb and create a specific page (or pages) for your iPhone using visitors. Obviously this should be a stripped down version of your normal iWeb site, not too graphic heavy and with clearly defined links and plenty of ‘white-space’. Once you have completed this part of your site you need to publish your site to a folder (or MobileMe if you use it).

Using ‘Finder’ navigate to the ‘Welcome’ page (or the name you have given to it) in either the folder on your Mac or on your iDisk.

Open it in your HTML editor of choice.

Scroll down until you see the </head> tag and then add an empty line just above it. Into that empty line is where you want to paste the code snippet.

Save your page and you are done. If you used a folder then you will have to upload the changed pages via FTP but MobileMe users should be good to go.

A word of warning – Think about your visitors.

As you may already know, the iPhone can handle normal webpages just as they are (unless they are built in Flash) so it may be a good idea to include a link back to your normal iWeb site within your iPhone iWeb site in case site visitors want to see that too. If they really want to look at your normal site through a squint they should have the option, not you.

Have you got an iPhone specific iWeb site? Why not leave a comment and let us take a look.

You may also like

10 Comments

  1. That was weird, I reloaded the page and there was suddenly a new post.

  2. […] See the original post: How to detect an iPhone visitor to your iWeb site | All About iWeb […]

  3. Do i put the snippet in the Mobile website or Regular website?

  4. […] snippet of code to all of your pages. Done! You can add this piece of HTML code manually (as the AllAboutiWeb tutorial does it) or using a tool like […]

  5. THANKS, really cool post!

  6. Can you post something on how to create a site for a mobile browser — it it works for a blackberry or android, etc?

    Also, have you created an iPhone specific site? — can you show us how?

  7. When implemented as shown above I get no redirect.

    1. Steve,

      This seems to have happened to a number of people. I am preparing another post with another method that I am testing. Stay tuned!

      Tim

  8. I used this, very helfull, to return to pc site without been detected again I used another “inicio.html” file check it out

  9. It’s doesn’t work for me. Even with iTweak.

Leave a Reply to How to detect an iPhone visitor « Guimkie Cancel reply

Your email address will not be published. Required fields are marked *

More in Tutorials