Thread: How do I make this site iPhone friendly?

Nice looking site ... too bad that I have flash turned off in safari and chrome. I'm a mac user and hate when my cpu spikes.

hmmm, css + tables. ...............

Could run a cms and/or use javascript/ajax to check browser type and then do a redirect to a mobile/iphone template. OR redirect to a non-flash based site and let users zoom in-out on their own.

Lots of options ...

Did you build the site yourself?

You don't need flash at all. Ever. While flash is all over the place, it is unintuitive to the user as flash controls behave differently than the rest of the page and they cannot be used with screen readers.

You can do everything on that page in javascript.
Check out jquery, mess around with a few of the examples. If you have javascript experience, you should be able to start working after a day of tinkering.

From there just make a simple slideshow with some effects that lets you click on the slides below. Shouldn't be too bad. Only issue I see is tinkering with the timer for the ability to click a slide. That shouldn't take too much time to overcome though.

I am in no way in the mood to change my main site. I did how ever finish the iphone/mobile version. It now fits on the iphone perfectly. As far as the ad screen, I went ghetto and use a DTML system to control its behavior and a redirection script that makes the ad rotate. If you click the ad icon, it give you a description, then if you click that, it will take you to the ad and pause. Then have the option of hitting play if you want to continue rotation again. I guess where theres a will there is a way.

http://hotelstmichel.com/iPhone

I still have some work to do on the ad system, because everytime it loads a new ad, it also loads all the buttons again, which will cause issues with load times. I think maybe putting that menu in a seperate static iframe should do it.

let the browser handle the caching. Frames are worse than flash...

BTW To redirect iPhones use the user agent css conditional:
<!--#if expr="(${HTTP_USER_AGENT} = /iPhone/)"-->
<style type="text/css">
<!--
here's where you'd include special styles for the iPhone
-->
</style>
<!--#else -->
<style type="text/css">
<!--
regular web browser style/CSS information
-->
</style>
<!--#endif -->

Andrew

Originally Posted by majasticmoose

BTW To redirect iPhones use the user agent css conditional:
<!--#if expr="(${HTTP_USER_AGENT} = /iPhone/)"-->
<style type="text/css">
<!--
here's where you'd include special styles for the iPhone
-->
</style>
<!--#else -->
<style type="text/css">
<!--
regular web browser style/CSS information
-->
</style>
<!--#endif -->

Andrew

Is the redirector I am using not working? Can some one confirm? http://hotelstmichel.com When you enter the main site it should redirect to the iphone site. Problem is its hard for me to test when I dont have a iPhone.

I was curious to know, is there a general script I can use to redirect all mobile phone users to the mobile site?

It's not redirecting when I go there with an android phone (Droid X).

Smashing magazine has some good articles on creating sites for mobiles

Yes, your site is redirecting when I use a iPhone 3.0 user agent in Firefox.
Andrew

Originally Posted by Penzance

It's not redirecting when I go there with an android phone (Droid X).

Smashing magazine has some good articles on creating sites for mobiles

If its not one thing, its another, lol. Im trying to incorporate a php script that will redirect all mobile browsers to the mobile site, but my php is very rusty.

Originally Posted by majasticmoose

Yes, your site is redirecting when I use a iPhone 3.0 user agent in Firefox.
Andrew

Can you try it in Safari for me?